¿Puedo obtener una imagen del elemento canvas y usarla en la etiqueta img src?

Question

¿Hay posibilidad de convertir la imagen presente en un elemento canvas en una imagen que represente por img src?

Necesito eso para recortar una imagen después de algunas transformaciones y guardarla. Hay una función de vista que encontré en Internet como: FileReader() o ToBlop(), toDataURL(), getImageData(), pero no tengo idea de cómo implementarlas y usarlas correctamente en JavaScript.

Esta es mi html:

<img src="http://picture.jpg" id="picture" style="display:none"/> 
<tr> 
    <td> 
     <canvas id="transform_image"></canvas> 
    </td> 
</tr> 
<tr> 
    <td> 
     <div id="image_for_crop">image from canvas</div> 
    </td> 
</tr> 

En JavaScript debe ser algo como esto:

$(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 
} 

¿Cómo puedo cambiar el elemento canvas en una imagen img src en este guión? (Puede haber algunos errores en este guión.)

Answer 1

canvas.toDataURL() le proporcionará un data url que puede ser utilizado como fuente:

var image = new Image(); 
image.id = "pic" 
image.src = canvas.toDataURL(); 
document.getElementById('image_for_crop').appendChild(image); 

Ver también:

• MDN: canvas.toDataURL() documentation

Answer 2

He encontrado dos problemas con tu Fiddle, uno de los problemas es primero en la respuesta de Zeta.

el método no es toDataUrl(); es toDataURL(); y se olvidó de guardar el lienzo en su variable.

Así que el violín ahora funciona bien http://jsfiddle.net/gfyWK/12/

espero que esto ayude!

Answer 3

canvas.toDataURL no funciona si la URL de la imagen original (ya sea relativa o absoluta) no pertenece al mismo dominio que la página web. Probado desde un bookmarklet y un simple javascript en la página web que contiene las imágenes. Eche un vistazo a David Walsh que trabaja example. Coloque el html y las imágenes en su propio servidor web, cambie la imagen original a URL relativa o absoluta, cambie a una URL de imagen externa. Solo los primeros dos casos están funcionando.

Answer 4

Haga esto. Agregue esto al final de su documento justo antes de cerrar la etiqueta del cuerpo.

<script> 
    function canvasToImg() { 
     var canvas = document.getElementById("yourCanvasID"); 
     var ctx=canvas.getContext("2d"); 
     //draw a red box 
     ctx.fillStyle="#FF0000"; 
     ctx.fillRect(10,10,30,30); 

     var url = canvas.toDataURL(); 

     var newImg = document.createElement("img"); // create img tag 
     newImg.src = url; 
     document.body.appendChild(newImg); // add to end of your document 
    } 

    canvasToImg(); //execute the function 
</script> 

Por supuesto, en algún lugar de su documento necesita la etiqueta del lienzo que captará.

<canvas id="yourCanvasID" /> 

Answer 5

ha corregido el violín - actualizado muestra la imagen duplicada en el lienzo ...

y haga clic derecho se pueden guardar como PNG

http://jsfiddle.net/gfyWK/67/

<div style="text-align:center"> 
<img src="http://imgon.net/di-M7Z9.jpg" id="picture" style="display:none;" /> 
<br /> 
<div id="for_jcrop">here the image should apear</div> 
<canvas id="rotate" style="border:5px double black; margin-top:5px; "></canvas> 
</div> 

Además, el JS en la página de violín ...

Saludos de Si

mirando a salvar este archivo en el servidor --- ASP.net C# (página .aspx formulario web) Cualquier consejo sería genial ....