Ad

After Converting Html5canvas Into Image It Is Not Getting Inserted As Image In Html

- 1 answer

I am trying to convert html5canvas into an image and want to load that image in page again but it's not working.

window.onload = function() {
  
  }

  function myFunction() {
    var v = document.getElementById("mTextArea").value;
    document.getElementById("wow").innerHTML = v;

    html2canvas(document.getElementById("imagewrap"), {
      onrendered: function(canvas) {
        canvas.className = "html2canvas";
        var image = canvas.toDataURL("image/png");<====
        document.getElementById("img_prev").innerHTML = image;<====
      },
      useCORS: true
    });
  }

Please suggest what am I suppose to do?

Ad

Answer

canvas.toDataURL will result to an image. To insert an image into HTML the innerHTML is not the correct way. You should set that image as the source of a <img> tag. Assuming that img_prev is a <img> tag then:

    document.getElementById("img_prev").src= image;
Ad
source: stackoverflow.com
Ad