A continuación se muestra parte de una aplicación de dibujo web que utiliza HTML5 Canvas.

Mi siguiente paso es permitir que los contenidos de los archivos locales se seleccionen y representen en el lienzo. Los archivos pueden ser txt o formatos de imagen comunes como png .

En el código, el archivo se selecciona, luego, si la extensión es txt , el contenido se trata como texto, y si la extensión es png , los datos de la imagen deben leerse y representarse en el lienzo.

Sin embargo, con el archivo png, aparece el error:

 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'.

Aquí está el código:

 <script> function addTxtFileContent(e) { console.log('addTxtFileContent'); var fc = e.target.result; console.log('addFileContent: ' + fc); var fsize = document.getElementById("TextFontSize").value; var font = ""; if ( textitalic ) font += 'italic '; if ( textbold ) font += 'bold '; font += fsize + 'px ' + document.getElementById("TextFontList").value; console.log('addFileContent font: ' + font ); context.font = font; context.fillStyle = scolor; context.textAlign = textalign; context.fillText(fc, 400, 200); } function addImgFileContent(e, img) { console.log('addImgFileContent'); context.drawImage(img, 100, 100); } function readFile(e) { console.log('readFile'); var file = e.target.files[0]; if (!file) return; var reader = new FileReader(); var ext = String(file.name).split('.').pop(); console.log('readFile name: ' + file.name + ' ext:' + ext); switch ( ext ) { case 'txt': reader.onload = function(e) { addTxtFileContent(e); } reader.readAsText(file); break; case 'png': reader.readAsDataURL(file); reader.onload = function (e) { var image=new Image(); image.src=e.target.result; image.onload = function () { addImgFileContent(image); // <<< Error reported here }; } } } </script>