Question

是否有可能将canvas元素中的图像转换为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
}

如何在此脚本中将canvas元素更改为img src图像？（此脚本中可能存在一些错误。）

Answer 1

canvas.toDataURL()将为您提供data url，可用作来源：

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

另见：

MDN: canvas.toDataURL() documentation

Answer 2

这样做。在关闭正文标记之前将其添加到文档的底部。

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

当然，在你的doc中的某个地方你需要它会抓取的canvas标签。

<canvas id="yourCanvasID" />

Answer 3

我发现你的小提琴有两个问题，其中一个问题首先出现在Zeta的回答中。

该方法不是toDataUrl(); toDataURL();，而您忘记将画布存储在变量中。

所以小提琴现在可以正常使用http://jsfiddle.net/gfyWK/12/

我希望这有帮助！

Answer 4

如果原始图像URL（相对或绝对）不属于与网页相同的域，则

canvas.toDataURL无效。从包含图像的网页中的书签和简单的javascript进行测试。看看David Walsh工作example。将html和图像放在您自己的Web服务器上，将原始图像切换为相对或绝对URL，更改为外部图像URL。只有前两种情况正在发挥作用。

Answer 5

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

右键单击可以保存为.PNG

http://jsfiddle.net/gfyWK/67/

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

干杯 Si

目前正在考虑将此保存到服务器上的文件--- ASP.net C＃（。aspx网页表单）任何建议都会很酷......

Answer 6

我正在 SecurityError: The operation is insecure.

在野生动物园浏览器中使用canvas.toDataURL('image/jpg');时

我可以从canvas元素获取图像并在img src标签中使用它吗？

6 个答案: