为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

慕村225694 2019-10-16 12:09:09

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

我目前正在构建一个HTML 5 web应用程序/Phonegap本地应用程序,我似乎不知道如何将我的画布保存为canvas.toDataURL()..有人能帮帮我吗?

这是密码,怎么了?

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

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

HTML 5:


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


查看完整描述

3 回答

?
慕勒3428872

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

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



查看完整回答
反对 回复 2019-10-17
?
月关宝盒

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

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



查看完整回答
反对 回复 2019-10-17
?
千万里不及你

你可以用canvas2图像提示下载。

我也遇到了同样的问题,下面是一个简单的例子,它将图像添加到页面中,并强制浏览器下载:

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



查看完整回答
反对 回复 2019-10-17

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信