Posso obter imagens do elemento canvas e usá-las na tag img src?
Existe a possibilidade de converter a imagem presente em um elemento de tela em uma imagem representandoimg src
?
Eu preciso disso para cortar uma imagem depois de alguma transformação e salvá-lo. Há uma visão de funções que encontrei na internet como:FileReader()
ouToBlop()
, toDataURL()
, getImageData()
, mas não tenho idéia de como implementá-los e usá-los corretamente em JavaScript.
Este é meu 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>
Em JavaScript, deve ser algo como isto:
$(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
}
Como posso alterar o elemento da tela em umimg src
imagem neste roteiro? (Pode haver alguns bugs neste script.)