Canvas drawImage() 方法实现图片压缩

最新推荐文章于 2025-05-17 06:18:40 发布

原创

最新推荐文章于 2025-05-17 06:18:40 发布 · 2.6k 阅读

标签

#前端 #javascript #html5

收录于

这篇博客介绍了如何利用HTML5的Canvas API进行图片压缩。通过Canvas的drawImage()方法结合toDataURL()或toBlob()，可以实现图片尺寸限制和质量调整，从而达到压缩效果。文中提供了一个示例，展示了一张83KB的图片被压缩到16KB的过程。

图片压缩原理

1.CanvasRenderingContext2D.drawImage() 方法可以从页面 DOM 元素作为图像源来根据坐标和大小重新绘制该图像。
2.HTMLCanvasElement.toDataURL() 和 HTMLCanvasElement.toBlob() 方法支持导出为 base64 字符串或 Blob 对象。

CanvasRenderingContext2D.drawImage()

drawImage(image, dx, dy)
drawImage(image, dx, dy, dWidth, dHeight)
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

image* 绘制到上下文的元素。允许任何的画布图像源，包括 canvas、img、svg、video 元素和 ImageBitmap 对象等。
dx, dy, dWidth, dHeight* 这几个属性表示在 canvas 画布上指定一片区域用来放置图片，dx、dy 指定图片的左上角在 canvas 上的坐标，dWidth、dHeight 指定图片在 canvas 上绘制的区域宽高。如果没有指定 sx、sy、sWidth、sHeight 这4个参数，则图片会被拉伸或缩放在 canvas 区域内。
sx, sy, swidth, sheight* 这几个属性是针对图片元素的，表示图片在 canvas 画布上显示的大小和位置。sx、sy 表示在图片上作为左上角的坐标，然后往右下角方向 swidth、sheight 尺寸范围作为最终在 canvas 上显示的图片内容。

图片压缩，需要使用的是 CanvasRenderingContext2D.drawImage() 5个参数的语法，即指定图片的左上角在 canvas 上的坐标为 0 0，图片在 canvas 上绘制的区