web前端剪裁压缩图片

        最近遇到一个bug,在钉钉里面用户打开一个表单上传图片的时候某些老机型的安卓机上传个2-3张之后页面就崩溃了,用原生的浏览器打开则无此问题,因为这个页面表单有5-6张照片需要用户上传,所以解决此类bug迫在眉睫。

        咨询安卓的同事之后得到反馈如下:

某些安卓旧机器(渣配置)或者某些蛋疼的应用汇限制webview的内存大小,当页面图片过大的时候就会撑爆内存大小。。应用就会关掉这个webview。解决的办法很简单:降低图片大小。


        因为这些图片是用户现场拍照之后直接上传到服务端的,然后服务端直接扔到OSS云存储里,临时让服务端写个转图片大小的服务也不太现实而且这个图片用户也会打开预览。所以我初步决定直接前端拿到原图裁剪解析。demo地址点击这里

使用到的canvasAPI如下:

canvas.toDataURL();把图片base64;

drawImage(image, x, y, width, height)width 和 height,这两个参数用来控制 当像canvas画入时应该缩放的大小

具体的代码实现如下:

//param =>{url,base64,width,img}
function scaleImgByWidth(param,callback){
      var canvas = document.createElement("canvas");
    canvas.setAttribute("width",param.width+"px");
    if(param.url||param.base64){
        var img = new Image();
        img.onload=function(){
            setCanvasSizeByImage(canvas,img,param.width);
            if(callback &&typeof callback==="function"){
                var data = canvas.toDataURL("image/jpeg");
                callback(data);
            }
        };
        img.crossOrigin = "Anonymous";//设置跨域引用
        img.src = param.url||param.base64;
    }else if(param.img){
        setCanvasSizeByImage(canvas,param.img,param.width);
        if(callback &&typeof callback==="function"){
            var data = canvas.toDataURL("image/jpeg");
            callback(data);
        }
    }
}
function setCanvasSizeByImage(canvas,img,needWidth){
    var height = img.naturalHeight;
    var width = img.naturalWidth;
    var needHeight = needWidth/width*height;
    canvas.setAttribute("height",needHeight+"px");
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img,0,0,needWidth,needHeight);
}
//使用方法
var img = new Image();
img.onload=function(){

   // ctx.scale(0.055,0.055);
    scaleImgByWidth({img:img,width:100});
};
img.src="https://img.alicdn.com/tps/TB1n6v_PXXXXXbIXFXXXXXXXXXX-520-280.jpg_.webp";




本文标题:web前端剪裁压缩图片
本文链接:https://56way.com/p/96.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。