html5获取元素image,javascript – 我可以从canvas元素获取图像,并在img src标签中使用它吗？...

是否有可能将在canvas元素中存在的图像转换为由img src表示的图像？

我需要在一些变换后裁剪图像，并保存。有一个视图函数，我发现在互联网上像FileReader()或ToBlop()，toDataURL()，getImageData()，但我不知道如何在JavaScript中正确实现和使用它们。

这是我的html：

image from canvas

在JavaScript中它应该看起来像这样：

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

}

如何在此脚本中将canvas元素更改为img src图像？ (这个脚本可能有一些错误。)