如何将画布另存为 PNG 图像

试试这个：

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'/>");

这会在新页面上显示画布上的图像，但如果open popup in new tab设置，它会在地址栏中显示about:blank。

编辑：- 虽然window.open("<img src='"+ canvas.toDataURL('image/png') +"'/>")在FF或Chrome中不起作用，但以下作品虽然渲染与画布上显示的内容有些不同，但我认为透明度是问题所在：

window.open(canvas.toDataURL('image/png'));

FileSaver.js应该能够在这里为您提供帮助。

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

要容纳所有三点：

• 按钮
• 将图像另存为 PNG 文件
• 打开"保存、打开、关闭"对话框

文件对话框是浏览器中的一个设置。

对于按钮/保存部分，在单击时将以下功能（从其他答案归结为按钮）分配给您的按钮：

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

代码笔示例

另一种更简洁的方法是使用 Canvas.toBlob（）：

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

代码笔示例

这两种解决方案都不是 100% 跨浏览器兼容的，因此请检查客户端

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

.HTML：

<a href="#" id="downloader" onclick="download()" download="image.png">Download!</a>
<canvas id="canvas"></canvas>

JavaScript：

function download(){
    document.getElementById("downloader").download = "image.png";
    document.getElementById("downloader").href = document.getElementById("canvas").toDataURL("image/png").replace(/^data:image'/[^;]/, 'data:application/octet-stream');
}

我遇到了这个问题，这是没有任何外部或其他脚本库的最佳解决方案：在 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中测试过。

我可能发现了一种更好的方法，可以不强迫用户右键单击并"将图像另存为"。实时将画布 base64 代码绘制到链接的href并对其进行修改，以便下载将自动开始。我不知道它是否普遍兼容浏览器，但它应该适用于主要/新浏览器。

var canvas = document.getElementById('your-canvas');
    if (canvas.getContext) {
        var C = canvas.getContext('2d');
    }
$('#your-canvas').mousedown(function(event) {
    // feel free to choose your event ;) 
    // just for example
    // var OFFSET = $(this).offset();
    // var x = event.pageX - OFFSET.left;
    // var y = event.pageY - OFFSET.top;
    // standard data to url
    var imgdata = canvas.toDataURL('image/png');
    // modify the dataUrl so the browser starts downloading it instead of just showing it
    var newdata = imgdata.replace(/^data:image'/png/,'data:application/octet-stream');
    // give the link the values it needs
    $('a.linkwithnewattr').attr('download','your_pic_name.png').attr('href',newdata);
});

您可以将<a>包裹在您想要的任何东西上。

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

/JAVASCRIPT

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

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

//.PHP

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

试试这个：

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

您可以将此代码放在 Firefox 或 chrom 的控制台中，然后在上述脚本中更改画布标签 ID，然后在控制台中运行此脚本。

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

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

包含两个示例：

1. HTML 文件中的画布。
2. 使用 Javascript 动态创建的画布。

测试于：

1. 铬
2. IE浏览器
3. *边缘（标题名称不显示）
4. 火狐
5. 歌剧

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

我真的很喜欢 Tovask 的答案，但由于函数的名称为 download，它不起作用（这个答案解释了原因）。我也看不出替换"数据：图像/..."与"数据：应用程序/..."。

以下代码已在Chrome和Firefox中进行了测试，似乎在两者中都可以正常工作。

JavaScript：

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

.HTML：

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

我的解决方案通过vue和异步支持

async downloadImage () {
  const canvas = this.$refs.canvas
  const blob = await new Promise(resolve => canvas.toBlob(resolve))
  const downloadLink = document.createElement('a')
  downloadLink.href = window.URL.createObjectURL(blob)
  downloadLink.download = 'mycanvasimage.png'
  downloadLink.click()
}

一个衬里应该这样做：

function downloadCanvasAsImage(canvas)
{
    // open canvas as image in new window
    canvas.toBlob((blob) => window.open(URL.createObjectURL(blob), '_blank'));
}

通过Javascript或Jquery传递画布，如var canvas = $('canvas')[0];

此解决方案符合内容安全策略。

演职员表

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