- 首页 > 睿知 > it技术 > >
- 要用canvas实现前端的图片压缩，有几个步骤。
1.拿到图片元素。
2.绘制一个空白的canvas。
3.将图片绘制在canvas上。
4.将canvas转成base64。（这里调用的方法可以实现压缩，base64就可以直接放入src或者传入后端、转成别的格式传输等。）
上代码
Document - 锐客网
文章图片
![前端|使用canvas压缩图片]()
文章图片
//待会压缩完的图片放入这里。
>
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 = https://www.it610.com/article/base64
}
- 效果
文章图片
【前端|使用canvas压缩图片】明显模糊了很多，如果业务需求要用到，其实用工具更加方便。
推荐阅读
