我可以从画布元素中获取图像并在 img src 标签中使用它吗？
是否有可能将画布元素中的图像转换为 img src 表示的图像？
我需要在一些转换后裁剪图像并保存它。我在互联网上找到了一个视图函数，例如：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
}
如何在此脚本中将画布元素更改为 img src 图像？ （此脚本中可能存在一些错误。）
canvas.toDataURL() 将为您提供可用作来源的 data url：
var image = new Image();
image.id = "pic";
image.src = canvas.toDataURL();
document.getElementById('image_for_crop').appendChild(image);
完整示例
这是一个带有一些随机行的完整示例。黑边图像是在 <canvas> 上生成的，而蓝边图像是 <img> 中的副本，用 <canvas> 的 data url 填充。
// 这只是图像生成，跳到 DATAURL: 下面 var canvas = document.getElementById("canvas") var ctx = canvas.getContext("2d"); // 只是一些示例绘图 var gradient = ctx.createLinearGradient(0, 0, 200, 100); gradient.addColorStop("0", "#ff0000"); gradient.addColorStop("0.5" ,"#00a0ff"); gradient.addColorStop("1.0", "#f0bf00"); ctx.beginPath(); ctx.moveTo(0, 0); for (let i = 0; i < 30; ++i) { ctx.lineTo(Math.random() * 200, Math.random() * 100); } ctx.strokeStyle = 渐变； ctx.stroke(); // DATAURL：通过数据 url 生成实际图像 var target = new Image(); target.src = canvas.toDataURL(); document.getElementById('result').appendChild(target);画布{边框：1px纯黑色； } img { 边框：1px 纯蓝色； } 身体 { 显示：弹性； } div + div {margin-left: 1ex; }
原文：
结果通过 < img>:
也可以看看：
MDN：canvas.toDataURL() 文档
做这个。在您关闭正文标签之前，将此添加到文档的底部。
<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 id="yourCanvasID" />
我发现你的小提琴有两个问题，其中一个问题首先出现在 Zeta 的回答中。
该方法不是 toDataUrl(); 是 toDataURL(); 并且您忘记将画布存储在变量中。
所以小提琴现在可以正常工作http://jsfiddle.net/gfyWK/12/
我希望这有帮助！
如果原始图像 URL（相对或绝对）不属于与网页相同的域，则 canvas.toDataURL 不起作用。在包含图像的网页中通过小书签和简单的 javascript 进行测试。看看 David Walsh 的工作 example。将 html 和图像放在您自己的 Web 服务器上，将原始图像切换为相对或绝对 URL，更改为外部图像 URL。只有前两种情况有效。
更正了小提琴 - 更新显示复制到画布中的图像......
并且右键可以保存为.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 web form page) 任何建议都会很酷....
关注公众号
不定期副业成功案例分享
