Make A Div And It's Child Element's An Image In Javascript

Question

I have this layout in HTML:

&

Solution 1:

Load the html2canvas js file, then add this:

$('#btn').click(function() {
  html2canvas($('#front'), {
    onrendered: function(canvas) {
      myImage = canvas.toDataURL("image/png");
      $('#output').append(canvas);
    }
  });
});

#output {
  border: 1px solid #888888;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script><divid="front"><imgid="student_front"src="http://lorempixel.com/400/200"><divid="myid_info_college">CEIT</div><divid="myid_info_idnumber">101-03043</div><divid="myid_info_course">BSCS</div><divid="myid_info_name">Alyssa E. Gono</div><divid="myid_info_barcode">More text</div></div><buttonid="btn">CLICK FOR PIC</button><br><divid="output"></div>

You will need to change the image URL to something on the same domain (html2canvas does not load cross domain images).

Solution 2:

Html

Baca Juga

<div><inputtype="button"id="btnGenerateImage"value="Generate Image" /></div><div><canvasid="myCanvas"></canvas></div><div><h1>
        Generated Content</h1><imgid="canvasImg"alt="Right click to save me!"></div>

SCRIPT

 $("#btnGenerateImage").on('click', function () {
        var canvas = document.getElementById('myCanvas');

        // save canvas image as data url (png format by default)var dataURL = canvas.toDataURL();

        // set canvasImg image src to dataURL// so it can be saved as an imagedocument.getElementById('canvasImg').src = dataURL;

    });

Html5 Guru

Make A Div And It's Child Element's An Image In Javascript

Solution 1:

Solution 2:

Post a Comment for "Make A Div And It's Child Element's An Image In Javascript"