Databases
StackOverflow2013
Postsdbo
POCan I get image from canvas element and use it in img src tag?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan I get image from canvas element and use it in img src tag?
    text
    copied!<p>Is there possibility to convert the image present in a canvas element into an image representing by <code>img src</code>?</p> <p>I need that to crop an image after some transformation and save it. There are a view functions that I found on the internet like: <code>FileReader()</code> or <code>ToBlop()</code>, <code>toDataURL()</code>, <code>getImageData()</code>, but I have no idea how to implement and use them properly in JavaScript.</p> <p>This is my html:</p> <pre><code>&lt;img src="http://picture.jpg" id="picture" style="display:none"/&gt; &lt;tr&gt; &lt;td&gt; &lt;canvas id="transform_image"&gt;&lt;/canvas&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;div id="image_for_crop"&gt;image from canvas&lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; </code></pre> <p>In JavaScript it should look something like this:</p> <pre><code>$(document).ready(function() { img = document.getElementById('picture'); canvas = document.getElementById('transform_image'); if(!canvas || !canvas.getContext){ canvas.parentNode.removeChild(canvas); } else { img.style.position = 'absolute'; } transformImg(90); ShowImg(imgFile); } function transformImg(degree) { if (document.getElementById('transform_image')) { var Context = canvas.getContext('2d'); var cx = 0, cy = 0; var picture = $('#picture'); var displayedImg = { width: picture.width(), height: picture.height() }; var cw = displayedImg.width, ch = displayedImg.height Context.rotate(degree * Math.PI / 180); Context.drawImage(img, cx, cy, cw, ch); } } function showImg(imgFile) { if (!imgFile.type.match(/image.*/)) return; var img = document.createElement("img"); // creat img object img.id = "pic"; //I need set some id img.src = imgFile; // my picture representing by src document.getElementById('image_for_crop').appendChild(img); //my image for crop } </code></pre> <p>How can I change the canvas element into an <code>img src</code> image in this script? (There may be some bugs in this script.)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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