Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This works perfectly...must be the simplest solution .</p> <p>//html</p> <pre><code>&lt;div id="mydiv" style="background-image:url(Koala.jpg) ;background-size: 100%; background-size :200px 200px; background-repeat: no-repeat;"&gt; &lt;p&gt;text!&lt;/p&gt; &lt;img src="mug.png" height="100" width="100"/&gt;&lt;/div&gt; &lt;div id="canvas"&gt; &lt;p&gt;Canvas:&lt;/p&gt; &lt;/div&gt; &lt;div style="width:200px; float:left" id="image"&gt; &lt;p style="float:left"&gt;Image: &lt;/p&gt; &lt;/div&gt; &lt;div style="float:left;margin-top: 120px;" class="return-data"&gt; &lt;/div&gt; &lt;script src="http://html2canvas.hertzen.com/build/html2canvas.js"&gt;&lt;/script&gt; &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt; </code></pre> <p>//Style</p> <pre><code>#mydiv { background-color: lightblue; width: 200px; height: 200px } </code></pre> <p>//Script</p> <pre><code> &lt;script language="javascript"&gt; html2canvas([document.getElementById('mydiv')], { onrendered: function (canvas) { document.getElementById('canvas').appendChild(canvas); var data = canvas.toDataURL('image/png'); //display 64bit imag var image = new Image(); image.src = data; document.getElementById('image').appendChild(image); // AJAX call to send `data` to a PHP file that creates an PNG image from the dataURI string and saves it to a directory on the server var file= dataURLtoBlob(data); // Create new form data var fd = new FormData(); fd.append("imageNameHere", file); $.ajax({ url: "uploadFile.php", type: "POST", data: fd, processData: false, contentType: false, }).done(function(respond){ $(".return-data").html("Uploaded Canvas image link: &lt;a href="+respond+"&gt;"+respond+"&lt;/a&gt;").hide().fadeIn("fast"); }); } }); function dataURLtoBlob(dataURL) { // Decode the dataURL var binary = atob(dataURL.split(',')[1]); // Create 8-bit unsigned array var array = []; for(var i = 0; i &lt; binary.length; i++) { array.push(binary.charCodeAt(i)); } // Return our Blob object return new Blob([new Uint8Array(array)], {type: 'image/png'}); } &lt;/script&gt; </code></pre> <p><a href="http://jsfiddle.net/Sq7hg/2/" rel="noreferrer">here is a sample demo</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload