Vue使用mixins实现压缩图片代码

Vue使用mixins实现压缩图片代码

本文介绍了vue使用mixins实现压缩图片代码，分享给大家，具体如下：

图片压缩

创建mixins image-compress.js

export default {

methods: {

/**

* 检查并压缩图片大小

*/

checkAndHandleCompression(file) {

return new Promise((resolve, reject) => {

this.imgBase64(file, (image, canvas) => {

let maxSize = 2 * 1024; // 2M (单位KB)

let fileSize = file.size / 1024; // 图片大小 (单位KB)

let uploadSrc, uploadFile;

if (fileSize > maxSize) { // 如果图片大小大于maxSize，进行压缩

uploadSrc = canvas.toDataURL(file.type, maxSize / fileSize);

uploadFile = this.convertBase64UrlToFile(uploadSrc, file.name); // 转成file文件

} else {

uploadSrc = image.src;

uploadFile = file;

}

let compressedSize = uploadFile.size / 1024;// 压缩后图片大小 (单位KB)

// 判断图片大小是否小于maxSize，如果大于则继续压缩至小于为止

if (compressedSize.toFixed(2) > maxSize) {

this.checkAnTLRQvuWEnkdHandleUpload(uploadFile);

} else {

let fileOptions = {uploadSrc, uploadFile};

resolve(fileOptions);

}

});

});

},

/**

* 将图片转化为base64

*/

imgBase64(file, callback) {

// 看支持不支持FileReader

if (!file || !window.FileReader) return;

// 创建一个 Image 对象

let image = new Image();

// 绑定 load 事件处理器，加载完成后执行

image.onload = function () {

// 创建 canvas DOM 对象

let canvas = document.createElement('canvas');

// 返回一个用于在画布上绘图的环境, '2d' 指定了您想要在画布上绘制的类型

let ctx = canvas.getContext('2d');

// 如果高度超标 // 参数，最大高度

let MAX_HEIGHT = 3000;

if (image.height > MAX_HEIGHT) {

// 宽度等比例缩放 *=

image.width *= MAX_HEIGHT / image.height;

image.height = MAX_HEIGHT;

}

// 获取 canvas的 2d 环境对象,

// 可以理解Context是管理员，canvas是房子

ctx.clearRect(0, 0, cahttp://nvas.width, canvas.height);

// 重置canvas宽高

canvas.width = image.width;

canvas.height = image.height;

// 将图像绘制到canvas上

ctx.drawImage(image, 0, 0, image.width, image.height);

callback(image, canvas);

};

if (/^image/.test(file.type)) {

// 创建一个reader

let reader = new FileReader();

// 将图片将转成 base64 格式

reader.readAsDataURL(file);

// 读取成功后的回调

reader.onload = function () {

// 设置src属性，浏览器会自动加载。

// 记住必须先绑定事件，才能设置src属性，否则会出同步问题。

image.src = this.result;

};

}

},

/**

* 把Base64转换成file文件

*/TLRQvuWEnk

convertBase64UrlToFile(dataurl, filename) {

let arr = dataurl.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 File([u8arr], filename, {type: mime});

}

}

};

example

...

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。