javascript base64转file、file压缩图片

/**
 * base64转file
 * @param {string} urlData base64格式图片
 * @returns 
 */

export function base64ConvertFile(urlData) {
    if (typeof urlData != 'string') {
        this.$toast("urlData不是字符串")
        return;
    }
    var arr = urlData.split(',')
    var type = arr[0].match(/:(.*?);/)[1]
    var fileExt = type.split('/')[1]
    var bstr = atob(arr[1])
    var n = bstr.length
    var u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], `${(Math.random() + '').replace('.','')}.` + fileExt, {
        type: type
    });
}

/**
 * 压缩图片
 * @param {file} file file图片流
 * @param {string} minCompress 最小免压体积
 * @param {string} imgCompress 压缩比例
 * @returns 
 */
export function compressImg(file, minCompress, imgCompress) {
	// fileSize minCompress 都是M单位
    var files;
    //转换file流大小为M
    var fileSize = parseFloat(parseInt(file['size']) / 1024 / 1024).toFixed(2);
    var read = new FileReader();
    read.readAsDataURL(file);
    return new Promise(function (resolve) {
        read.onload = function (e) {
            var img = new Image();
            img.src = e.target.result;
            img.onload = function () {
                //默认按比例压缩
                var w = this.width,
                    h = this.height;
                //生成canvas
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                var base64;
                // 创建属性节点
                canvas.setAttribute("width", w);
                canvas.setAttribute("height", h);
                //把画布背景颜色设置成白色,画布背景颜色默认黑色
                ctx.fillStyle = '#fff';
                ctx.fillRect(0, 0, w, h);
                ctx.drawImage(this, 0, 0, w, h);
                //如果图片小于minCompress 那么不执行压缩操作
                if (fileSize < minCompress) {
                    base64 = canvas.toDataURL('image/jpeg', 0.9);
                } else { 
                    base64 = canvas.toDataURL('image/jpeg', imgCompress);
                }
                // 回调函数返回file的值(将base64编码转成file)
                files = base64ConvertFile(base64); //如果后台接收类型为base64的话这一步可以省略
                resolve({
                    content: base64,
                    file: files
                })
            };
        };
    })
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值