You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
3.9 KiB
113 lines
3.9 KiB
/**
|
|
* 图片压缩工具类
|
|
* 最大高度和最大宽度都为 500，如果超出大小将等比例缩放。
|
|
*
|
|
* 注意可能出现压缩后比原图更大的情况，在调用的地方自己判断大小并决定上传压缩前或压缩后的图到服务器。
|
|
*/
|
|
|
|
// 将base64转换为blob
|
|
export function convertBase64UrlToBlob(urlData, file) {
|
|
let arr = urlData.split(',')
|
|
let mime = arr[0].match(/:(.*?);/)[1]
|
|
let bstr = atob(arr[1])
|
|
let n = bstr.length
|
|
let u8arr = new Uint8Array(n)
|
|
while (n--) {
|
|
u8arr[n] = bstr.charCodeAt(n)
|
|
}
|
|
|
|
var blob = new Blob([u8arr], { type: mime });
|
|
|
|
var fileItem = new File([blob], file.file.name, {type: mime, lastModified: Date.now()});
|
|
return fileItem
|
|
}
|
|
|
|
|
|
// 压缩图片
|
|
export function compressImage(path, config) {
|
|
return new Promise((resolve, reject) => {
|
|
// 生成canvas
|
|
var canvas = document.createElement('canvas')
|
|
var ctx = canvas.getContext('2d')
|
|
var img = new Image()
|
|
img.crossOrigin = 'Anonymous'
|
|
|
|
img.onload = function () {
|
|
var that = this
|
|
var w = that.width
|
|
var h = that.height
|
|
var scale = w / h
|
|
w = config.width || config.height * scale || w
|
|
h = config.height || config.width / scale || h
|
|
// 最大宽高如有限制时的处理
|
|
w = config.maxWidth && w > config.maxWidth ? config.maxWidth : w
|
|
h = config.maxHeight && h > config.maxHeight ? config.maxHeight : h
|
|
w = Math.min(w, h * scale) || w
|
|
h = Math.min(h, w / scale) || h
|
|
|
|
var quality = 0.7 // 默认图片质量为0.7
|
|
// 创建属性节点
|
|
var anw = document.createAttribute('width')
|
|
anw.nodeValue = w
|
|
var anh = document.createAttribute('height')
|
|
anh.nodeValue = h
|
|
canvas.setAttributeNode(anw)
|
|
canvas.setAttributeNode(anh)
|
|
ctx.fillStyle = 'rgba(255, 255, 255, 0)';
|
|
|
|
ctx.clearRect(0, 0, w, h);
|
|
ctx.drawImage(that, 0, 0, w, h)
|
|
|
|
if (config.quality && config.quality <= 1 && config.quality > 0) {
|
|
quality = config.quality
|
|
}
|
|
|
|
let type = '*';
|
|
|
|
try {
|
|
let arr = path.split(',')
|
|
let mime = arr[0].match(/:(.*?);/)[1];
|
|
|
|
type = mime.split('/')[1].toLowerCase();
|
|
} catch (error) {
|
|
type = '*';
|
|
console.log(error.message)
|
|
}
|
|
|
|
var base64 = '';
|
|
if(type === 'gif'){
|
|
var reader = new FileReader();
|
|
reader.readAsDataURL(config.file.file);
|
|
reader.onload = function(e) {
|
|
base64 = this.result;
|
|
let blob = convertBase64UrlToBlob(base64, config.file);
|
|
// 回调函数返回blob的值。也可根据自己的需求返回base64的值
|
|
|
|
let result = {};
|
|
result.blob = blob;
|
|
result.w = w;
|
|
result.h = h;
|
|
|
|
resolve(result);
|
|
canvas = null
|
|
};
|
|
}else{
|
|
// 在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。
|
|
base64 = canvas.toDataURL('image/'+ type, quality);
|
|
|
|
let blob = convertBase64UrlToBlob(base64, config.file);
|
|
// 回调函数返回blob的值。也可根据自己的需求返回base64的值
|
|
|
|
let result = {};
|
|
result.blob = blob;
|
|
result.w = w;
|
|
result.h = h;
|
|
|
|
resolve(result);
|
|
canvas = null
|
|
}
|
|
}
|
|
|
|
img.src = path;
|
|
})
|
|
}
|
|
|