如何从文件选择器加载图像并将其加载到 canvas 以便我可以使用 Javascript 对其进行编辑？

Question

我一直在使用一个称为像素绘制的像素编辑器，我想创建一个按钮，允许我将任何图像加载到 canvas 上。 目前，我一直在网上研究和测试多种方法，但我仍然在努力加载图像。这是script.js方法的代码。

function showSelectedFile(){
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    var img = new Image();

    var file = document.getElementById("inputfile");
    var name = file.value.replaceAll("\\","").replace("C:fakepath","").replace(".png","");
    document.getElementById("myText").value = name;
    window.URL = window.URL || window.webkitURL;

    img.onload = function()
    {
        context.drawImage(img,0,0)
    }

    img.src = "/Users/angadp/Dropbox/Mac/Downloads/pixel-paint-master/" + name + ".png";
}

此外，在 script.js 文件中，我尝试使用 var canvas = document.getElementById("canvas-div") 但它收到以下错误“Uncaught TypeError: canvas.getContext is not a function”。

在index.html文件中，代码当前正在使用<div id="canvas-div"></div> 。 所以我不太确定如何将图像加载到使用 div 标签的 canvas 上。 同样在 html 文件的开头，我正在使用<input id='inputfile' type='file' accept = ".png" name='inputfile' onChange='showSelectedFile()'>这使得选择文件按钮。

我还有一张像素画的图片，这样你就知道我在说什么了。

菜单

您能否为我提供一些有关如何解决所有这些解决方案的帮助。 谢谢你。 我还附上了原始像素绘画的超链接，以便您下载和测试它。

像素编辑器菜单供您下载和测试

Answer 1

您可以在文件change时加载图像。 然后createObjectURL （即data:something;base64）。 然后将其加载到图像上，最后将其绘制在<canvas>上。

 function loadFile(event) { var canvas = document.querySelector("canvas"); var ctx = canvas.getContext('2d'); var dummy = document.getElementById('dummy'); dummy.src = URL.createObjectURL(event.target.files[0]); dummy.onload = function() { ctx.drawImage(dummy, 0, 0, 600, 300); // Set line width ctx.lineWidth = 10; ctx.beginPath(); ctx.moveTo(50, 140); ctx.lineTo(150, 60); ctx.lineTo(250, 140); ctx.closePath(); ctx.stroke(); // free memory URL.revokeObjectURL(dummy.src) dummy.parentNode.removeChild(dummy) } };

 canvas { width: 600px; height: 300px; }

 <input type="file" accept="image/*" onchange="loadFile(event)"> <canvas></canvas> <img id="dummy" />