使用canvas压缩图片的具体步骤-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

使用canvas压缩图片的具体步骤

使用canvas压缩图片的步骤：

（视频教程推荐：html视频教程）

1、拿到图片元素

2、绘制一个空白的canvas

3、将图片绘制在canvas上

4、将canvas转成base64（这里调用的方法可以实现压缩，base64就可以直接放入src或者传入后端、转成别的格式传输等。）

代码实现：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body> <img src="test.png" style="width: 200px; height: 400px;" id="imgBefore">    <img src="" id="imgafter"> //待会压缩完的图片放入这里。</body></html><script>    var img = document.getElementById('imgBefore') //拿到图片元素    img.setAttribute("crossOrigin",'Anonymous') //这句话并不是必要的，如果你的图片是一个网络链接，    //那么canvas绘制时可能会报错，是因为跨域的安全性问题。报错时加上就对了。    img.onload = ()=>{ //要确保图片已经加载完才进行绘制，不然拿不到图片元素会绘制出全黑的区域，就是失败。        var width = img.width        var height = img.height        var canvas = document.createElement('canvas');        var ctx = canvas.getContext('2d');        canvas.width = width;        canvas.height = height; //以上几步都在绘制一个canvas        ctx.drawImage(img,0,0,width,height);//将图片绘制进去，这里第一个参数可以接受很多格式，        //以元素为例子，详情https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage        var base64 = canvas.toDataURL('image/jpeg',0.2); //第二个参数为压缩的比例，越小越模糊。0-1        document.getElementById('imgafter').src = base64    }        </script>

登录后复制

效果对比：

压缩前

压缩后：

相关推荐