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

我目前正在构建一个 HTML5 Web 应用程序 / Phonegap 本地应用程序,我似乎无法弄清楚如何将我的画布保存为canvas.toDataURL()的图像。

我目前正在构建一个 HTML5 Web 应用程序 / 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">
    <on onclick="putImage()">Save as Image</on>        
</div>
176

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

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
75

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

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

你可以试试这个;创建一个虚拟的 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();
}
25

您可以使用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><on onclick="to_image()">Draw to Image</on></div>
        <image id="theimage"></image>
    </body>
</html>

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(351)
Dockerfile中的 VOLUME的目的是什么
上一篇
nim中“魔法”pragma的含义是什么
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(75条)