Javascript 未能执行';drawImage';在';画布渲染上下文2D
未捕获的TypeError:未能在“CanvasRenderingContext2D”上执行“drawImage”:提供的值不是类型“(CSSImageValue或HTMLImageElement或SVGImageElement或HTMLVideoElement或HtmlCanvaSeElement或ImageBitmap或OffCreencAnvas)” 在drawCanvas(userscript.html?id=0e769594-f15d-490f-a75c-bac819525aab:56) 在设置超时时(userscript.html?id=0e769594-f15d-490f-a75c-bac819525aab:59) 我尝试根据url输入将图像加载到画布,我尝试添加事件侦听器和记录器,但似乎都不起作用Javascript 未能执行';drawImage';在';画布渲染上下文2D,javascript,canvas,Javascript,Canvas,未捕获的TypeError:未能在“CanvasRenderingContext2D”上执行“drawImage”:提供的值不是类型“(CSSImageValue或HTMLImageElement或SVGImageElement或HTMLVideoElement或HtmlCanvaSeElement或ImageBitmap或OffCreencAnvas)” 在drawCanvas(userscript.html?id=0e769594-f15d-490f-a75c-bac819525aab:56
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);
我认为抛出此错误是因为您在定义自己的函数后调用了自己的函数“drawCanvas(newImage)”,但没有参数:“drawCanvas()” 因此,您的函数调用上下文函数drawImage,第一个参数为空:“ctx.drawImage(newImage,10,10)”
如果删除行“drawCanvas()”,则不会引发错误。请确保传递给drawImage()方法的图像片段没有中断。如果指向有效的图像源,请检查其src。您正在尝试在加载图像之前绘制图像。设置
.src
开始异步加载图像;如果要绘制它,需要将.onload
设置为这样做的函数。所以有多个搜索结果的错误btw。