头像剪切功能,canvas区域的图片展示。
我们有如下一个的canvas标签。
<div width="98px" height="98px">
//默认canvas为300*150大小
<canvas id="canvas"></canvas>
</div>
var img = new Image("./xx.png");
var ctx = document.getElementById('canvas').getContext("2d");
ctx.clearRect(0, 0, 98, 98);
ctx.drawImage(img, x, y, dwidth, dheight, 0, 0, 98, 98);
以上代码中,用到了drawImage方法,该方法接收9个参数。
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
第一个参数是一个图像或者另一个 canvas 的引用。其它8个参数最好是参照右边的图解,前4个是定义图像源的切片位置和大小,后4个则是定义切片的目标显示位置和大小。见证下图:
这里注意的一点是:sx, sy, sWidth, sHeight这四个参数是相对于原图的定位,即使图片A(400*400)在页面中仅展示为200*200,但sx, sy, sWidth, sHeight这四个参数依旧是相对于原图400*400的定位。
所以当遇到不同尺寸的图用作头像时,记得巧妙的运用放缩比例(原图大小:页面展示大小)的值哦!