Canvas实现 图片裁剪、移动、放大缩小以及图片的合成

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