context.drawImage() 即使在 .onLoad 之后也无法在移动设备上工作（TypeError：null 不是对象）

Question

对此感到非常困惑...我的代码在桌面上运行良好，但由于某种原因它无法在移动浏览器上正确运行。我认为这可能是因为画布在移动设备上创建得不够快（至少这是错误向我暗示的）。有什么方法可以异步执行 .drawImage 吗？也许类似于 .onload 但对于画布本身？

“TypeError：null 不是对象（评估 'ctxtemp.drawImage'）”

...
const tempCanvas = document.createElement('canvas');
const ctxtemp = tempCanvas.getContext('2d');
tempCanvas.id = 'temp-canvas';
tempCanvas.width = 4096;
tempCanvas.height = 4096;
const mask = new Image();
mask.src = part.mask;
mask.onload = () => {
      ctxtemp.drawImage(mask, 0, 0, tempCanvas.width, tempCanvas.height);
...

Answer 1

这是我的第一篇文章，我希望它对研究这个问题的其他人非常有用。

回答这个问题似乎有点晚了，但我正在经历这个问题，昨天我不小心解决了这个问题。 DrawImage() 和其他利用外部文件进行正确操作的函数的问题似乎遇到了 Android 系统中的安全问题，但我在 Acode 应用程序的帮助下能够理解这一点。通过在应用程序中编辑我的页面并运行该文件，它会打开一个“迷你 HTML 服务器”（localhost：地址），还允许链接的 JS 和 CSS 脚本也未被读取。要查看页面正常工作，只需复制 Acode 生成的 URL 来执行该文件，并将该 URL 粘贴到您的首选浏览器中，保持 Acode 打开。那里一切正常。