js使用canvas图片压缩和上传

js使用canvas图片压缩和上传

用户在前端上传图片的时候有时候会上传大图，然后后端又不需要这么大的图片，就让前端进行图片的压缩，然后在上传上去

在移动端使用VantUI上传图片的示例
common.js

//压缩图片
function photoCompress(file, w, objDiv) {
    var ready = new FileReader();
    ready.readAsDataURL(file);
    ready.onload = function () {
        var re = this.result;
        canvasDataURL(re, w, objDiv)
    }
}
function canvasDataURL(path, obj, callback) {
    var img = new Image();
    img.src = path;
    img.onload = function () {
        var that = this;
        // 默认按比例压缩
        var w = that.width,
            h = that.height,
            scale = w / h;
        w = obj.width || w;
        h = obj.height || (w / scale);
        var quality = 0.7;  // 默认图片质量为0.7
        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 创建属性节点
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        // 图像质量
        if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
            quality = obj.quality;
        }
        // quality值越小，所绘制出的图像越模糊
        var base64 = canvas.toDataURL('image/jpeg', quality);
        // 回调函数返回base64的值
        callback(base64);
    }
}
/**
 * 将以base64的图片url数据转换为Blob
 * @param urlData
 * 用url方式表示的base64图片数据
 */
function convertBase64UrlToBlob(urlData) {
    var arr = urlData.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 });
}

export {photoCompress, convertBase64UrlToBlob}

vue代码

<van-uploader :after-read="afterRead" :upload-text="'上传图片'" :before-read="beforeRead" />

//引入
import {photoCompress, convertBase64UrlToBlob} from './common/compress'
//在上面的afterRead 函数中
afterRead (file) { //file文件
	//压缩图片
    photoCompress(file.file, {quality: 0.2}, (e) => {
        const comFlie = convertBase64UrlToBlob(e)
        //判断压缩图片大小
        let isLt10M = comFlie.size / 1024 / 1024 <= 10
        if (!isLt10M) {
            Toast('图片大小10M以内');
            return false
         }
         this.uploadImg(comFlie)
    })
},
uploadImg (file) {
    let formdata1 = new FormData();// 创建form对象
    formdata1.append('imgFile', file, file.name);// 通过append向form对象添加数据,可以通过append继续添加数据
            //或formdata1.append('img',file);
    let config = {
         headers:{
             'Content-Type':'multipart/form-data'
         }
    };  //添加请求头
    const axiosAjax = this.axios.create({
         timeout: 1000 * 60,
         withCredentials: true
    });
    axiosAjax.post('url',formdata1,config).then((res)=>{  //这里的url为接口
        this.loadingImg = false
        const data = res.data
        if (data.result == 100) {
            this.feedImg.push(data.data || '')
        } else {
            Toast.fail(data.message)
        }
	}).catch(() => {
         this.loadingImg = false
    })
}