Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here is an example how to achieve what you need:</p> <p>1) <strong>Draw something</strong> (taken from <a href="http://www.html5canvastutorials.com/tutorials/html5-canvas-shape-fill/" rel="noreferrer">canvas tutorial</a>)</p> <pre><code>&lt;canvas id="myCanvas" width="578" height="200"&gt;&lt;/canvas&gt; &lt;script&gt; var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // begin custom shape context.beginPath(); context.moveTo(170, 80); context.bezierCurveTo(130, 100, 130, 150, 230, 150); context.bezierCurveTo(250, 180, 320, 180, 340, 150); context.bezierCurveTo(420, 150, 420, 120, 390, 100); context.bezierCurveTo(430, 40, 370, 30, 340, 50); context.bezierCurveTo(320, 5, 250, 20, 250, 50); context.bezierCurveTo(200, 5, 150, 20, 170, 80); // complete custom shape context.closePath(); context.lineWidth = 5; context.fillStyle = '#8ED6FF'; context.fill(); context.strokeStyle = 'blue'; context.stroke(); &lt;/script&gt; </code></pre> <p>2) <strong>Convert canvas image to URL format (base64)</strong></p> <pre><code>var dataURL = canvas.toDataURL(); </code></pre> <p>3) <strong>Send it to your server via Ajax</strong></p> <pre><code>$.ajax({ type: "POST", url: "script.php", data: { imgBase64: dataURL } }).done(function(o) { console.log('saved'); // If you want the file to be visible in the browser // - please modify the callback in javascript. All you // need is to return the url to the file, you just saved // and than put the image in your browser. }); </code></pre> <p>3) <strong>Save base64 on your server as an image</strong> (here is <a href="https://stackoverflow.com/questions/1532993/i-have-a-base64-encoded-png-how-do-i-write-the-image-to-a-file-in-php">how to do this in PHP</a>, the same ideas is in every language. Server side in PHP can be <a href="http://j-query.blogspot.com/2011/02/save-base64-encoded-canvas-image-to-png.html" rel="noreferrer">found here</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. 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