关于canvas切图的小心得

蕾姆镇楼-头像剪切

头像剪切功能,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的定位。

所以当遇到不同尺寸的图用作头像时,记得巧妙的运用放缩比例(原图大小:页面展示大小)的值哦!

展开阅读全文

没有更多推荐了,返回首页