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

Posted 2023-03-05

【中文标题】我可以从画布元素中获取图像并在 img src 标签中使用它吗？

【英文标题】：Can I get image from canvas element and use it in img src tag?

【发布时间】：2012-05-02 17:18:11

【问题描述】：

是否有可能将画布元素中的图像转换为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 图像？ （此脚本中可能存在一些错误。）

【参考方案1】：

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 填充。

// This is just image generation, skip to DATAURL: below
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d");

// Just some example drawings
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 = gradient;
ctx.stroke();

// DATAURL: Actual image generation via data url
var target = new Image();
target.src = canvas.toDataURL();

document.getElementById('result').appendChild(target);

canvas  border: 1px solid black; 
img     border: 1px solid blue;  
body    display: flex; 
div + div margin-left: 1ex; 

<div>
  <p>Original:</p>
  <canvas id="canvas" width=200 height=100></canvas>
</div>
<div id="result">
  <p>Result via &lt;img&gt;:</p>
</div>

另见：

MDN: canvas.toDataURL() documentation

【讨论】：

出了点问题，脚本对我不起作用，我不知道为什么。我将它实现为 showImg() 函数，请参阅我的小提琴jsfiddle.net/kacprek/gfyWK/8

【参考方案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>

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

<canvas id="yourCanvasID" />

【讨论】：

为了传递 id 或 canvas 元素，我做了一些修改： canvasToImg=function=(id) var canvas = document.getElementById(id)||id; …

【参考方案3】：

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

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

所以 Fiddle 现在可以正常工作了 http://jsfiddle.net/gfyWK/12/

我希望这会有所帮助！

【参考方案4】：

如果原始图像 URL（相对或绝对）不属于与网页相同的域，则canvas.toDataURL 不起作用。在包含图像的网页中通过小书签和简单的 javascript 进行测试。 看看大卫沃尔什的工作example。将 html 和图片放在您自己的 Web 服务器上，将原始图片切换为相对或绝对 URL，更改为外部图片 URL。只有前两种情况有效。

【参考方案5】：

更正了 Fiddle - 更新显示复制到画布中的图像...

并且右键可以保存为.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...

干杯 硅

目前正在考虑将其保存到服务器上的文件 --- ASP.net C# (.aspx web 表单页面) 任何建议都会很酷....