无法在“CanvasRenderingContext2D”上执行“drawImage”

Question

\n

未捕获的类型错误：无法在“CanvasRenderingContext2D”上执行“drawImage”：在drawCanvas（用户脚本）处提供的值不是类型“（CSSImageValue或HTMLImageElement或SVGImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap或OffscreenCanvas）” .html?id=0e769594-f15d-490f-a75c-bac819525aab:56)\n 在 setTimeout (userscript.html?id=0e769594-f15d-490f-a75c-bac819525aab:59)

\n

\n\n

我正在尝试根据 url 输入将图像加载到画布，我尝试添加事件侦听器和记录器，但似乎都不起作用。

\n\n

setTimeout(() => {\n\n    let startpanel = document.getElementById(\'startpanel\')\n\n    // image for skin\n    var img = document.createElement("img");\n    img.style.width = "220px";\n    img.style.height = "177px";\n\n    // input custom skin\n    var skinInput = document.createElement("input");\n    skinInput.placeholder = "skin url";\n    skinInput.style.width = "150px";\n    skinInput.style.height = "35px";\n\n    skinInput.onblur = function() {\n        const newImage = new Image();\n        newImage.src = skinInput.value;\n        img.src = skinInput.value;\n        drawCanvas(newImage);\n      };\n\n    startpanel.appendChild(skinInput)\n\n    // draw skin\n    var appearance = document.createElement("canvas");\n    appearance.id = "appearance";\n    // appearance.style.position = "absolute";\n    appearance.style.top = "100px";\n    appearance.style.width = "200px";\n    appearance.style.height = "177px";\n    appearance.style.border = "1px solid #d3d3d3";\n    startpanel.appendChild(appearance)\n\n    const drawCanvas = (newImage) =>\xc2\xa0{\n        var ctx = appearance.getContext("2d");\n        ctx.drawImage(newImage, 10, 10);\n      }\n\n      drawCanvas();\n\n}, 3000);\n

\n

Answer 1

我认为抛出此错误是因为您在定义它之后不带参数调用自己的函数“drawCanvas(newImage)” ： “drawCanvas()”。

因此，您的函数使用空的第一个参数调用上下文函数drawImage ： “ctx.drawImage(newImage, 10, 10)”

如果删除“drawCanvas()”行，则不会引发错误。