Question

我正在构建一个照片上传工具，其中添加照片会生成一个新的预览div，其中包含一个用于命名照片的输入字段和一个canvas元素，我将它们绘制成可以预览的图片。我们的想法是允许他们选择多张照片并预览它们，然后再将它们全部上传。我遇到的问题是当你添加第二张照片时，当它将图像绘制到新生成的画布时，它会清除所有其他画布元素的内容。这是我的代码

   function createPhotoPreviewDiv(img){
      var canvas_id = "previewCanvas" + $('.previewDivCanvas').length;
      var preview = "<div class='previewDiv'><span>Photo 1</span>" +
                    "<input type='text' placeholder='photo1' class='previewPhotoName'>" +
                    "<canvas class='previewDivCanvas' id='" + canvas_id + "'></canvas>" +
                   "</div>";

      document.getElementById('editLocationPreviewContainer').innerHTML+= preview;

      var canvas = document.getElementById(canvas_id);
      canvas.width = 200;
      canvas.height = 100;
      var context = canvas.getContext('2d');
      context.drawImage(img, 0, 0);

   }

它工作正常，但是当它第二次运行时（当用户添加第二张照片时），则清除之前创建的画布。任何人都知道我做错了什么，或者这是多个画布元素的预期行为？

Answer 1

感谢@ darckcrystale的评论，我发现问题是由于我使用innerHTML而不是.append()添加新元素引起的。通过使用innerHTML我替换了我之前创建的所有画布元素，这清除了我绘制到它们中的图像。

绘制到一个画布会清除我的其他画布元素

1 个答案: