Блог

Главная - Вопросы по программированию - Не удалось скопировать элемент холста

Не удалось скопировать элемент холста

#javascript #jquery #node.js #reactjs

Вопрос:

У меня есть 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>

Может ли кто-нибудь, пожалуйста, указать мне правильное направление и посоветовать, что мне нужно сделать, чтобы оба раздела работали?

Комментарии:

1. Что вы подразумеваете под «это не работает»? Вы получаете какие-либо сообщения об ошибках?

2. Первый элемент записывает на холст и показывает изображение, но второй позволяет загрузить файл, но ни холст, ни выходной элемент ничего не показывают.

3. Что console.log(URL.createObjectURL(e.target.files[0])); выводит?

4. Где дублированный код в вашем примере кода?

Ответ №1:

  1. getElementsByClassName возвращает массив, а не один элемент. Если вы хотите использовать его, вам нужно будет переписать свой второй ввод на что-то вроде document.getElementsByClassName("element file2")[0] . (Обратите внимание на [0] в конце.)
  2. Старайтесь, чтобы ваш код оставался СУХИМ. Вам не следует повторять так много строк и вместо этого больше полагаться на функции.
 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>
Метки: