Javascript 合并图像函数在iOS上的混合应用程序中导致不正确的结果-适用于Safari

我有这个功能：

   //Merge images
   mergeImages(sig, bg, outputFormat)
   {

   return new Promise((resolve, reject) => {
     var canvas = <HTMLCanvasElement> document.createElement("canvas");

     var img1 = new Image();
     var img2 = new Image();

     var finalURL = '';

     var canvas = <HTMLCanvasElement> document.createElement('canvas');

     document.getElementById("canvasContainer").appendChild(canvas);

     var context = canvas.getContext('2d');

     img1.src = '';
     img2.src = '';

     img1.addEventListener('load',function() {
          console.log("loaded img1");

          canvas.width = 100;
          canvas.height = 100;
      });

      img2.addEventListener('load',function() {
           console.log("loaded img2");

          context.drawImage(img1, 0, 0, 100, 100);
          context.drawImage(img2, 0, 0, 100, 100);

          finalURL = canvas.toDataURL(outputFormat);

          resolve (finalURL);

          console.log("\n finalURL" + finalURL +"\n");
       });


     setTimeout(function() {
        console.log(img1.complete);
      }, 1000);

      setTimeout(function() {
         console.log(img2.complete);
       }, 1000);

     img1.src = bg;

     img2.src = sig;

  });

//合并图像
合并图像（sig、bg、outputFormat）
{
返回新承诺（（解决、拒绝）=>{
var canvas=document.createElement（“canvas”）；
var img1=新图像（）；
var img2=新图像（）；
var finalURL=“”；
var canvas=document.createElement（'canvas'）；
document.getElementById（“canvasContainer”）.appendChild（canvas）；
var context=canvas.getContext（'2d'）；
img1.src=''；
img2.src=''；
img1.addEventListener（'load'，function（））{
日志（“加载的img1”）；
画布宽度=100；
画布高度=100；
});
img2.addEventListener（'load'，function（））{
console.log（“加载的img2”）；
drawImage（img1，0，0，100，100）；
drawImage（img2，0，0，100，100）；
finalURL=canvas.toDataURL（outputFormat）；
解决（最终）；
console.log（“\n finalURL”+finalURL+”\n”）；
});
setTimeout（函数（）{
console.log（img1.complete）；
}, 1000);
setTimeout（函数（）{
console.log（img2.complete）；
}, 1000);
img1.src=bg；
img2.src=sig；
});

}

此函数通过组合“img1”和“img2”返回结果图像的base64 dataURL。该应用程序是使用Ionic（HTML/Typescript）构建的

在Safari浏览器中，在触发此功能（通过DOM按钮调用）后，我始终可以看到正确的组合图像

然而，当我为iOS（iPad）构建这个应用程序时，结果是不正确的，我不知道为什么。也就是说，只有img2渲染最终图像

没有显式抛出错误

任何帮助都将不胜感激

编辑（添加的图像）： 在桌面浏览器中正确输出：

iOS上的图像不正确：

---

这里的问题是两个图像的加载都没有正确处理。
两者都将异步加载，当您的代码等待每个

load

事件时，您的代码假定第一个映像将始终首先加载。
但是考虑到这些图像的性质，第二个图像（

sig

）似乎会更轻（大多数像素是透明的），因此实际上可能会加载得更快

您可能在浏览器上没有遇到此问题，因为浏览器缓存中已经有这些图像，因此加载这两个图像所需的时间相同

在era pre Promises中，一种常见的处理方法是使用计数器，该计数器将在每个图像的加载时递增，并将触发一个oncomplete回调：

function loadImages(urls, onsuccess, onerror) {
  var counter = 0;
  var imgs = urls.map(function load(url) {
    var img = new Image();
    img.onload = incrementCounter;
    img.src = url;
    img.onerror = onerror;
    return img;
  });
  function incrementCounter(evt) {
    if(++counter === urls.length) {
      onsuccess(imgs);
    }
  }
}

var canvas=document.body.appendChild（document.createElement（'canvas'）；
var ctx=canvas.getContext（'2d'）；
加载图像([
//阿图罗·曼拍摄的一幅相当大的3000 x 2000照片
'https://upload.wikimedia.org/wikipedia/commons/6/65/Sunset_over_The_Pacific_Ocean_at_Acapulco_1.jpg',
//32x32的小图像
'https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png'
]，未完成，或错误）；
函数loadImages（URL、onsuccess、onerror）{
var计数器=0；
var imgs=url.map（函数加载（url）{
var img=新图像（）；
img.onload=递增计数器；
img.src=url；
img.onerror=onerror；
返回img；
});
函数递增计数器（evt）{
if（++计数器===url.length）{
成功（imgs）；
}
//仅用于演示
log（'successfully loaded'，evt.target.src）；
}
}
//我们的回电
//在这里，我们接收img元素，
//按照我们设置URL的顺序
//第一个加载的是什么
功能完成（imgs）{
canvas.width=imgs[0].width/8；
canvas.height=imgs[0].height/8；
比例尺（0.125,0.125）；
ctx.drawImage（imgs[0]，0,0）；
ctx.imageSmoothingEnabled=假；
ctx.刻度（8,8）；
ctx.drawImage（imgs[1]，176100）；
}
函数ONERR（错误）{
console.error（'加载资源失败'）；
}

“结果不正确”确实需要进一步解释。根据您的描述，我不太确定您所说的“组合”两个图像是什么意思？您等待加载事件的方式是错误的。如果img2加载速度更快怎么办？您需要增加一个计数器，并且仅在图形达到图像数时触发图形。或者，由于您似乎处于支持承诺的环境中，请承诺加载事件，然后等待承诺。好的。@DanielBeck噢，很抱歉，我添加了一些图片来澄清正确和错误results@Kaiido嗯，好的。我将试一试——我对web开发/混合应用程序还比较陌生，任何伪代码都会非常有用。但是谢谢你的提示！