【创新实训 - 个人报告】09 - WebGL跨域渲染图片

开始之前

在本周进行开发时，我遇到了WebGL不能跨域渲染图片的问题。
图片是以这样的方式获取的：

'http://xxx.xxx.xxxx/get_img?id=1'

如何在不能使用服务器转发的情况下，解决跨域渲染问题呢？

设计思路

最原始的LoadImage：

Graphics.loadImage = function(src){
  return new Promise((resolve) => {
    Graphics._image = new Image();
    Graphics._image.addEventListener('load', resolve);
    Graphics._image.src = src;
  });
};

Canvas的权限没有WebGL那么严格，所以我想到了利用Canvas进行一次中转。
但同时又要保证async正常工作。
另外上面的代码其实还有一个历史遗留问题，就是忘记了removeEventListener，在这里一并解决：

Graphics.loadImage = function(src){
  return new Promise((resolve) => {
    Graphics._image = new Image();
    //允许Canvas跨域渲染
    Graphics._image.setAttribute("crossOrigin",'anonymous')
    let func1 = function(){
      let canvas = document.createElement('canvas');
      let ctx = canvas.getContext('2d');
      canvas.width = Graphics._image.width;
      canvas.height = Graphics._image.height;
      ctx.drawImage(Graphics._image, 0, 0);
      Graphics._image.removeEventListener('load', func1);
      let func2 = function(){
        Graphics._image.removeEventListener('load', func2);
        resolve();
      }
      Graphics._image.addEventListener('load', func2);
      Graphics._image.src = canvas.toDataURL();
    }
    Graphics._image.addEventListener('load', func1);
    Graphics._image.src = src;
  });
};