Question

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

2020-06-19

433

javascript html reactjs canvas html5-canvas

对此真的很困惑...我的代码在桌面上运行良好，但出于某种原因，它无法在移动浏览器上正确运行。我认为这可能是因为画布在移动设备上的创建速度不够快（至少错误对我来说是这样的）。我有什么方法可以异步执行 .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:8158/“filename”URL ），还允许链接的 JS 和 CSS 脚本，这些脚本也未被读取。要查看您的页面是否正常工作，只需复制 Acode 生成的 URL 以执行该文件，并将此 URL 粘贴到您首选的浏览器中，同时保持 Acode 处于打开状态。那里一切都很好。

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

Answer 2

   img.onload = function () {
                const aspectRatio = img.width / img.height;
                const canvasAspectRatio = canvas.width / canvas.height;
                if (`enter code here`aspectRatio > canvasAspectRatio) {
                    scaleFactor = canvas.width / img.width;
                } else {
                    scaleFactor = canvas.height / img.height;
                }
                const scaledWidth = img.width * scaleFactor;
                const scaledHeight = img.height * scaleFactor;
                canvas.width = scaledWidth;
                canva`enter code here`s.height = scaledHeight;
                ctx.drawImage(img, 0, 0, scaledWidth, scaledHeight);


         
            };