canvas.DrawImage()绘制网络图片无效 解决办法

问题定位

原代码：

var work = document.getElementById('demoId');
var ctx = work.getContext('2d');
ctx.drawImage('https://xxxxxxx.com/demo.jpg', 0, 0,750,1334);

问题是出在drawImage所需的图片文件还没有加载完，就已经执行了drawImage；

解决方案

网上有好多是利用image的onload解决的，这个方法是没有问题的，但好多时候，要drawImage的并不是一张网络图片，而是多张，所以出个优化版；
只有单张网络图片需求比较紧急的话可以前往度娘https://www.baidu.com/s?ie=utf-8&f=8...

方案思路

对网络图片地址的数组进行new Image循环，然后利用promise.all方法进行成功回调；

代码：

function loadAllImages(imgUrls) {
            var _load = function (imgUrl) {
                //创建img标签
                var img = new Image();
                img.src = imgUrl;
                //跨域选项
                img.setAttribute("crossOrigin", 'Anonymous');
                return new Promise((resolve, reject) => {
                    //文件加载完毕
                    img.onload = function () {
                            resolve(img);
                    };
                });

            }
            var _loadAll = function (imgUrls) {
                var loadedImageUrls=[];
                for(var i=0,len=imgUrls.length;i<len;i++){
                    loadedImageUrls.push(_load(imgUrls[i]));
                }
                return loadedImageUrls;
            }
            return Promise.all(_loadAll(imgUrls))

        }

使用方法：

var canvasImageArr=[
'https://xxxxxx.com/1.jpg',
'https://xxxxxx.com/2.jpg',
'https://xxxxxx.com/3.jpg'
];
loadAllImages(canvasImageArr).then(res){
  console.log(res[0]);
  // https://xxxxxx.com/1.jpg
  console.log(res[1]);
  // https://xxxxxx.com/2.jpg
  console.log(res[2]);
  // https://xxxxxx.com/3.jpg

  // MORE 。。。canvas合成业务代码
}

涉及知识

Promise
img标签onload