0

I'm building a photo upload tool where adding a photo generates a new preview div with an input field to name your photo and a canvas element which I draw their picture to so they can preview it. The idea is to allow them to select multiple photos and preview them before uploading them all at once. The problem I have is when you add a second photo, when it draws the image to the newly generated canvas it clears the contents of all the other canvas elements. Here's my code

   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);

   }

It works fine, except that when it runs a second time (when the user adds a second photo) then the canvas it had previously created is cleared. Anyone know what I'm doing wrong, or is this expected behavior with multiple canvas elements?

XYZ
  • 4,450
  • 2
  • 15
  • 31
Christian
  • 41
  • 1
  • 8
  • 1
    To add a new element, you should use `.append()` instead of trying to concatenate the inner HTML. – darckcrystale May 16 '17 at 15:22
  • @darkcrystale Thanks, that actually fixed it. I don't understand why exactly though, as far as I can tell the elements come out the same either way, I was under the impression that both methods were pretty much interchangeable? – Christian May 16 '17 at 15:29
  • 1
    I think it's less clear than `.append()` because with `.append()` you see immediately that you want to *add* something to the element :) See also: http://stackoverflow.com/questions/11515383/why-is-element-innerhtml-bad-code But I don't know why it resolved your problem. – darckcrystale May 16 '17 at 15:38
  • 1
    @darkcrystale Thanks for the link! Now that I'm thinking about it, it has become obvious to me - using `innerHTML+=` will redraw the canvases I'd already created, meaning I was replacing the old canvases with fresh ones that hadn't been drawn on – Christian May 16 '17 at 15:41

1 Answers1

0

Thanks to @darckcrystale's comment, I figured out that the issue was caused by me adding the new elements with innerHTML instead of .append(). By using innerHTML I was replacing all the canvas elements I had previously created, which cleared the images I had drawn into them.

Christian
  • 41
  • 1
  • 8
  • Hey @AnuragDaolagajao, what is it about this answer that's a problem? This is what solved the problem I was having. Can you tell me what I need to do to improve this so its an acceptable answer? – Christian May 17 '17 at 13:35