压缩图片base64格式

html代码

<div id="preview">
            <input type="file"  id="file" value="" onchange="imgsrc(event)" />
            <img id="imgs" />
</div>

js代码

//第一个参数就是原来的字符串,第二个是宽度,第三个就是回调方法
function cutImageBase64(base64, w, callback) {
            var newImage = new Image();
            var quality = 0.6;    //压缩系数0-1之间
            newImage.src = base64;
            newImage.setAttribute("crossOrigin", 'Anonymous');  //url为外域时需要
            var imgWidth, imgHeight;
            newImage.onload = function () {
                imgWidth = this.width;
                imgHeight = this.height;
                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                if (Math.max(imgWidth, imgHeight) > w) {
                    if (imgWidth > imgHeight) {
                        canvas.width = w;
                        canvas.height = w * imgHeight / imgWidth;
                    } else {
                        canvas.height = w;
                        canvas.width = w * imgWidth / imgHeight;
                    }
                } else {
                    canvas.width = imgWidth;
                    canvas.height = imgHeight;
                    quality = 0.6;
                }
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
                var base64 = canvas.toDataURL("image/jpeg", quality); //压缩语句
                // 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间,请加以下语句,quality初始值根据情况自定
                while (base64.length / 1024 > 150) {
                    quality -= 0.01;
                    base64 = canvas.toDataURL("image/jpeg", quality);
                }
                // 防止最后一次压缩低于最低尺寸,只要quality递减合理,无需考虑
                while (base64.length / 1024 < 50) {
                    quality += 0.001;
                    base64 = canvas.toDataURL("image/jpeg", quality);
                }
                callback(base64);//必须通过回调函数返回,否则无法及时拿到该值
            }
        }
function imgsrc(e){
            var imgs=document.getElementById("imgs");
            var file = e.target.files[0];                
                // 确认选择的文件是图片                
                if(file.type.indexOf("image") == 0) {
                    var reader = new FileReader();
                    reader.readAsDataURL(file);                    
                    reader.onload = function(e) {
                        // 图片base64化
                  var newUrl = this.result;
                        
                        //这是原来的base64格式字符串
            var base64= newUrl;
            console.log("压缩前"+ base64);           
            //调用方法
            cutImageBase64(base64, 500, Imgbas);
                         
            //在这里根据回调回来的数据打印
            function Imgbas(base64) {
                console.log("压缩后"+base64);
            }

         };
      }
 }

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值