vue.js实现图片压缩封装方法

// 引入imgUpload方法
import * as imgUpload from "./utils/imgUpload"
//外部使用
Vue.prototype.$imgUpload = imgUpload

 const dataURLtoFile = (dataurl, filename) => { // 将base64转换为file文件
    let arr = dataurl.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)
    }
    return new File([u8arr], filename, { type: mime })
};
const imgZip = (file) => {
    var _this = this;
    let imgZipStatus = new Promise((resolve, reject) => {
        let canvas = document.createElement("canvas"); // 创建Canvas对象(画布)
        let context = canvas.getContext("2d");
        let img = new Image();
        img.src = file.content; // 指定图片的DataURL(图片的base64编码数据)
        var Orientation = '';
        img.onload = () => {
            //根据情况定义
           // canvas.width = 400;
           // canvas.height = 300;
           canvas.width = img.width;
           canvas.height = img.height;
           context.drawImage(img, 0, 0, canvas.width, canvas.height);
 
           file.content = canvas.toDataURL(file.file.type, 0.5); // 0.92为默认压缩质量
            
           let files = dataURLtoFile(file.content, file.file.name);
           resolve(files)
        }
    })
    return imgZipStatus;
};
export {
    imgZip,
}

//上传方法
afterCard(file) {
      this.$imgUpload.imgZip(file).then(resData => {
        const formData = new FormData();
        formData.append("file", resData);
 
        // 请求接口上传图片到服务器
        uploadImg(formData).then(res => {
 
        })
      })
}

canvas.getContext("webgl",
                 { antialias: false,
                   depth: false });

ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = document.getElementById('source');
ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);