压缩图片 将上传的file转换为base64数据,采用canvas压缩图片，重新返回压缩后的base64

// 压缩图片  quality 0-1 如0.3
compress: function(img, quality = 0.1) {
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    let initSize = img.src.length;
    let width = img.width;
    let height = img.height;
    canvas.width = width;
    canvas.height = height;
    // 铺底色 
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, width, height);
    //进行最小压缩 
    let ndata = canvas.toDataURL("image/jpeg", quality);
    console.log("压缩后的图片大小：" + ndata.length);
    console.log("压缩后的图片内容：" + ndata)
    return ndata;
}

演示代码

var reader = new FileReader();
// 读取指定文件中的内容，作为"数据URL"
reader.readAsDataURL(f0);
reader.onload = function() {
    console.log("客户端数据读取完成");
    // 读取的结果(格式为数据编码)
    // console.log(reader.result)
    console.log("未压缩前的图片大小：" + reader.result.length);
    let img = new Image();
    img.src = reader.result;
    //新的压缩图片
    var new_result = that.compress(img, 0.4);
}

获取上传文件file的base64数据

/**
 * 获取指定文件的base64编码
 * @param  object   File       Blob 或 File 对象       这里是file对象
 * @param  Function callback   返回数据的回调函数
 * @return string              返回base64编码
 */
function getBase64(File, callback) {
    var reader = new FileReader(); //IE10+
    var File = File || $("#file").get(0).files[0]; //获取上传的文件对象
    if (File) {
        reader.readAsDataURL(File);
        reader.onload = function(e) {
            var base64Data = reader.result;
            //返回base64编码
            if (callback == undefined) {
                return base64Data;
            } else {
                callback(base64Data);
            }
        }
    }
}

将base64的数据转换为file

/*
 * 将base64转换为文件
 * params dataurl base64数据
 * filename 文件名称
 */
function Base64toFile(dataurl, filename) {
    var 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
    });
}

将base64转换为blob

/**
 * 将以base64的图片url数据转换为Blob
 * @param base64    用url方式表示的base64图片数据
 * @return blob     返回blob对象
 */
function convertBase64UrlToBlob(base64) {
    //提取base64头的type如 'image/png' 
    var type = base64.split(",")[0].match(/:(.*?);/)[1];
    //去掉url的头，并转换为byte (atob:编码 btoa:解码)
    var bytes = window.atob(base64.split(',')[1]);
    //处理异常,将ascii码小于0的转换为大于0 
    //通用的、固定长度(bytes.length)的原始二进制数据缓冲区对象
    var ab = new ArrayBuffer(bytes.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }
    return new Blob([ab], {
        type: type
    });
}

将blob转换为base64

function blobToBase64(blob, callback) {
    let a = new FileReader();
    //读取数据成功回调处理
    a.onload = function(e) {
        callback(e.target.result);
    }
    //开始读取数据
    a.readAsDataURL(blob);
}

至此,多种格式的数据可以想换转换并实现压缩上传