Canvas实现图片裁剪、移动、放大缩小以及图片的合成
前段时间项目上需要做一个合成图片的小活动,参考了很多案例,发现还是用canvas最为简便。
目录
这个活动主要是做一个合影功能,和以前咱们玩的大头贴有点像,哈哈哈。
代码主要是这几部分:
- 确定容器宽高度,给canvas赋值
- 把背景图拽入画布
- 上传图片或拍照,并拽入画布
- 移动图片、或缩小
- 合成图片
图片绘制:ctx.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
接收9个参数,接受值 都是像素,也可缩写成 drawImage(image,dx,dy) 或 drawImage(image, dx,dy,dw,dh)
- image
image object
- sx
原图x坐标(裁剪)
- sy
原图y坐标(裁剪)
- sw
原图宽度(裁剪)
- sh
原图高度(裁剪)
- dx
绘制图片在画布上的x坐标
- dy
绘制图片在画布上的y坐标
- dw
绘制图片的宽度
- dh
绘制图片的高度
每个参数的样例,图示会比较清晰
其实根据这个图片示例,很容易可以看出,
- sx sy sw sh这几个参数决定了图片的裁剪
- 改变 dx dy 可以移动图片
- 改变 dw dh 可以放大或缩小图片(dWidth > sWidth && dHeight > sHeight 绘制的是放大的图片,dWidth < sWidth && dHeight < sHeight 绘制的是缩小的图片)
原理就是这么简单。
值得注意的是,当绘制多张图片时,先绘制的图片在下层,后绘制的图片在上层。
图片合成:canvas.toDataURL(type, encoderOptions)
- type (可选)图片格式,默认为 image/png
- encoderOptions (可选)图片质量。
在指定图片格式为 image/jpeg 或 image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量。
如果超出取值范围,将会使用默认值 0.92。其他参数会被忽略。
什么是 “被污染的(tainted)” canvas?
尽管没有CORS授权也可以在 canvas 中使用图像, 但这样做就会污染(taints)画布。
只要 canvas 被污染, 就不能再从画布中提取数据, 也就是说不能再调用 toBlob(), toDataURL() 和 getImageData() 等方法, 否则会抛出安全错误(security error).
这实际上是为了保护用户的个人信息,避免未经许可就从远程web站点加载用户的图像信息,造成隐私泄漏。
在图片合成的过程中,我们经常会遇到这样的情况。
如果需要使用跨域图片:
1)图片服务器必须设置相应的 Access-Control-Allow-Origin 响应头。
2)添加 img 元素的 crossOrigin 属性来请求头。img.crossOrigin = “Anonymous”;
代码块
代码块语法遵循标准markdown代码,例如:
var iUrl = location.origin+"/";
var w = $(".inbox").width(),h = $(".inbox").height();//画布外容器的宽高
var canvas = document.getElementById('canvas'),
cxt = canvas.getContext('2d');
canvas.width = w,
canvas.height = h,
canvas.style.width = w,
canvas.style.height = h ; //给画布设置宽高
canvas.style.background = '#fff'; //设置画布背景色
var enlargePointOrigin = {x:0,y:0}; //图片移动、缩放前的初始参数--(右上角坐标)
var enlargePoint = {x:0,y:0