How to save canvas as a png image?

Question

I have a canvas element with a picture in it, and I want to create a button that, when clicked on, will save the image as a png file. Therefore, it should open the save, open, close ... dialog box.

I am using this code

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

But when I test it in IE9, a new window opens saying "the web page cannot be displayed" and its URL:

data: images / PNG; base64, iVBORw0KGgoAAAANSUhEUgAAAmAAAABpCAYAAACd + 58xAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAADRwSURBVHhe7V0HgBVF0q7ZJSlJwRxAPUFRD39RFLN34qGnnomoqIjhzBlFPROIgsoZzogR5AQEzJ4BPFAUEUwgJjgQkCQKooggaf / 6el6 / 6ZnpSW / zUn237u5MdXX1172 + z6rqaqeEG6VsJet + PDW / vkdrfx3H3yfT2tVzaP26X6hkw1q / Boei / 280 / 29JwznZxJPUyXtBQBAQBAQBQaBcECjefmi56BWlZYtAeqajx / WokfrJYEqOIikOFRfXoVq161PtOk2odu0t + ectqKiojnrntWhC46QhYOtXfUarl79Ivy9 / ldau + H + Tx / 8b2SbjJ07pWFQy2Uqnp2yXSrQJAoKAICAICALJCAgBS8ao8iTi / UvpSZlBxiwqwWOKimsxCWtEdettR3XqbEfFtRonkrBYArZh3fe0 + senadWyEbRm1UzasP53K45ZiFc84RKyVXkbVUYWBAQBQUAQyIqAELCsiFW2fDQpSyZk8UQMMysqKmaPWCOqt8mOVK / eTuQU1YuccCQBW7dyIq38 / j5a / dg / ad3a5QGXmqsvLfGKJl0ZCFdONEOPyl5lGV8QEAQEAUGghiMgBKzqLHCeHqVOrILtduF4MpZExEqoVq167A3bmjap34J / bmoFqcj2dM3Pr9GK + b1p5bJXmXz9nEC + 3FiorYF4hcmXlo + + GURK gm / + e + QoVWfxxRJBQBAQBAQBQUAQqBwE8uzCwiMiaEqOWYR5jJ2 / 6Hl58nYHk0Pr1v1Ov62cTytXfE5r1yyyc6RgDhjI16 + L + tLqFZ9xnteGUKc0Xi876YpYkFDCfpqFEz9YGpRERhAQBAQBQaB8ERAPWPnim157JreX6 / eK7eJ / Ge0RS8oPc 9gT1pTqN2jFocltfdPxecBU2HH xgBTky + 71CjPGCO + YyU4j0TU9ZcGf0y + JSAoCgoAgIAgIAoJATUcgG2dQ0jpKZ / Xp + PlLtEcs3huGQhO / r17K3rBvuGrEUt8i5HPAkHC / Yt6lKuwYKiuRM9TtGbY0rcerTBLwC / KY1fSNJ / MTBAQBQUAQqAwExANWGaiHx0z2aJl9CknET + MRc2XsVSKKaNP6O1CDhvtwYn5dJZf3gOG0IxLuS0e + LB4vw9sVhiwmHywmF6xqLLdYIQgIAoKAICAICAJVAQHTo2XmkNtzv6K5R7RXLOwRs3MaW + 47SNkG9oRxZQmun6qbImCo84VSE + 5pR3 / zvFZJni / 7e8tTHiCeqCkAqsKKig2CgCAgCAgCgoAgUG0RCBKzMLmwkzHdL4pk4XlUAn7Uu3XrVtPqVfO4lurPSq0KQa5cdAv9snBgqM5XFPlKSsSPM8o3mcxES2hZtf0rEMMFAUFAEKiBCEgIsqotavpk / OiwZViHPQk / LgHfHo5EnbCGjVpxeYo9yNmw9oeSn2YeTatWTPNzozzX8ZOeWPJlJVRJnrOoxUtJtmLEUmqoartH7BEEBAFBQBCoJggIASu / hUqkUokC2rZkwSSCBU12wpadhNXbpAk13vwwKlJ3O / L1QmYrxPNlDxuGyVtyIn6K8KSZHwY3XsRX + W0L0VyTEPjwM6KuFxN1uiB6Vkv48MpdjxLt9ieieQvscuvWE13eh2jnQ9zv + F2aICAICAKCQGEIRH22559H5IqnDTMGeU / SgUJ7WNLjOVH9g8 / Xrv2Fa4P9SM6K7y4t + WXRw76sfVc42fPV936iJ5 + LKrbqTU0P3rA + 0dZbEh20L9HJHYj23I2oVrHFT5U5NFnY4m6svUA0Pvo8efbvjCBqtr0nN + IVot4Dkvv1v5aoy / HJcpUpsfI3olffdknV0uWuJfv9kWjkw55VIFAfM073PE4E kqZbEBf9HMTs8C6e3KhHiPbdqzJnKWMLAoJAeSMgHrDyRrj0 + rOEGvV oYY9Y0inIeE + YQQ + cqGGj3dgDtvJjC / mKm7BHmG68lGjO +

Does anyone know how to fix this?

Answer 1

try the following:

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

This shows the image from the canvas on a new page, but if you have the open popup in new tab option, it shows about:blank in the address bar.

EDIT: - although window.open("<img src='"+ c.toDataURL('image/png') +"'/>") does not work in FF or Chrome, after work, although the rendering is slightly different than what is shown on the canvas, I think the transparency problem:

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

Answer 2

FileSaver.js should help you here.

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

Answer 3

I used this solution to set the file name :

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

Answer 4

I had this problem and this is the best solution without any external or additional script libraries: In the tags or Javascript file create this function: Suppose the canvas is your canvas:

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

In the main part of your HTML, specify the button:

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

This working and downloadable link looks like a button. Tested in Firefox and Chrome.

Answer 5

Perhaps I have found a better way not to force the user to right-click and "save image as." In real time, draw the canvas base64 code in the href link and change it so that the download starts automatically. I don't know if it is universally compatible with the browser, but it should work with major / new browsers .

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

You can wrap <a> around anything you want.

Answer 6

Try the following:

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

You can simply put this code in the console in firefox or chrom and after changing the id of the canvas tag in this script above and run the console script.

After executing this code, you will see a link in the form of the text "click here" at the bottom of the html page. click on this link and open the canvas image as a PNG image in a new window, save the image.

Answer 7

Submit a form containing an input with a value of canvas toDataURL ('image / png'), for example

// JAVASCRIPT

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

Paste the URL value into your hidden input in the form element.

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

Answer 8

Full working HTML . Cut + Paste into a new .HTML file:

Contains two examples:

• Canvas in the HTML file.
• Canvas dynamically created using Javascript.

Tested in:

• Chrome
• Internet explorer
• * Edge (name of the name is not displayed)
• Firefox
• Opera

---

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

Answer 9

I managed to save the canvas image in IE, CH, FF with the following code in 2019:

 <html> <body> <canvas id="myCanvas" style="border: 1px solid black"> </canvas> <input type="button" id="myButton" value="Save Canvas" onclick="saveCanvas()" /> <script> canvas = document.getElementById('myCanvas'); ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.rect(5, 10, 15, 20); ctx.stroke(); function saveCanvas() { if (canvas.msToBlob) { // IE blob = canvas.msToBlob(); window.navigator.msSaveBlob(blob, 'canvas.png'); } else { // CH, FF image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream'); window.location.href = image; } } </script> </body> </html> 

Answer 10

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