用canvas怎么压缩图片？-js教程-PHP中文网

用canvas怎么压缩图片？

零下一度

发布： 2017-06-24 14:31:59

原创

1762人浏览过

现在手机拍的照片动不动就是几m，当用户上传手机里的照片时一个消耗流量大，一个上传时间长，为了解决这个问题，就需要压缩图片：

想法：利用canvas重绘图片，保持宽高比不变，具体宽高根本具体情况而定。

代码 :

　　html:

<input type="file" id="upload" /><p>压缩前：</p><img id="oldImg" src=""/><p>压缩后：</p><img id="newImg" src=""/>

登录后复制

　　js:

var oldImg = document.getElementById("oldImg");var newImg = document.getElementById("newImg");//创建一个隐藏的canvasvar canvas = document.createElement("canvas");
canvas.id = "myCanvas";
canvas.style.display = "none";
document.body.appendChild(canvas);            
var cxt = canvas.getContext('2d');var upload = document.getElementById("upload");
upload.onchange = function(){//获取input file里面的图片路径，该路径为blob格式var url = getObjectURL(this.files[0]);
    oldImg.src = url;
    canvasImg.src = oldImg.src;
    canvasImg.onload = function(){//这是一个过渡的img,当这个img加载完成时绘制到canvas上面var m = oldImg.height/oldImg.width;
        canvas.width = 375;
        canvas.height = canvas.width*m;
        cxt.drawImage(canvasImg,0,0,canvas.width,canvas.height);//canvas绘制完成则转换为base64并传到新的图片上，再删除canvasvar Pic = document.getElementById("myCanvas").toDataURL("image/png");
        newImg.src = Pic;
        document.body.removeChild(canvas);}
}//建立一個可存取到該file的urlfunction getObjectURL(file) {var url = null;if(window.createObjectURL != undefined) { // basicurl = window.createObjectURL(file);
    } else if(window.URL != undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);
    } else if(window.webkitURL != undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file);
    }return url;
}

登录后复制

效果图 :

该效果图是在电脑端测试的，手机端类似：

多个微信小程序源码合集

微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的用户体验，无需下载安装即可在微信内使用。本压缩包包含了丰富的源码资源，涵盖了多个领域的应用场景，下面将逐一介绍其中涉及的知识点。1. 图片展示：这部分源码可能涉及了微信小程序中的``组件的使用，用于显示图片，以及`wx.getSystemInfo`接口获取屏幕尺寸，实现图片的适配和响应式布局。可能还包括了图片懒加