t-comm
Version:
专业、稳定、纯粹的工具库
247 lines (240 loc) • 7.58 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var _typeof = require('@babel/runtime/helpers/typeof');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
/**
* 处理图片尺寸，即去掉单位 px/rem，将 string 类型转为 number 类型
* rem 单位的话，会将数值乘以根元素的 fontSize，以获取对应的 px 值
* @param {Number | String} size 输入单位
* @returns {Number} 处理后的数值
*
* @example
*
* handleImgUnit(3)
* // 3
*
* handleImgUnit('10')
* // 10
*
* handleImgUnit('30px')
* // 30
*
* handleImgUnit('5rem')
* // 250
*
* document.documentElement.style.fontSize = '10px';
* handleImgUnit('5rem')
* // 50
*/
var handleImgUnit = function handleImgUnit(size) {
if (!size || typeof size === 'number') {
return size;
}
if (size.indexOf('px') === -1 && size.indexOf('rem') === -1) {
return parseFloat(size);
}
if (size.indexOf('px') > -1) {
return parseFloat(size.replace('px', ''));
}
var baseFontSize = 50;
try {
baseFontSize = parseFloat(document.documentElement.style.fontSize.replace('px', ''));
if (isNaN(baseFontSize)) {
baseFontSize = 50;
}
} catch (e) {
console.log('err', e);
}
if (size.indexOf('rem') > -1) {
return parseFloat(size.replace('rem', '')) * baseFontSize;
}
};
var zhizhu = 'game.gtimg.cn';
var youtu = 'image.myqcloud.com';
var wxlogo = 'wx.qlogo.cn';
var thirdqq = 'thirdqq.qlogo.cn';
var thirdwx = 'thirdwx.qlogo.cn';
var qqlogo = 'q.qlogo.cn';
var ossweb = 'ossweb-img.qq.com';
var cdnMap = new Map([['igame-10037599.cos.ap-shanghai.myqcloud.com', 'igame-10037599.file.myqcloud.com'], ['image-1251917893.cos.ap-guangzhou.myqcloud.com', 'image-1251917893.file.myqcloud.com'], ['igame-10037599.image.myqcloud.com', 'igame-10037599.file.myqcloud.com']]);
var isTencentPic = function isTencentPic(url) {
return url && (url.indexOf(zhizhu) !== -1 || url.indexOf(youtu) !== -1 || url.indexOf(wxlogo) !== -1 || url.indexOf(thirdqq) !== -1 || url.indexOf(qqlogo) !== -1 || url.indexOf(thirdwx) !== -1 || url.indexOf(ossweb) !== -1);
};
var TENCENT_CLOUD_PICS = ['.myqcloud.com/', 'cyberimage.sgameglobal.com/'];
var startWithHttp = function startWithHttp(url) {
var http = /http:/;
return http.test(url);
};
/**
* 将图片地址由 http 替换为 https 协议
* @param url 图片地址
* @returns 新的地址
*/
var getHttpsUrl = function getHttpsUrl(url) {
if (startWithHttp(url) && isTencentPic(url)) {
url = url.replace('http', 'https');
}
return url;
};
/**
* 获取 cdn 链接
* @param {string} url 图片地址
* @returns 新的地址
*/
function getCdnUrl(url) {
if (url === void 0) {
url = '';
}
if (url) {
var domainStr = url.split('/');
if (domainStr && domainStr.length > 2) {
var domain = domainStr[2];
if (cdnMap.has(domain)) {
url = url.replace(domain, cdnMap.get(domain));
}
return url;
}
} else {
return url;
}
return '';
}
function getCompressTencentImgSize(imageWidth, imageHeight) {
var width = 0;
var height = 0;
if (imageWidth && imageHeight) {
width = imageWidth > 0 ? imageWidth * 2 : 0;
height = imageHeight > 0 ? imageHeight * 2 : 0;
}
// width和height都按10取整，解决图片大小微微改变的时候，图片闪烁的问题
width = formatInt(width, 1, true);
height = formatInt(height, 1, true);
// 有时候图片没设置长宽，导致图片100%时图片过大，选择宽度优先
if (width > 200 && height > 200 && width === height) {
height = 0;
}
if (width < 10 && height < 10) {
width = 0;
height = 0;
}
return {
width: width,
height: height
};
}
function getCompressTencentImgUrl(url, imageWidth, imageHeight) {
// 如果是腾讯云的图片实现按需加载（1倍的时候感觉图片有点糊，放大到2倍）
var isTencentCloudPic = url && TENCENT_CLOUD_PICS.some(function (item) {
return url.indexOf(item) !== -1;
}) && url.indexOf('?') === -1;
if (!isTencentCloudPic) {
return url;
}
var _a = getCompressTencentImgSize(imageWidth, imageHeight),
width = _a.width,
height = _a.height;
if (width > 150 || height > 150) {
url = "".concat(url, "?imageMogr2/format/yjpeg/quality/80/thumbnail/!").concat(width > 0 ? width.toString() : '', "x").concat(height > 0 ? height.toString() : '', "r");
} else if (width > 0 || height > 0) {
url = "".concat(url, "?imageMogr2/thumbnail/!").concat(width > 0 ? width.toString() : '', "x").concat(height > 0 ? height.toString() : '', "r");
}
return url;
}
/**
* 获取压缩后的图片
* @param {string} url 图片地址
* @param {number} [imageWidth=0] 宽度
* @param {number} [imageHeight=0] 高度
* @returns 新的 url 地址
*/
function getCompressImgUrl(url, imageWidth, imageHeight) {
var _a;
if (imageWidth === void 0) {
imageWidth = 0;
}
if (imageHeight === void 0) {
imageHeight = 0;
}
// 游戏内无法加载http，统一替换
url = (_a = url === null || url === void 0 ? void 0 : url.replace) === null || _a === void 0 ? void 0 : _a.call(url, 'http:', 'https:');
if (_typeof__default["default"](url) === 'object') {
imageWidth = url.width ? url.width : 0;
imageHeight = url.height ? url.height : 0;
url = url.url ? url.url : '';
}
url = getCompressTencentImgUrl(url, imageWidth, imageHeight);
return url;
}
var formatInt = function formatInt(num, prec, ceil) {
if (prec === void 0) {
prec = 2;
}
if (ceil === void 0) {
ceil = true;
}
var len = String(num).length;
if (len <= prec) {
return num;
}
var mult = Math.pow(10, prec);
return ceil ? Math.ceil(num / mult) * mult : Math.floor(num / mult) * mult;
};
/**
* 压缩图片，会依次执行 getHttpsUrl, getCdnUrl, getCompressImgUrl
* @param {string} url 图片地址
* @param {number} [imageWidth=0] 宽度
* @param {number} [imageHeight=0] 高度
* @returns 新的 url 地址
*/
var tinyImage = function tinyImage(url, imageWidth, imageHeight) {
if (imageWidth === void 0) {
imageWidth = 0;
}
if (imageHeight === void 0) {
imageHeight = 0;
}
url = getHttpsUrl(url);
url = getCdnUrl(url);
url = getCompressImgUrl(url, imageWidth, imageHeight);
return url;
};
var supportsWebp = function supportsWebp(_a) {
var createImageBitmap = _a.createImageBitmap,
Image = _a.Image;
if (!createImageBitmap || !Image) return Promise.resolve(false);
return new Promise(function (resolve) {
// 加载一个1x1的空白图片，看下是否支持webP
var image = new Image();
image.onload = function () {
createImageBitmap(image).then(function () {
resolve(true);
})["catch"](function () {
resolve(false);
});
};
image.onerror = function () {
resolve(false);
};
image.src = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
});
};
/**
* 判断当前浏览器是否支持 webp
* @returns {Promise<boolean> }是否支持
*/
var isSupportedWebp = function isSupportedWebp() {
var memo = null;
return function () {
if (!memo) {
memo = supportsWebp(window);
}
return memo;
};
};
exports.getCdnUrl = getCdnUrl;
exports.getCompressImgUrl = getCompressImgUrl;
exports.getHttpsUrl = getHttpsUrl;
exports.handleImgUnit = handleImgUnit;
exports.isSupportedWebp = isSupportedWebp;
exports.tinyImage = tinyImage;