Javascript图像上传问题

Question

我在开发一个脚本时遇到了这个问题，该脚本将图像上传到画布上，并使用光标使其像旋转木马一样通过

VM20:158 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
at draw (<anonymous>:158:57)

当我转到指向问题的线路时

if (imgArray.length == sprite.cols * sprite.rows) {
ctx.drawImage(imgArray[ci], 0, 0);
}

但当我第二次重新进行时(这意味着按下F5并再次上传图像(它工作于

第一次跳过的代码是

function showFile() {
var fileInput = document.querySelector('input[type=file]');
for (var i = 0; i < fileInput.files.length; i++) {
var reader = new FileReader();
reader.onload = function (readerEvent) {
var listItem = document.createElement('li');
imagenes.push(readerEvent.target.result);
image_load = 'si';
};
reader.readAsDataURL(fileInput.files[i]);
}
}

问题是：为什么只有当我再次重复这个过程而不是第一次时它才有效？。

来源于谷歌网站

https://sites.google.com/view/pruebamodelado/home

照片在https://sites.google.com/view/pruebamodelado/fotos-test-downlaod?authuser=0

Answer 1

reader.onload = function (e) {
var img = document.createElement("IMG");
img.src = e.target.result;
imagenes.push(img.src);
image_load="si"                       
}

您在这里创建了一个竞赛条件，并将src字符串推送到数组而不是图像。在将图像绘制到画布之前，必须先加载该图像，并且您没有听到加载事件。结果是，有时图像有足够的时间加载，有时没有，从而导致错误。它可以第二次工作，因为您的浏览器可能正在缓存图像，并且加载速度更快。你可以这样解决：

reader.onload = function (e) {
var img = document.createElement("IMG");
img.onload = () => {
imagenes.push(img);
image_load="si" 
}
img.src = e.target.result;                    
}

EDIT：现在我看到，在代码的后面，您正在从src创建另一个Image实例，但同样的问题也发生在那里——您需要先听load事件，然后才能在画布上绘制它。