通过js画图，canvas.DrawImage()绘制网络图片无效

本文介绍了一种有效解决网络图片加载不完全导致无法绘制的问题的方法。通过使用Promise和图像加载完成的回调，确保所有指定的网络图片资源加载完成后才进行绘图操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上讲解许多什么图片必须加载到本地才可以绘图，其实不然，其实就是网络图片还没有加载完就开始使用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的并不是一张网络图片，而是多张，所以出个优化版；

方案思路
对网络图片地址的数组进行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(function(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合成业务代码
})