如何使用 Ionic 3 在 Android 上为 Image() 触发 onload 事件答案

【问题标题】：How to fire onload event for Image() on Android with Ionic 3如何使用 Ionic 3 在 Android 上为 Image() 触发 onload 事件
【发布时间】：2019-11-11 06:09:44
【问题描述】：

我正在尝试使用 Ionic 3 在 Android 上触发 Image() (HTMLImageElement) 的“onload”事件函数。它适用于 iOS，但不幸的是不适用于 Android。

如何在 Android 上触发 onload 功能？我不使用<img> 或其他标签，所以我不能用<img (load)="functionHere()"> 触发它。

（我在 Stack Overflow 上看到了其他一些“onload”问题，这是关于 Android/Ionic 3 的特定情况）。

这是我的示例代码：

this.backgroundImageSource = new Image();
this.backgroundImageSource.src = this.image;


this.backgroundImageSource.onload = function() {
    // THIS PART DOESNT FIRE ON ANDROID
    console.log("ONLOAD TRIGGERED");
}

【问题讨论】：

我想知道如果您正在构建 Ionic 应用程序，为什么需要使用 HTMLImageElement 而不是甚至？
@SebinBenjamin 我用它和 KonvaJs 进行图像处理

标签： javascript android angular ionic-framework ionic3

【解决方案1】：

如果示例代码完全按照所示使用，则问题可能是在事件发生后定义了 onload 事件处理程序。您应该在事件发生之前定义事件处理函数。

所以必须在设置src 属性之前处理onload。虽然，我不确定 JS 引擎是否在其任何优化步骤中解决了这个问题。

this.backgroundImageSource = new Image();

//This has to be done before setting src
this.backgroundImageSource.onload = function() {
    console.log("ONLOAD TRIGGERED");
}

this.backgroundImageSource.src = this.image;

【讨论】：

事实上 .onerror 被触发，我意识到 Ionic 无法从 Android 模拟器/设备读取文件。现在正在努力寻找原因。

【解决方案2】：

我遇到了同样的问题。

我发现 base64 不包含标头/描述符，因此它没有触发。

我通过在不存在标题的情况下附加标题来解决此问题：

if (!base64Data.includes(',')) {
  // Detect if base64 image is missing header/descriptor
  console.log("Prepending descriptor to Base64 image string")
  base64Data = `data:image/jpeg;base64,${base64Data}`;
}

（逗号用于分隔标题和正文）。

【讨论】：