二 HTML5 Canvas 实现图片压缩和裁切
上篇讲到drawImage 这个API,这篇详细说介绍
尽管有各种裁剪的插件,但是在手机端 ,我不喜欢 。我喜欢友好操作的方式。所以详细介绍!!!
CanvasRenderingContext2D.drawImage()
drawImage 有 3 种调用方式:
ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
- image 图片元素,除了图片,还支持其他 3 种格式,分别是
HTMLVideoElement
HTMLCanvasElement
ImageBitmap
,本文只涉及图片,如果想了解其余格式可以参考https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage - sx 要绘制到 canvas 画布的源图片区域(矩形)在 X 轴上的偏移量(相对源图片左上角)
- sy 与 sx 同理,只是换成 Y 轴
- sWidth 要绘制到 canvas 画布中的源图片区域的宽度,如果没有指定这个值,宽度则是 sx 到图片最右边的距离
- sHeight 要绘制到画布中的源图片区域的高度,如果没有指定这个值,高度则是 sy 到图片最下边的距离
- dx 源图片左上角在 canvas 画布 X 轴上的偏移量
- dy 源图片左上角在画布 Y 轴上的偏移量
- dWidth 绘制图片的 canvas 画布宽度
- dHeight 绘制图片的画布高度
- 图例
HTMLCanvasElement.toDataURL()
toDataURL 是 canvas 画布元素的方法,返回指定图片格式的 data URI,也就是 base64 编码串。
toDataURL 方法最多接受两个参数,并且这两个参数都是可选的:
- type 图片格式。支持 3 种格式,分别是
image/jpeg
image/png
image/webp
,默认是image/png
。其中image/webp
只有 chrome 才支持。 - quality 图片质量。0 到 1 之间的数字,并且只在格式为
image/jpeg
或image/webp
时才有效,如果参数值格式不合法,将会被忽略并使用默认值。
另外,如果对应的 canvas 画布宽度或高度为 0,将会得到字符串
data:,
,若图片格式不是 image/png,却得到一个以data:image/png
开头的值,则说明不支持此图片格式。图片质量
- type 图片格式。支持 3 种格式,分别是
- 对于图片质量参数的默认值,官方文档并没有说明
代码事例
HTML: <canvas id="canvas"></canvas> <img id="preview" src=""> <img id="source" src="" style="display: none;"> JS: var canvas = document.getElementById('canvas'); var source = document.getElementById('source'); var preview = document.getElementById('preview'); source.onload = function() { var width = source.width; var height = source.height; var context = canvas.getContext('2d'); // draw image params var sx = 0; var sy = 0; var sWidth = width; var sHeight = height; var dx = 0; var dy = 0; var dWidth = width; var dHeight = height; var quality = 0.92; canvas.width = width; canvas.height = height; context.drawImage(source, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); var dataUrl = canvas.toDataURL('image/jpeg', quality); preview.src = dataUrl; };
注:实践发现经过canvas处理过的图片,下载下来查看属性,果然比之前小了~~哈哈。这才是正点!