如何使用canvas.toDataURL()将画布保存为图像?

时间:2012-05-20 11:46:31

标签: javascript html5 cordova canvas save

我目前正在构建一个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>

10 个答案:

答案 0 :(得分:98)

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

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

答案 1 :(得分:22)

您可以使用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>

答案 2 :(得分:21)

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

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();

答案 3 :(得分:7)

我创建了一个小型库来执行此操作(以及其他一些方便的转换)。它被称为reimg,它使用起来非常简单。

ReImg.fromCanvas(yourCanvasElement).toPng()

答案 4 :(得分:7)

这项工作对我来说:(只有谷歌浏览器)

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

答案 5 :(得分:4)

1000Bugy's answer类似,但更简单,因为您不必动态制作锚点并手动发送点击事件(加上IE修复)。

如果您将下载按钮设为锚点,则可以在运行默认锚点功能之前将其置于高位。 所以onAnchorClick您可以将锚点href设置为画布base64图像,将锚点下载属性设置为您想要为图像命名的任何内容。

这在(当前)IE中不起作用,因为它没有实现下载属性并阻止数据uris的下载。但是,可以使用window.navigator.msSaveBlob来修复此问题。

因此,您的锚定点击事件处理程序将如下所示(其中anchorcanvasfileName是范围查找):

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

答案 6 :(得分:1)

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

即便如此,浏览器也会显示图像。您可以右键单击并使用“保存链接”下载图像。

查看this link了解详情。

答案 7 :(得分:1)

您可以尝试一下;创建一个虚拟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();
}

这里是fiddle

答案 8 :(得分:0)

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

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

答案 9 :(得分:-7)

@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