无法复制画布元素

Question

我有一个上传图片的 HTML 页面，上传的图片在画布元素上重绘，然后转换为 base64。

第一个元素按预期工作，但是当我尝试复制代码时，它不适用于第二个代码。

我的代码是：

<article>
<h3>Image 1</h3>
        <p></p>
    <li id="li_42" >
        <div>
        <input id="element_42" name="element_42" class="element file" type="file"/>
        <br/>canvas:<br/>
                    <canvas id="canvas" width=64 height=64></canvas>
        <textarea id="element_42_a" rows="5"  ></textarea> 
    <script>
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var cw=canvas.width;
    var ch=canvas.height;
    var maxW=64; 
    var maxH=64;

    var input = document.getElementById('element_42');
    var output = document.getElementById('element_42_a');
      input.addEventListener('change', handleFiles);

    function handleFiles(e) {
    var img = new Image;
      img.onload = function() {
        var iw=img.width;
        var ih=img.height;
        var scale=Math.min((maxW/iw),(maxH/ih));
        var iwScaled=iw*scale;
        var ihScaled=ih*scale;
        canvas.width=iwScaled;
        canvas.height=ihScaled;
        ctx.drawImage(img,0,0,iwScaled,ihScaled);
    output.value = canvas.toDataURL("image/jpeg",0.5);
      }
      img.src = URL.createObjectURL(e.target.files[0]);
    }
    </script> 
    </div> 
        <article>
            <h3>Image 2</h3>
            <li id="li_43" >
                <div>
        <input id="element_43" name="element_43" class="element file2" type="file"/>
        <br/>canvas:<br/>
                    <canvas id="canvas2" name="canvas2" width=64 height=64></canvas>
        <textarea id="element_43_a" rows="5"></textarea> 
        
    <script>
    var canvas=document.getElementById("canvas2");
    var ctx=canvas2.getContext("2d");
    var cw=canvas2.width;
    var ch=canvas2.height;
    var maxW=64;
    var maxH=64;

    var input = document.getElementsByClassName("element file2");(
    var output = document.getElementById('element_43_a');
    input.addEventListener('change', handleFiles);

    function handleFiles(e) {
      var img = new Image;
      img.onload = function() {
        var iw=img.width;
        var ih=img.height;
       var scale=Math.min((maxW/iw),(maxH/ih));
        var iwScaled=iw*scale;
        var ihScaled=ih*scale;
        canvas2.width=iwScaled;
        canvas2.height=ihScaled;
        ctx.drawImage(img,0,0,iwScaled,ihScaled);
    output.value = canvas2.toDataURL("image/jpeg",0.5);
      }
      img.src = URL.createObjectURL(e.target.files[0]);
    }
    </script> 
    </div> 
    </body>
    </html>

有人可以为我指出正确的方向并建议我需要做什么，以便这两个部分都有效吗？

Answer 1

1. getElementsByClassName 返回一个数组而不是单个元素。如果你想使用它，你需要将你的第二个输入重写为document.getElementsByClassName("element file2")[0] 之类的东西。 （注意末尾的 [0]。）
2. 尽量保留您的代码DRY。你不应该重复这么多行，而是更多地依赖函数。

function redrawOnCanvas(myCanvas, myInput, myOutput) {
  var canvas = document.getElementById(myCanvas);
  var ctx = canvas.getContext("2d");
  var maxW = 64;
  var maxH = 64;

  function handleFiles(e) {
    var img = new Image;
    img.onload = function() {
      var iw = img.width;
      var ih = img.height;
      var scale = Math.min((maxW / iw), (maxH / ih));
      var iwScaled = iw * scale;
      var ihScaled = ih * scale;
      canvas.width = iwScaled;
      canvas.height = ihScaled;
      ctx.drawImage(img, 0, 0, iwScaled, ihScaled);
      output.value = canvas.toDataURL("image/jpeg", 0.5);
    }
    img.src = URL.createObjectURL(e.target.files[0]);
  }

  var input = document.getElementById(myInput);
  var output = document.getElementById(myOutput);
  input.addEventListener('change', handleFiles);
}

redrawOnCanvas('canvas', 'element_42', 'element_42_a');
redrawOnCanvas('canvas2', 'element_43', 'element_43_a');

<article>
  <h3>Image 1</h3>
  <li id="li_42">
    <div>
      <input id="element_42" name="element_42" class="element file" type="file" />
      <br/>canvas:<br/>
      <canvas id="canvas" width=64 height=64></canvas>
      <textarea id="element_42_a" rows="5"></textarea>
    </div>
  </li>
</article>
<article>
  <h3>Image 2</h3>
  <li id="li_43">
    <div>
      <input id="element_43" name="element_43" class="element file2" type="file" />
      <br/>canvas:<br/>
      <canvas id="canvas2" name="canvas2" width=64 height=64></canvas>
      <textarea id="element_43_a" rows="5"></textarea>
    </div>
  </li>
</article>