cttq-mc
Version:
cttqtest
398 lines (392 loc) • 12.6 kB
JavaScript
var ua = window.navigator.userAgent
export default {
randomString(len) {
len = len || 32
var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
var maxPos = $chars.length
var pwd = ''
for (let i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
}
return pwd
},
cache: {
/**
* @description 将对象保存至缓存
* @example
*/
set(key, object) {
window.localStorage.setItem(key, JSON.stringify(object))
},
/**
* @description 从缓存中读取对象
* @param parse 是否解析为对象, 默认为true
* @example
*/
get(key) {
var string = window.localStorage.getItem(key)
return JSON.parse(string)
},
/**
* @description 从缓存中删除对象
* @param parse 是否解析为对象, 默认为true
* @return 返回被删除的对象
* @example
*/
del(key) {
window.localStorage.removeItem(key)
}
},
/**
* 数字补零 - 增加位数
*/
fillZeroLength(num, length, place) {
var zero = ''
if (num.length !== length) {
for (let i = 1; i <= (length - num.length); i++) {
zero = '' + zero + '0'
}
if (place === 'front') {
num = '' + zero + '' + num + ''
}
if (place === 'after') {
num = '' + num + '' + zero + ''
}
}
return num
},
/**
* 页面URL获取/设置参数
* @type {Object}
*/
urlSearchParams: {
keyValues: function(search) {
var vars = {};
var parts = search.replace(/[?&]?([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = decodeURI(value);
});
return vars;
},
keys: function(search) {
var keyvalues = this.keyValues(search);
var keys = [];
for(var key in keyvalues) {
keys.push(key);
}
return keys;
},
values: function(search) {
var keyvalues = this.keyValues(search);
var values = [];
for(var key in keyvalues) {
values.push(keyvalues[key]);
}
return values;
},
/**
* 获取指定URL搜索字符串中的指定值
* @param {[type]} search URL搜索字符串
* @param {[type]} key 关键字
* @return {[type]} 关键字的值，没有则返回null
*/
get: function(search, key) {
var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
var r = search.substr(1).match(reg);
if (r != null) return decodeURI(r[2]);
return null;
},
/**
* 给URL搜索字符串中添加参数
* @param {[type]} search URL搜索字符串
* @param {[type]} key 关键字
* @param {[type]} value 关键字对应的值
* @return {[type]} URL搜索字符串
*/
set: function(search, key, value) {
var str = "";
if (search.indexOf('?') != -1)
str = search.substr(search.indexOf('?') + 1);
else
return "?" + key + "=" + value;
var returnSearch = "";
var setparam = "";
var arr;
var modify = "0";
if (str.indexOf('&') != -1) {
arr = str.split('&');
for (var i = 0; i < arr.length; i++) {
if (arr[i].split('=')[0] == key) {
setparam = value;
modify = "1";
} else {
setparam = arr[i].split('=')[1];
}
returnSearch = returnSearch + arr[i].split('=')[0] + "=" + setparam + "&";
}
returnSearch = returnSearch.substr(0, returnSearch.length - 1);
if (modify == "0")
if (returnSearch == str)
returnSearch = returnSearch + "&" + key + "=" + value;
} else {
if (str.indexOf('=') != -1) {
arr = str.split('=');
if (arr[0] == key) {
setparam = value;
modify = "1";
} else {
setparam = arr[1];
}
returnSearch = arr[0] + "=" + setparam;
if (modify == "0")
if (returnSearch == str)
returnSearch = returnSearch + "&" + key + "=" + value;
} else
returnSearch = key + "=" + value;
}
return "?" + returnSearch;
}
},
file: {
// 从图片Base64字符串中获取旋转角度
imageOrientationFromBase64(base64) {
base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, '');
var binary_string = window.atob(base64);
var len = binary_string.length;
var bytes = new Uint8Array( len );
for (var i = 0; i < len; i++) {
bytes[i] = binary_string.charCodeAt(i);
}
var view = new DataView(bytes.buffer);
if (view.getUint16(0, false) != 0xFFD8) {
return -2;
}
let length = view.byteLength;
let offset = 2;
while (offset < length) {
var marker = view.getUint16(offset, false);
offset += 2;
if (marker == 0xFFE1) {
if (view.getUint32(offset += 2, false) == 0x45786966) {
var little = view.getUint16(offset += 6, false) == 0x4949;
offset += view.getUint32(offset + 4, little);
var tags = view.getUint16(offset, little);
offset += 2;
for (var i = 0; i < tags; i++) {
if (view.getUint16(offset + (i * 12), little) == 0x0112) {
return view.getUint16(offset + (i * 12) + 8, little);
break;
}
}
}
} else if ((marker & 0xFF00) != 0xFF00) {
break;
} else {
offset += view.getUint16(offset, false);
}
}
return -1;
},
/* 压缩图片
* @param {object} imageFile 是图片文件
* @param {int=1024 * 1024} maxSize 限制文件最大存储大小, 默认1M,
*/
compressImageFile(imageFile, maxSize) {
if (!imageFile && !["object"].includes(typeof imageFile)) {
return;
}
maxSize = maxSize || 1024 * 1024;
return new Promise((resolve, reject) => {
//如果文件小于maxSize，无需进行压缩
if (imageFile.size <= maxSize) {
return resolve(imageFile);
}
const reader = new FileReader();
reader.readAsDataURL(imageFile);
reader.onload = () => {
let base64 = reader.result;
let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d');
let image = document.createElement('img');
image.src = base64;
image.onerror = error => reject(error);
image.onload = () => {
// 旋转角度获取
let orientation = this.imageOrientationFromBase64(base64);
let width = image.naturalWidth;
let height = image.naturalHeight;
if (4 < orientation && orientation < 9) {
canvas.width = height;
canvas.height = width;
} else {
canvas.width = width;
canvas.height = height;
}
switch (orientation) {
case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
case 3: ctx.transform(-1, 0, 0, -1, width, height); break;
case 4: ctx.transform(1, 0, 0, -1, 0, height); break;
case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
case 6: ctx.transform(0, 1, -1, 0, height, 0); break;
case 7: ctx.transform(0, -1, -1, 0, height, width); break;
case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
default: break;
}
// 绘制图片
ctx.drawImage(image, 0, 0);
// 调整压缩比例
let quality = 0.5;
let maxQuality = 1;
let minQuality = 0;
while (maxQuality - minQuality > 0.01) {
let tmpBase64 = canvas.toDataURL("image/jpeg", quality);
let tmpPadding = 0;
if (tmpBase64.endsWith("==")) {
tmpPadding = 2;
} else if (tmpBase64.endsWith("=")) {
tmpPadding = 1;
}
let tmpSize = tmpBase64.split(",")[1].length / 4 * 3 - tmpPadding;
if (tmpSize < maxSize) {
minQuality = quality;
quality = (quality + maxQuality) / 2;
} else if (tmpSize > maxSize) {
maxQuality = quality;
quality = (quality + minQuality) / 2;
} else {
break;
}
}
// 压缩成指定大小
let name = imageFile.name.substring(0, imageFile.name.lastIndexOf("."));
canvas.toBlob((blob) => {
let file = this.convertToFileFromBlob(blob, name + ".jpeg");
resolve(file)
}, "image/jpeg", quality);
}
};
reader.onerror = error => reject(error);
});
},
/* 压缩图片
* @param {string} imageData 是base64数据
* @param {int=1024 * 1024} maxSize 限制文件最大存储大小, 默认1M
*/
compressImageData(imageData, maxSize) {
if (!imageData && !["string"].includes(typeof imageData)) {
return;
}
maxSize = maxSize || 1024 * 1024;
return new Promise((resolve, reject) => {
let imageSplits = imageData.split(",");
if (imageSplits.length != 2) {
reject();
return;
}
let meta = imageSplits[0];
let type = meta.substring(5, meta.length - 7);
// let extension = type.split("/")[1];
// let fileName = `${new Date().getTime()}.${extension}`;
let padding = 0;
if (imageData.endsWith("==")) {
padding = 2;
} else if (imageData.endsWith("=")) {
padding = 1;
}
let fileSize = imageSplits[1].length / 4 * 3 - padding;
//如果文件大于maxSize，就需要进行压缩
if (fileSize <= maxSize) {
return resolve(imageData);
}
// 需要压缩
let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d');
let image = document.createElement('img');
image.src = imageData;
image.onerror = error => reject(error);
image.onload = () => {
// 旋转角度获取
let orientation = this.imageOrientationFromBase64(imageData);
// 调整旋转方向
if (4 < orientation && orientation < 9) {
canvas.width = image.naturalHeight;
canvas.height = image.naturalWidth;
} else {
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
}
switch (orientation) {
case 2: ctx.transform(-1, 0, 0, 1, image.naturalWidth, 0); break;
case 3: ctx.transform(-1, 0, 0, -1, image.naturalWidth, image.naturalHeight); break;
case 4: ctx.transform(1, 0, 0, -1, 0, image.naturalHeight); break;
case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
case 6: ctx.transform(0, 1, -1, 0, image.naturalHeight, 0); break;
case 7: ctx.transform(0, -1, -1, 0, image.naturalHeight, image.naturalWidth); break;
case 8: ctx.transform(0, -1, 1, 0, 0, image.naturalWidth); break;
default: break;
}
// 绘制图片
ctx.drawImage(image, 0, 0);
// 质量压缩成指定大小的比例
let compressBase64 = null;
let quality = 0.5;
let maxQuality = 1;
let minQuality = 0;
while (maxQuality - minQuality > 0.01) {
let tmpBase64 = canvas.toDataURL("image/jpeg", quality);
let tmpPadding = 0;
if (tmpBase64.endsWith("==")) {
tmpPadding = 2;
} else if (tmpBase64.endsWith("=")) {
tmpPadding = 1;
}
let tmpSize = tmpBase64.split(",")[1].length / 4 * 3 - tmpPadding;
if (tmpSize < maxSize) {
minQuality = quality;
quality = (quality + maxQuality) / 2;
} else if (tmpSize > maxSize) {
maxQuality = quality;
quality = (quality + minQuality) / 2;
} else {
break;
}
compressBase64 = tmpBase64;
}
resolve(compressBase64);
}
});
},
// file转换成base64
convertToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
},
// base64转成blob
convertToBlobFromBase64(base64) {
var arr = base64.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
// blob转换为file
convertToFileFromBlob(theBlob, fileName) {
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
},
// base64转换成file
convertFromBase64(base64, fileName) {
let blob = this.convertToBlobFromBase64(base64);
let file = this.convertToFileFromBlob(blob, fileName);
return file;
}
}
}