我可以从canvas元素获取图像，并在img src标签中使用它？
有没有可能将图像转换成由img src表示的图像？
我需要在一些转换之后裁剪图像并保存。 有一个视图函数，我在互联网上find像： FileReader()或ToBlop() ， toDataURL() ， getImageData() ，但我不知道如何在JavaScript中正确实现和使用它们。
这是我的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>
在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图像？ （这个脚本中可能有一些错误。）
canvas.toDataURL()将为您提供一个可用作源的数据url ：
var image = new Image(); image.id = "pic" image.src = canvas.toDataURL(); document.getElementById('image_for_crop').appendChild(image);
也可以看看：
- MDN：
canvas.toDataURL()文档
做这个。 在closures主体标记之前，将其添加到文档的底部。
<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>
当然，在你的文档中的某个地方，你需要抓取的canvas标签。
<canvas id="yourCanvasID" />
如果原始图像URL（相对或绝对）不属于网页所在的域，则canvas.toDataURL不起作用。 从包含图像的网页中的小书签和简单的JavaScripttesting。 看一下David Walsh的实例 。 把HTML和图像放在你自己的networking服务器上，把原始图像切换到相对或绝对的URL，切换到外部图像的URL。 只有前两种情况正在工作。
我发现你的小提琴有两个问题，其中一个问题是Zeta的答案。
该方法不是toDataUrl(); 是toDataURL(); 而你忘记将canvas存储在variables中。
所以小提琴现在工作正常http://jsfiddle.net/gfyWK/12/
我希望这有帮助！
更正小提琴 – 更新显示图像复制到canvas…
并点击右键可以保存为.PNG
<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>
加上小提琴页面上的JS …
干杯
目前看着保存到服务器上的文件— ASP.net的C＃（.aspx网页forms页面）任何意见将是很酷….
