如何將畫布保存爲PNG圖像？

我有一個畫圖元素，並且我想創建一個按鈕，當點擊它時，它會將圖像保存爲png文件。所以應該打開保存，打開，關閉對話框...如何將畫布保存爲PNG圖像？

我使用此代碼

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

它做但是當我測試它在IE9中，一個新的窗口打開並稱」網頁無法顯示」和它的URL爲：

數據：圖像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAmAAAABpCAYAAACd + 58xAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAADRwSURBVHhe7V0HgBVF0q7ZJSlJwRxAPUFRD39RFLN34qGnnomoqIjhzBlFPROIgsoZzogR5AQEzJ4BPFAUEUwgJjgQkCQKooggaf/6el6/6ZnpSW/zUn237u5MdXX1172 + z6rqaqeEG6VsJet + PDW/vkdrfx3H3yfT2tVzaP26X6hkw1q/BoeI/280/29JwznZxJPUyXtBQBAQBAQ BQaBcECjefmi56BWlZYtAeqajx/WokfrJYEqOIikOFRfXoVq161PtOk2odu0t + ectqKiojnrntWhC46QhYOtXfUarl79Ivy9/ldau + H + TX/8b2SbjJ07pWFQy2Uqnp2yXSrQJAoKAICAICALJCAgBS8ao8iTi/UvpSZlBxiwqwWOKimsxCWtEdettR3XqbEfFtRonkrBYArZh3fe0 + senadWyEbRm1UzasP53K45ZiFc84RKyVXkbVUYWBAQBQUAQyIqAELCsiFW2fDQpSyZk8UQMMysqKmaPWCOqt8mOVK/eTuQU1YuccCQBW7dyIq38/J5A/fN的/ ad3a5QGXmqsvLfGKJl0ZCFdONEOPyl5lGV8QEAQEAUGghiMgBKzqLHCeHqVOrILtduF4MpZExEqoVq167A3bmjap34J/bmoFqcj2dM3Pr9GK + b1p5bJXmXz9nEC + 3FiorYF4hcmXlo + gUrk +微米/ + E + QoVWfxxRJBQBAQBAQBQUAQqBwE8uzCwiMiaEqOWYR5jJ2/6Hl58nYHk0Pr1v1Ov62cTytXfE5r1yyyc6RgDhjI16 + L + tLqFZ9xnteGUKc0Xi876YpYkFDCfpqFEz9YGpRERhAQBAQBQaB8ERAPWPnim157JreX6/eK7eJ/Ge0RS8oPc9gT1pTqN2jFocltfdPxecBU2HHxgBTky + 71CjPGCO + YyU4j0TU9ZcGf0y + JSAoCgoAgIAgIAoJATUcgG2dQ0jpKZ/XP + PlLtEcs3huGQhO/r17K3rBvuGrEUt8i5HPAkHC/Yt6lKuwYKiuRM9TtGbY0rcerTBLwC/KY1fSNJ/MTBAQBQUAQqAwExANWGaiHx0z2aJl9CknET + MRc2XsVSKKaNP6O1CDhvtwYn5dJZf3gOG0IxLuS0e + LB4vw9sVhiwmHywmF6xqLLdYIQgIAoKAICAICAJVAQHTo2XmkNtzv6K5R7RXLOwRs3MaW + 47SNkG9oRxZQmun6qbImCo84VSE + 5 PR3/zvFZJni/7e8tTHiCeqCkAqsKKig2CgCAgCAgCgoAgUG0RCBKzMLmwkzHdL4pk4XlUAn7Uu3XrVtPqVfO4lurPSq0KQa5cdAv9snBgqM5XFPlKSsSPM8o3mcxES2hZtf0rEMMFAUFAEKiBCEgIsqotavpk/OiwZViHPQk/LgHfHo5EnbCGjVpxeYo9yNmw9oeSn2YeTatWTPNzozzX8ZOeWPJlJVRJnrOoxUtJtmLEUmqoartH7BEEBAFBQBCoJggIASu/hUqkUokC2rZkwSSCBU12wpadhNXbpAk13vwwKlJ3O/L1QmYrxPNlDxuGyVtyIn6K8KSZHwY3XsRX + W0L0VyTEPjwM6KuFxN1uiB6Vkv48MpdjxLt9ieieQvscuvWE13eh2jnQ9zv + F2aICAICAKCQGEIRH22559H5IqnDTMGeU/SgUJ7WNLjOVH9g8/Xrv2Fa4P9SM6K7y4t + WXRw76sfVc42fPV936iJ5 + LKrbqTU0P3rA + 0dZbEh20L9HJHYj23I2oVrHFT5U5NFnY4m6svUA0Pvo8efbvjCBqtr0nN + IVot4Dkvv1v5aoy/HJcpUpsfI3olffdknV0uWuJfv9kWjkw55VIFAfM073PE4EkqZbEBf9HMTs8C6e3KhHiPbdqzJnKWMLAoJAeSMgHrDyRrj0 + rOEGvVoYY9Y0inIeE + YQQ + cqGGj3dgDtvJjC/mKm7BHmG68lGjO + 0T

任何人都知道如何解決這個？

來源

2012-06-20 sneaky

可能重複[如何將svg畫布保存到本地文件系統]（http://stackoverflow.com/questions/2483919/how-to-save-svg-canvas-to-local-filesystem） – Philipp

試試這個：

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

這顯示了新的一頁在畫布上的形象，但如果你有open popup in new tab設置它顯示about:blank在地址欄中。

編輯： - 儘管window.open("<img src='"+ c.toDataURL('image/png') +"'/>")不FF或Chrome瀏覽器，下面的作品雖然渲染是從什麼是在畫布上顯示有些不同，我認爲透明度是問題：

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

來源

2012-06-20 03:20:05 TheVillageIdiot

這隻適用於罰款：http://jsfiddle.net/VVN8X/1/ – Blender

它在這個命令崩潰：var w = window.open（'about：blank'，'canvas from canvas'）; – sneaky

我改變了它：var w = window.open（'about：blank'）;,現在圖像在一個新窗口中打開，但是我怎樣才能得到它，以便保存關閉盒， t想要不得不右鍵點擊圖像，並保存爲... – sneaky

FileSaver.js應該能夠在這裏幫助你。

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

來源

2012-06-20 05:29:41 Maurice

這似乎並不工作IE9，http：//eligrey.com/demos/FileSaver.js/ – sneaky

+10

有很多東西在IE9中不起作用:-（很多東西可以用polyfill修復，但是恐怕這超出了這個範圍。我可以建議使用谷歌瀏覽器框架爲使用IE瀏覽器的用戶 – Maurice

完美作品 – isuru

我也許發現了一個更好的方法，不要強迫用戶按右鍵「保存圖片爲」。只需將畫布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); 

});

隨意包裹你想周圍的任何東西的一個，希望有點幫助

來源

2013-12-17 12:13:24

下載屬性不是跨瀏覽器 http://caniuse.com/download –

我用這個解決方案設置文件名：

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

來源

2015-04-20 18:59:11 Tovask

試試這個：

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和改變你的canvas標籤ID在這上面的腳本後，並在控制檯運行此腳本。

執行此代碼後，您將在html頁面底部看到文本爲「click here」的鏈接。點擊此鏈接並在新窗口中將畫布圖形打開爲PNG圖像保存圖像。

來源

2016-05-25 05:47:27

我有這個問題，這是一個沒有任何外部或其他腳本庫的最佳解決方案： 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測試。

來源

2017-03-24 13:27:32 Plcode

不幸的是，在IE 11中清除屏幕並將URL更改爲： data：image/octet-stream; base64，iVBORw – Mike

提交包含用帆布toDataURL（「圖像/ PNG」），例如價值

// JAVASCRIPT

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

輸入形式插入網址的價值就表格隱藏輸入元件。

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

來源

2017-04-21 23:09:07

這很好用，除了JavaScript函數'canvas.toDataUrl（...）'應該是'canvas.toDataURL（... ）'。 – Brannon

-1

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

來源

2017-09-20 02:53:02

全部工作的HTML代碼。剪切+粘貼到新的.HTML文件：

包含了兩個例子：

帆布在HTML文件。
使用Javascript動態創建畫布。

測試了：

鉻
的Internet Explorer
*邊緣（標題名稱顯示不出來）
火狐
歌劇

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

來源

2017-12-27 21:38:45

如何將畫布保存爲PNG圖像？

回答

相關問題