如何使用 canvas.toDataURL() 将 Canvas 保存为图像？答案

【问题标题】：How To Save Canvas As An Image With canvas.toDataURL()?如何使用 canvas.toDataURL() 将 Canvas 保存为图像？
【发布时间】：2012-05-27 05:42:10
【问题描述】：

我目前正在构建一个 HTML5 网络应用程序/Phonegap 原生应用程序，但我似乎不知道如何使用 canvas.toDataURL() 将我的画布保存为图像。有人可以帮帮我吗？

这是代码，有什么问题？

//我的画布被命名为“canvasSignature”

JavaScript：

function putImage()
{
  var canvas1 = document.getElementById("canvasSignature");        
  if (canvas1.getContext) {
     var ctx = canvas1.getContext("2d");                
     var myImage = canvas1.toDataURL("image/png");      
  }
  var imageElement = document.getElementById("MyPix");  
  imageElement.src = myImage;                           

}

HTML5：

<div id="createPNGButton">
    <button onclick="putImage()">Save as Image</button>        
</div>

【问题讨论】：

OP 的问题没有得到解答。他明确表示这是为Phonegap / iPad设计的。给出的答案是保存在桌面浏览器上。
不确定phonegap，但我在本机iOS中从头开始使用JavaScript在另一端完成了这项工作，我使用.toDataURL()捕获数据，然后使用window.location将浏览器指向appname://[data url]。在应用程序端，UIWebView 有一个委托方法，说明它是否应该加载页面。我监听appname:// 并在它进入时将其分解，拒绝页面加载并在本机字符串中捕获数据 url...您对实际的 iOS/Objective C 代码有多熟悉？

标签： javascript html cordova canvas save

【解决方案1】：

也可以使用元素引用来下载图片：

HTML：

<a download style="display:none" ref="imageDownloadRef"></a>

JAVASCRIPT：

  this.$refs['imageDownloadRef'].href = this.canvas.toDataURL({
  format: 'jpeg',
  quality: 1.0,
  })
  const imageDownloadLink = this.$refs.imageDownloadRef as HTMLElement
  imageDownloadLink.click()

【讨论】：

【解决方案2】：

我为此目的创建了简单的打字稿函数，只需删除要与 javascript 一起使用的类型。

 //ImagePath == canvas.toDataUrl()
private saveImage(imagePath: string, imageName: string ){
    const link = document.createElement('a');
    link.style.display = 'none';
    document.body.appendChild(link)
    link.setAttribute('download', imageName + '.png');
    link.setAttribute('href', imagePath.replace("image/png", "image/octet-stream"));
    link.click();
}

 //function call
 saveImage(canvas.toDataURL(), "myName")

【讨论】：

【解决方案3】：

类似于1000Bugy's answer，但更简单，因为您不必即时制作锚点并手动发送点击事件（加上 IE 修复）。

如果您将下载按钮设置为锚点，则可以在运行默认锚点功能之前对其进行劫持。所以onAnchorClick 你可以将anchor href 设置为canvas base64 图像，并将anchor 下载属性设置为你想要为图像命名的任何内容。

这在（当前）IE 中不起作用，因为它没有实现下载属性并阻止数据 uri 的下载。但这可以通过使用window.navigator.msSaveBlob 来解决。

因此，您的锚点单击事件处理程序将如下所示（其中 anchor、canvas 和 fileName 是范围查找）：

function onClickAnchor(e) {
  if (window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(canvas.msToBlob(), fileName);
    e.preventDefault();
  } else {
    anchor.setAttribute('download', fileName);
    anchor.setAttribute('href', canvas.toDataURL());
  }
}

这里是a fiddle

【讨论】：

【解决方案4】：

在 Cordova 中运行时，您不能使用前面提到的方法下载图像。您将需要使用 Cordova 文件插件。这将允许您选择保存它的位置并利用不同的持久性设置。详情在这里：https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/

或者，您可以将图像转换为 base64，然后将字符串存储在 localStorage 中，但如果您有很多图像或高分辨率，这将很快填满您的配额。

【讨论】：

【解决方案5】：

你可以试试这个；创建一个虚拟 HTML 锚点，然后从那里下载图像...

// Convert canvas to image
document.getElementById('btn-download').addEventListener("click", function(e) {
    var canvas = document.querySelector('#my-canvas');

    var dataURL = canvas.toDataURL("image/jpeg", 1.0);

    downloadImage(dataURL, 'my-canvas.jpeg');
});

// Save | Download image
function downloadImage(data, filename = 'untitled.jpeg') {
    var a = document.createElement('a');
    a.href = data;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
}

【讨论】：

我喜欢一切都在 JS 中完成的事实，包括链接元素的创建。它非常适合自动化目的
完美解决方案
非常感谢！对我来说非常好用！

【解决方案6】：

@Wardenclyffe 和@SColvin，你们都在尝试使用画布保存图像，而不是使用画布的上下文。你都应该尝试 ctx.toDataURL(); 试试这个：

var canvas1 = document.getElementById("yourCanvasId");  <br>
var ctx = canvas1.getContext("2d");<br>
var img = new Image();<br>
img.src = ctx.toDataURL('image/png');<br>
ctx.drawImage(img,200,150);<br>

您也可以参考以下链接：

http://tutorials.jenkov.com/html5-canvas/todataurl.html

http://www.w3.org/TR/2012/WD-html5-author-20120329/the-canvas-element.html#the-canvas-element

【讨论】：

Uncaught TypeError: Object # has no method 'toDataURL'.
这是错误的，因为上下文元素没有toDataURL 函数：developer.mozilla.org/en-US/docs/Web/API/…。你想在画布元素上调用toDataURL：developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/…

【解决方案7】：

您可以使用canvas2image 提示下载。

我遇到了同样的问题，这里有一个简单的例子，它既可以将图像添加到页面，又可以强制浏览器下载它：

<html>
    <head>
        <script src="http://hongru.github.io/proj/canvas2image/canvas2image.js"></script>
        <script>
            function draw(){
                var canvas = document.getElementById("thecanvas");
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
                ctx.fillRect(25,25,100,100); 
                ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
                ctx.fillRect(58, 74, 125, 100);
            }

            function to_image(){
                var canvas = document.getElementById("thecanvas");
                document.getElementById("theimage").src = canvas.toDataURL();
                Canvas2Image.saveAsPNG(canvas);
            }
        </script>
    </head>
    <body onload="draw()">
        <canvas width=200 height=200 id="thecanvas"></canvas>
        <div><button onclick="to_image()">Draw to Image</button></div>
        <image id="theimage"></image>
    </body>
</html>

【讨论】：

刚试了一下，它会在Chrome中保存一个没有名字也没有扩展名的文件。
正如这里提到的nihilogic.dk/labs/canvas2image 设置文件名似乎是不可能的：“如果可以以某种方式将文件名附加到数据上，那就太好了，但我发现没有办法这样做。现在，您必须自己指定文件名。"
您发布的链接已损坏

【解决方案8】：

此解决方案允许您更改下载文件的名称：

HTML：

<a id="link"></a>

JAVASCRIPT：

  var link = document.getElementById('link');
  link.setAttribute('download', 'MintyPaper.png');
  link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
  link.click();

【讨论】：

谢谢你，这对我帮助很大！

【解决方案9】：

这对我有用：（仅限谷歌浏览器）

<html>
<head>
    <script>
            function draw(){
                var canvas = document.getElementById("thecanvas");
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
                ctx.fillRect(25,25,100,100);
                ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
                ctx.fillRect(58, 74, 125, 100);
            }

            function downloadImage()
            {
                var canvas = document.getElementById("thecanvas");
                var image = canvas.toDataURL();

                var aLink = document.createElement('a');
                var evt = document.createEvent("HTMLEvents");
                evt.initEvent("click");
                aLink.download = 'image.png';
                aLink.href = image;
                aLink.dispatchEvent(evt);
            }
    </script>
</head>
<body onload="draw()">
    <canvas width=200 height=200 id="thecanvas"></canvas>
    <div><button onclick="downloadImage()">Download</button></div>
    <image id="theimage"></image>
</body>
</html>

【讨论】：

也许您可以解释一下您的代码中回答问题的部分，而不是在没有任何 cmets 的情况下粘贴它？

【解决方案10】：

我创建了一个小型库来执行此操作（以及其他一些方便的转换）。它叫reimg，使用起来非常简单。

ReImg.fromCanvas(yourCanvasElement).toPng()

【讨论】：

酷库。谢谢。不过，示例文档中有一个小问题。我在 Github 上打开了一个问题，以引起您的注意。

【解决方案11】：

这是一些代码。没有任何错误。

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  // here is the most important part because if you dont replace you will get a DOM 18 exception.


window.location.href=image; // it will save locally

【讨论】：

IE9 标准模式除外：“此网页上的某些内容或文件需要您未安装的程序。” Internet Explorer 8 及更高版本仅支持 CSS、和中图像的数据 URI：developer.mozilla.org/en-US/docs/data_URIs
工作正常。如何更改下载文件的名称？它只是“下载”而没有扩展。谢谢！
在 Chrome 中，这会使浏览器崩溃。如果我在图像标签中显示图像，它确实可以工作，但右键菜单是灰色的 - 所以我仍然无法保存图像。
这很好用......但在 Android（Galaxy S3 中的默认浏览器）中，它只是不下载图像，但我永远收到“正在下载......”的消息。
我有保存问题，有人可以帮我看看这个链接：stackoverflow.com/questions/25131763/…

【解决方案12】：

你应该使用window.location = myImage; 而不是imageElement.src = myImage;

即使在此之后，浏览器也会显示图像本身。您可以右键单击并使用“保存链接”下载图像。

查看this link了解更多信息。

【讨论】：

哇，谢谢，这真的帮了很多忙：) 但是你如何获得一个弹出的保存框，以便某人可以保存到特定的目的地（比如他们的 Android 图像文件夹）？
取决于具体的浏览器。 Android 浏览器通常会直接将文件下载到特定文件夹中，例如。
在 Chrome 中这是可行的，但右键菜单是灰色的。尝试将图像“拖出”浏览器时，Chrome 会崩溃。
groups.google.com/a/chromium.org/forum/#!topic/blink-dev/… 像这样打开数据 URL 看起来会被阻止。