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

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

本文介绍了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.checkAndHandleUpload(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, canvas.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文件
 */
 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

<template>
 ...
</template>
<script>
 import imageUploadMixins from '@/mixins/image-compress'; 
 export default { 
 mixins: [imageUploadMixins], 
 ... 
 methods:{
 handleUploadImage(e){
 let file = e.target.files[0];
 this.checkAndHandleCompression(file).then( fileOptions => {
 // let {uploadSrc, uploadFile} = fileOptions;
 
 // 压缩完成使用 uploadSrc, uploadFile
 
 ...
 
 });
 }
 }
 ... 
 }
</script>
<style>
 ...
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。