Javascript 我可以从canvas元素获取图像并在imgsrc标记中使用它吗？

是否有可能将画布元素中的图像转换为由

img src

表示的图像

我需要它在一些转换后裁剪图像并保存它。我在internet上找到了一些视图函数，如：

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>

如何在此脚本中将canvas元素更改为

imgsrc

图像？（此脚本中可能存在一些错误。）

canvas.toDataURL（）

将为您提供一个可用作源的：

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

完整示例 这里有一个完整的例子，其中有一些随机线。黑色边框的图像是在

上生成的，而蓝色边框的图像是

中的副本
canvas{边框：1px纯黑；}
img{边框：1px纯蓝色；}
正文{display:flex；}
div+div{左边距：1ex；}

原件：

通过img获得的结果：

我发现你的小提琴有两个问题，其中一个问题是泽塔的答案中的第一个问题

方法不是
toDataUrl（）是
toDataURL（）
并且您忘记将画布存储在变量中

所以小提琴现在很好用了

我希望这有帮助
 如果原始图像URL（相对或绝对）与网页不属于同一域，则canvas.toDataURL
不起作用。通过bookmarklet和包含图像的网页中的简单javascript进行测试。
看看大卫·沃尔什的作品。将html和图像放在您自己的web服务器上，将原始图像切换为相对或绝对URL，更改为外部图像URL。只有前两个案例有效
 这样做。在关闭body标签之前，将其添加到文档底部

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


函数canvasToImg（）{
var canvas=document.getElementById（“yourCanvasID”）；
var ctx=canvas.getContext（“2d”）；
//画一个红色的盒子
ctx.fillStyle=“#FF0000”；
ctx.fillRect（10,10,30,30）；
var url=canvas.toDataURL（）；
var newImg=document.createElement（“img”）；//创建img标记
newImg.src=url；
document.body.appendChild（newImg）；//添加到文档末尾
}
canvasToImg（）//执行函数

当然，在您的文档中的某个地方，您需要它将抓取的画布标记

<canvas id="yourCanvasID" />

修正了小提琴-更新显示了复制到画布中的图像

右键单击可以另存为.PNG





在这里，图像应该清晰可见

加上小提琴页面上的JS

干杯
硅

目前正在考虑将其保存到服务器上的文件--ASP.net C#（.aspx web表单页）任何建议都很酷….
我得到了
SecurityError:操作不安全。

当使用canvas.toDataURL（'image/jpg'）时在safari浏览器中
出现问题，脚本不适合我，我不知道为什么。我将其实现为showImg（）函数，请看我的fiddle，为了传递id或canvas元素，我做了一些修改：canvasToImg=function=（id）{var canvas=document.getElementById（id）||id；…这可能是因为从画布元素获取图像通常用于对用户浏览器进行指纹识别。.Chrome具有可阻止这些跟踪尝试的功能。不确定Safari。这很可能是由于。
<canvas id="yourCanvasID" />

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