Canvas drawImage方法实现图片压缩详解

　　目录

　　图片压缩原理

　　CanvasRenderingContext2D.drawImage()

　　drawImage(image, dx, dy)

　　drawImage(image, dx, dy, dWidth, dHeight)

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

　　图片压缩，需要使用的是 CanvasRenderingContext2D.drawImage() 5个参数的语法，即指定图片左上角在 canvas 上的坐标为 0，图片在 canvas 上绘制的区域宽高为 canvas 的宽高即可。例如，图片的原始尺寸是 ，现在要把尺寸限制为 大小。

　　const canvas = document.createElement('canvas');

　　const context = canvas.getContext('2d');

　　canvas.width = 400;

　　canvas.height = 300;

　　context.drawImage(img,0,0,canvas.width,canvas.height);

　　如果需要将转换后的图像渲染到页面 DOM 元素，可以使用 HTMLCanvasElement.toDataURL() 方法来获取转换后的图像 base64 格式信息的字符串传递给 img 元素的 src。或使用 HTMLCanvasElement.toBlob() 方法获取 Blob 格式的对象，然后使用 URL.createObjectURL() 获取对象 URL 传递给 img 元素的 src。也可以将该 base64 字符串或 Blob 对象上传到后端服务器。

　　HTMLCanvasElement.toDataURL()

　　该方法将图片转换成 base64 格式信息的字符串表示法。

　　toDataURL()

　　toDataURL(type)

　　toDataURL(type, encoderOptions)

　　HTMLCanvasElement.toBlob()

　　toBlob(callback)

　　toBlob(callback, type)

　　toBlob(callback, type, quality)

　　示例

　　下面原始图片的大小为 84867 字节（大约 83KB），压缩后大小仅为 16354 字节（约 16KB）。

　　(async function() {

　　const {size, type} = await fetch(img.src).then(res=>res.blob());

　　result.textContent += JSON.stringify({size, type});

　　const canvas = document.createElement('canvas');

　　const context = canvas.getContext('2d');

　　canvas.width = 400;

　　canvas.height = 300;

　　context.drawImage(img,0,0,400,300);

　　img2.src = canvas.toDataURL(type);

　　canvas.toBlob(({size, type}) => result2.textContent += JSON.stringify({size, type}), type);

　　})()

　　以上就是Canvas drawImage方法实现图片压缩详解的详细内容，更多关于Canvas drawImage 压缩图片的资料请关注脚本之家其它相关文章！

　　您可能感兴趣的文章: