16.JS | canvas 绘制多图

“处理图片是我们普通市民的责任，积累跬步是我本身的兴趣，所以加载图片我每次都跑一次，如果遇到多张图片的话我还会多跑几次。”
——题记，改自《破坏之王》

正文

canvas一箩筐问题， 之前一文 JS | canvas 图片模糊 讲了合成图的模糊，本文讲讲另一个，canvas绘制多图，这也是在做H5的过程中遇到的一个坎，比如说合成图少元素，比如说跨域等。

原始做法：
前提多张图片，本地开发的时候，通过改变HTML img元素的路径src（多个img元素在H5已有），进行绘制drawImage，比如说drawImage(document.getElementById('img1'), 0, 0)，没问题，多图合成图片效果正常；到了线上，报出一长串红文，不好意思，您的图片没有权限，绘制失败。ok，跨域么，翻资料，加个crossOrigin，允许跨域请求资源。这个可以一试。

使用其它域名下的图片
在HTMLImageElement上使用crossOrigin属性，你可以请求加载其它域名上的图片。如果图片的服务器允许跨域访问这个图片，那么你可以使用这个图片而不污染canvas，否则，使用这个图片将会污染canvas。

什么是“被污染”的 canvas?
尽管不通过 CORS 就可以在画布中使用图片，但是这会污染画布。一旦画布被污染，你就无法读取其数据。例如，你不能再使用画布的 toBlob(), toDataURL() 或 getImageData()方法，调用它们会抛出安全错误。
这种机制可以避免未经许可拉取远程网站信息而导致的用户隐私泄露。
[引自MDN]

最后方案（不在H5显示img元素，从零创建）：
通过js创建image对象，对于多张图片，建立数组，加载完成多张图片后，进行canvas绘制，后再进行合成图片。这里有个强调，必须要在加载完成后，方可绘制，也就是说有先后顺序，顺序没处理好，可能导致合成的图片缺头少尾，甚至空白。这里利用jquery的deffered来处理先后顺序问题。

若调用 drawImage时，图片没加载完，那什么都不会发生（在一些旧的浏览器中可能会抛出异常）。

代码如下：

//预加载
function preloadImg(list, imgs) {
  var def = $.Deferred(),
      len = list.length;
  $(list).each(function(i,e) {    
    var img = new Image(); 
    img.crossOrigin = ""; //跨域请求资源
    img.onload = (function(j) {
      return function() {
        imgs[j] = img
        len--;
        if(len == 0) {  def.resolve();  }
      };
    })(i);
    img.onerror = function() {
      len--;
      alert('fail to load image');
    };
    img.src = e; // 确保缓存的图片也触发 load 事件
  });
  console.log(def.promise())
  return def.promise();
}
$.when(preloadImg(list, imgs)).done(
  function() {
    draw事件
})

参考文章
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images

image.png