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

【问题标题】：Failed to execute 'drawImage' on 'CanvasRenderingContext2D无法在“CanvasRenderingContext2D”上执行“drawImage”
【发布时间】：2019-05-27 20:55:19
【问题描述】：

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

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

setTimeout(() => {

    let startpanel = document.getElementById('startpanel')

    // image for skin
    var img = document.createElement("img");
    img.style.width = "220px";
    img.style.height = "177px";

    // input custom skin
    var skinInput = document.createElement("input");
    skinInput.placeholder = "skin url";
    skinInput.style.width = "150px";
    skinInput.style.height = "35px";

    skinInput.onblur = function() {
        const newImage = new Image();
        newImage.src = skinInput.value;
        img.src = skinInput.value;
        drawCanvas(newImage);
      };

    startpanel.appendChild(skinInput)

    // draw skin
    var appearance = document.createElement("canvas");
    appearance.id = "appearance";
    // appearance.style.position = "absolute";
    appearance.style.top = "100px";
    appearance.style.width = "200px";
    appearance.style.height = "177px";
    appearance.style.border = "1px solid #d3d3d3";
    startpanel.appendChild(appearance)

    const drawCanvas = (newImage) => {
        var ctx = appearance.getContext("2d");
        ctx.drawImage(newImage, 10, 10);
      }

      drawCanvas();

}, 3000);

【问题讨论】：

您正试图在加载之前绘制图像。设置.src开始异步加载图片；如果要绘制它，则需要将 .onload 设置为执行此操作的函数。 SO 有多个错误的搜索结果。

标签： javascript canvas

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

确保传递给 drawImage() 方法的图像参数没有损坏。如果指向有效的图像源，请检查其 src。

【讨论】：