Javascript 从输入动态添加多个图像

我有以下代码：

      var imageLoader = document.getElementById('imageLoader');
    var patternLoader = document.getElementById("patternLoader");
    var canvas = document.getElementById('imageCanvas');
    var ctx = canvas.getContext('2d');


  function handleImage(e) {
      var reader = new FileReader();
      reader.onload = function (event) {
        var img = new Image();
        img.onload = function () {
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.drawImage(img, 0, 0);
        }
        img.src = event.target.result;
      }
      reader.readAsDataURL(e.target.files[0]);
    };

    imageLoader.addEventListener("change", handleImage, false);
    patternLoader.addEventListener("change", handleImage, false);

如何从输入中加载一个图像到另一个图像，而不替换它们

---

我希望它是这样的

这里有一个粗略的方法来动态添加图像。声明一个数组以跟踪所有图像，并基于最大的图像缩放画布

因为我不知道OP用于“imageLoader”和“patternLoader”的DOM元素是什么，所以我只使用了一个

-标记

只需继续粘贴图像的URL，即可将图像添加到画布中。图像将按添加顺序绘制

var c=document.getElementById（“画布”）；
var ctx=c.getContext（“2d”）；
var maxWidth=0；
var maxHeight=0；
var图像=[]；
var myInput=document.getElementById（“myInput”）；
myInput.addEventListener（'change'，handleImage，false）；
函数handleImage（e）{
var myImage=新图像（）；
myImage.onload=函数（）{
如果（myImage.width>maxWidth）{
maxWidth=myImage.width；
}
如果（myImage.height>maxHeight）{
maxHeight=myImage.height；
}
canvas.width=最大宽度；
canvas.height=最大高度；
images.push（myImage）；
drawImages（）；
}
myImage.src=e.target.value；
}
函数drawImages（）{
对于（var i=0；iYou希望画布上绘制的两个图像被视为画布上的两个对象？我希望它是这样的：您希望新图像始终位于顶部，并且画布的大小调整为最大的图像吗？我只想从输入动态地将多个图像加载到画布。什么样的DOM元素是
imageLoader
和
patternLoader
？我正在使用
input[type=“file”]
元素，当我尝试上载文件
时出错，不允许加载本地资源：file:///C:/fakepath/7dd84d70-768b-492b-88f7-a6c70f2db2e9.jpg
Ah是的，请注意，这些信息在您的问题中可能会很有用，因为这会改变一些情况。我的答案实际上不适用于本地文件（尽管您仍然可以使用全局变量作为images和my drawImages（）函数的思维方式）