Javascript 如何将画布保存为png图像？

我有一个画布元素，其中有一个图形，我想创建一个按钮，当单击该按钮时，它会将图像保存为png文件。所以它应该打开“保存、打开、关闭”对话框

我是用这个代码做的

var canvas = document.getElementById("myCanvas");
window.open(canvas.toDataURL("image/png"));

但当我在IE9中进行测试时，会打开一个新窗口，显示“网页无法显示” 其网址为：

data:image/png;base64,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

有人知道如何解决这个问题吗？

试试这个：

var canvas = document.getElementById("alpha");
var dataURL = canvas.toDataURL("image/png");
var newTab = window.open('about:blank','image from canvas');
newTab.document.write("<img src='" + dataURL + "' alt='from canvas'/>");

应该能在这里帮助你

var canvas = document.getElementById("my-canvas");
// draw to canvas...
canvas.toBlob(function(blob) {
    saveAs(blob, "pretty image.png");
});

---

我可能发现了一种更好的方法，可以不强迫用户右键单击并“将图像另存为”。实时将画布base64代码绘制到链接的

href

中，并对其进行修改，以便自动开始下载。我不知道它是否与浏览器兼容，但是

---

您可以将

包装在您想要的任何内容周围。

我使用此解决方案设置文件名：

HTML:

试试这个：

jQuery('body').after('<a id="Download" target="_blank">Click Here</a>');

var canvas = document.getElementById('canvasID');
var ctx = canvas.getContext('2d');

document.getElementById('Download').addEventListener('click', function() {
    downloadCanvas(this, 'canvas', 'test.png');
}, false);

function downloadCanvas(link, canvasId, filename) {
    link.href = document.getElementById(canvasId).toDataURL();
    link.Download = filename;
}

jQuery（'body'）。在（'Click Here'）之后；
var canvas=document.getElementById（'canvasID'）；
var ctx=canvas.getContext（'2d'）；
document.getElementById（'Download'）.addEventListener（'click'，function（）{
下载画布（这是“canvas”、“test.png”）；
}，假）；
函数downloadCanvas（链接、canvasId、文件名）{
link.href=document.getElementById（canvasId.toDataURL（）；
link.Download=文件名；
}

您可以将此代码放在firefox或chrom的控制台中，在上面的脚本中更改画布标记ID后，在控制台中运行此脚本

---

执行此代码后，您将在html页面底部看到文本“单击此处”的链接。单击此链接并在“保存图像”的新窗口中将画布图形作为PNG图像打开

我遇到了这个问题，这是没有任何外部或附加脚本库的最佳解决方案： 在Javascript标记或文件中创建此函数： 我们在此假设画布是您的画布：

function download(){
        var download = document.getElementById("download");
        var image = document.getElementById("canvas").toDataURL("image/png")
                    .replace("image/png", "image/octet-stream");
        download.setAttribute("href", image);

    }

在HTML的正文部分指定按钮：

<a id="download" download="image.png"><button type="button" onClick="download()">Download</button></a>

下载

---

这是工作和下载链接看起来像一个按钮。在Firefox和Chrome中测试。

提交一个表单，其中包含一个输入值为canvas toDataURL（'image/png'），例如

//JAVASCRIPT

    var canvas = document.getElementById("canvas");
    var url = canvas.toDataUrl('image/png');

将url的值插入表单元素上的隐藏输入

//PHP

var canvasId=chart.id+'-canvas'；
var canvasdownloaddid=chart.id+'-下载画布'；
var canvasHtml=Ext.String.format（“”，
拉瓦西德，
chart.getWidth（），
chart.getHeight（），
canvasDownloadId）；
var canvascelement=reportBuilder.add（{html:canvasHtml}）；
var canvas=document.getElementById（canvasId）；
var canvasDownload=document.getElementById（canvasDownloadId）；
canvasDownload.href=chart.getImage（）.data；
canvasDownload.download='chart'；
canvassdownload.click（）；

完整的HTML代码。剪切并粘贴到新的.HTML文件中：

包含两个示例：

HTML文件中的画布

使用Javascript动态创建画布

测试地点：

铬

Internet Explorer

*边缘（标题名称不显示）

火狐

歌剧院

---

#保存画布测试
说明：
如何从HTML页面保存画布
如何保存动态创建的画布
保存画布（动态生成的画布）
保存画布（HTML代码中的画布）
var obj=新的MyTestCodeClass（）；
函数MyTestCodeClass（）{
//公开披露的职能：
this.SAVE_CANVAS=保存_CANVAS；
//：私人：
var_画布；
var\u canvas\u id=“id\u OF\u DYNAMIC\u canvas”；
var\u name\u hash\u计数器=0；
//：创建画布：
（函数_构造函数（）{
var D=文件；
var CE=D.createElement.bind（D）；
_画布=CE（“画布”）；
_画布宽度=300；
_帆布。高度=300；
_canvas.id=\u canvas\u id；
})();
//：保存画布之前，请将其填充为
//：我们可以看到它。用于演示代码。
函数_fillCanvas（输入_canvas，r，g，b）{
var ctx=input_canvas.getContext（“2d”）；
var c=输入值；
ctx.fillStyle=“rgb（“+r+”、“+g+”、“+b+”）；
ctx.fillRect（0，0，c.宽度，c.高度）；
}
//：保存画布。如果提供了可选的\u id，
//：将从DOM中保存画布。如果不是，
//：将保存动态创建的画布。
函数保存\u画布（可选\u id）{
var c=\u getCanvas（可选的\u id）；
//：调试代码：来自DOM的彩色画布
//：绿色，内部画布红色。
if（可选的_id）{
_（c，0255,0）；
}否则{
_填充画布（c，255,0,0）；
}
_（c）；
}
//：如果提供了可选的\u id，则获取画布
//：从DOM。否则，动态获取内部
//：已创建画布。
函数\u getCanvas（可选\u id）{
var c=null；//：画布。
if（可选的类型_id==“字符串”）{
var id=可选的_id；
var d=文件；
var c=d.getElementById（id）；
}否则{
c=_画布；
}
返回c；
}
函数_saveCanvas（画布）{
如果（！window）{alert（“[window\u IS\u NULL]”；}
//：我们想给这个窗口一个独特的
//：名称以便我们可以多次保存
//：无需关闭上一个
//：窗户。
_name_hash_counter++；
var NHC=_name_hash_计数器；
var URL='about:blank'；
变量名称='UNIQUE_WINDOW_ID'+NHC；
var w=window.open（URL、名称）；
如果（！w）{alert（[w_IS_NULL]”；}
//：创建页面内容，
//：然后设置互动程序。顺序很重要。
var DW=“”；
DW+=”；
w、 文件编写（DW）；
w、 document.title=“NHC”+NHC；
}
}//：末班

要容纳所有三点：

• 钮扣
• 将图像另存为png文件
• 打开保存，打开，关闭di

  jQuery('body').after('<a id="Download" target="_blank">Click Here</a>');
  
  var canvas = document.getElementById('canvasID');
  var ctx = canvas.getContext('2d');
  
  document.getElementById('Download').addEventListener('click', function() {
      downloadCanvas(this, 'canvas', 'test.png');
  }, false);
  
  function downloadCanvas(link, canvasId, filename) {
      link.href = document.getElementById(canvasId).toDataURL();
      link.Download = filename;
  }
  

  function download(){
          var download = document.getElementById("download");
          var image = document.getElementById("canvas").toDataURL("image/png")
                      .replace("image/png", "image/octet-stream");
          download.setAttribute("href", image);
  
      }
  

  <a id="download" download="image.png"><button type="button" onClick="download()">Download</button></a>
  

      var canvas = document.getElementById("canvas");
      var url = canvas.toDataUrl('image/png');
  

      $data = $_POST['photo'];
      $data = str_replace('data:image/png;base64,', '', $data);
      $data = base64_decode($data);
      file_put_contents("i".  rand(0, 50).".png", $data);
  

  var canvasId = chart.id + '-canvas';
  var canvasDownloadId = chart.id + '-download-canvas';
  var canvasHtml = Ext.String.format('<canvas id="{0}" width="{1}" height="{2}"></canvas><a id="{3}"/>',
  canvasId,
  chart.getWidth(),
  chart.getHeight(),
  canvasDownloadId);
  var canvasElement = reportBuilder.add({ html: canvasHtml });
  
  var canvas = document.getElementById(canvasId);
  
  var canvasDownload = document.getElementById(canvasDownloadId);
  canvasDownload.href = chart.getImage().data;
  canvasDownload.download = 'chart';
  
  canvasDownload.click();
  

  <!DOCTYPE HTML >
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title> #SAVE_CANVAS_TEST# </title>
      <meta 
          name   ="author" 
          content="John Mark Isaac Madison"
      >
      <!-- EMAIL: J4M4I5M7 -[ＡＴ]- Hotmail.com -->
  </head>
  <body>
  
  <div id="about_the_code">
      Illustrates:
      <ol>
      <li>How to save a canvas from HTML page.     </li>
      <li>How to save a dynamically created canvas.</li>
      </ol>
  </div>
  
  <canvas id="DOM_CANVAS" 
          width ="300" 
          height="300"
  ></canvas>
  
  <div id="controls">
      <button type="button" style="width:300px;"
              onclick="obj.SAVE_CANVAS()">
          SAVE_CANVAS ( Dynamically Made Canvas )
      </button>
  
      <button type="button" style="width:300px;"
              onclick="obj.SAVE_CANVAS('DOM_CANVAS')">
          SAVE_CANVAS ( Canvas In HTML Code )
      </button>
  </div>
  
  <script>
  var obj = new MyTestCodeClass();
  function MyTestCodeClass(){
  
      //Publically exposed functions:
      this.SAVE_CANVAS = SAVE_CANVAS;
  
      //:Private:
      var _canvas;
      var _canvas_id = "ID_OF_DYNAMIC_CANVAS";
      var _name_hash_counter = 0;
  
      //:Create Canvas:
      (function _constructor(){
          var D   = document;
          var CE  = D.createElement.bind(D);
          _canvas = CE("canvas");
          _canvas.width = 300;
          _canvas.height= 300;
          _canvas.id    = _canvas_id;
      })();
  
      //:Before saving the canvas, fill it so
      //:we can see it. For demonstration of code.
      function _fillCanvas(input_canvas, r,g,b){
          var ctx = input_canvas.getContext("2d");
          var c   = input_canvas;
  
          ctx.fillStyle = "rgb("+r+","+g+","+b+")";
          ctx.fillRect(0, 0, c.width, c.height);
      }
  
      //:Saves canvas. If optional_id supplied,
      //:will save canvas off the DOM. If not,
      //:will save the dynamically created canvas.
      function SAVE_CANVAS(optional_id){
  
          var c = _getCanvas( optional_id );
  
          //:Debug Code: Color canvas from DOM
          //:green, internal canvas red.
          if( optional_id ){
              _fillCanvas(c,0,255,0);
          }else{
              _fillCanvas(c,255,0,0);
          }
  
          _saveCanvas( c );
      }
  
      //:If optional_id supplied, get canvas
      //:from DOM. Else, get internal dynamically
      //:created canvas.
      function _getCanvas( optional_id ){
          var c = null; //:canvas.
          if( typeof optional_id == "string"){
              var id = optional_id;
              var  d = document;
              var c  = d.getElementById( id );
          }else{
              c = _canvas; 
          }
          return c;
      }
  
      function _saveCanvas( canvas ){
          if(!window){ alert("[WINDOW_IS_NULL]"); }
  
          //:We want to give the window a unique
          //:name so that we can save multiple times
          //:without having to close previous
          //:windows.
          _name_hash_counter++              ; 
          var NHC = _name_hash_counter      ;
          var URL = 'about:blank'           ;
          var name= 'UNIQUE_WINDOW_ID' + NHC;
          var w=window.open( URL, name )    ;
  
          if(!w){ alert("[W_IS_NULL]");}
  
          //:Create the page contents,
          //:THEN set the tile. Order Matters.
          var DW = ""                        ;
          DW += "<img src='"                 ;
          DW += canvas.toDataURL("image/png");
          DW += "' alt='from canvas'/>"      ;
          w.document.write(DW)               ;
          w.document.title = "NHC"+NHC       ;
  
      }
  
  }//:end class
  
  </script>
  
  </body>
  <!-- In IE: Script cannot be outside of body.  -->
  </html>
  

  function DownloadCanvasAsImage(){
      let downloadLink = document.createElement('a');
      downloadLink.setAttribute('download', 'CanvasAsImage.png');
      let canvas = document.getElementById('myCanvas');
      let dataURL = canvas.toDataURL('image/png');
      let url = dataURL.replace(/^data:image\/png/,'data:application/octet-stream');
      downloadLink.setAttribute('href', url);
      downloadLink.click();
  }
  

  function DownloadCanvasAsImage(){
      let downloadLink = document.createElement('a');
      downloadLink.setAttribute('download', 'CanvasAsImage.png');
      let canvas = document.getElementById('myCanvas');
      canvas.toBlob(function(blob) {
        let url = URL.createObjectURL(blob);
        downloadLink.setAttribute('href', url);
        downloadLink.click();
      });
  }
  

  function prepDownload(a, canvas, name) {
      a.download = name
      a.href = canvas.toDataURL()
  }
  

  <a href="#" onclick="prepDownload(this, document.getElementById('canvasId'), 'imgName.png')">Download</a>
  <canvas id="canvasId"></canvas>