come salvare la canvas come immagine png?

Ho un elemento canvas con un disegno e voglio creare un pulsante che, una volta cliccato, salverà l’immagine come un file png. Quindi dovrebbe aprire la finestra di dialogo salva, apri, chiudi …

Lo faccio usando questo codice

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

Ma quando lo provo in IE9, si apre una nuova finestra che dice “la pagina web non può essere visualizzata” e l’url di esso è:

Dati: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAmAAAABpCAYAAACd + 58xAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAADRwSURBVHhe7V0HgBVF0q7ZJSlJwRxAPUFRD39RFLN34qGnnomoqIjhzBlFPROIgsoZzogR5AQEzJ4BPFAUEUwgJjgQkCQKooggaf / 6el6 / 6ZnpSW / zUn237u5MdXX1172 + z6rqaqeEG6VsJet + PDW / vkdrfx3H3yfT2tVzaP26X6hkw1q / Boei / 280 / 29JwznZxJPUyXtBQBAQBAQBQaBcECjefmi56BWlZYtAeqajx / WokfrJYEqOIikOFRfXoVq161PtOk2odu0t + ectqKiojnrntWhC46QhYOtXfUarl79Ivy9 / ldau + h + tX / 8b2SbjJ07pWFQy2Uqnp2yXSrQJAoKAICAICALJCAgBS8ao8iTi / UvpSZlBxiwqwWOKimsxCWtEdettR3XqbEfFtRonkrBYArZh3fe0 + senadWyEbRm1UzasP53K45ZiFc84RKyVXkbVUYWBAQBQUAQyIqAELCsiFW2fDQpSyZk8UQMMysqKmaPWCOqt8mOVK / eTuQU1YuccCQBW7dyIq38 / J5A / fN / ad3a5QGXmqsvLfGKJl0ZCFdONEOPyl5lGV8QEAQEAUGghiMgBKzqLHCeHqVOrILtduF4MpZExEqoVq167A3bmjap34J / bmoFqcj2dM3Pr9GK + b1p5bJXmXz9nEC + 3FiorYF4hcmXlo + gurk + um / + e + QoVWfxxRJBQBAQBAQBQUAQqBwE8uzCwiMiaEqOWYR5jJ2 / 6Hl58nYHk0Pr1v1Ov62cTytXfE5r1yyyc6RgDhjI16 + L + tLqFZ9xnteGUKc0Xi876YpYkFDCfpqFEz9YGpRERhAQBAQBQaB8ERAPWPnim157JreX6 / eK7eJ / Ge0RS8oPc9gT1pTqN2jFocltfdPxecBU2HHxgB TKY + 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 / HJcpUpsfI3olffdknV0uWuJfv9kWjkw55VIFAfM073PE4EkqZbEBf9HMTs8C6e3KhHiPbdqzJnKWMLAoJAeSMgHrDyRrj0 + rOEGvVoYY 9Y0inIeE + YQQ + cqGGj3dgDtvJjC / mKm7BHmG68lGjO + 0T

Qualcuno sa come risolvere questo?

prova questo:

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

Mostra l’immagine dalla canvas su una nuova pagina, ma se hai un open popup in new tab mostra about:blank nella barra degli indirizzi.

EDIT: – anche se window.open("") non funziona in FF o Chrome, in seguito funziona anche se il rendering è leggermente diverso da quello viene mostrato su canvas, penso che la trasparenza sia il problema:

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

FileSaver.js dovrebbe essere in grado di aiutarti qui.

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

Ho usato questa soluzione per impostare il nome del file :

HTML:

 Download!  

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

Ho avuto questo problema e questa è la soluzione migliore senza librerie di script esterne o aggiuntive: nei tag Javascript o nel file creare questa funzione: assumiamo qui che la canvas è la tua 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); } 

Nella parte del corpo del tuo codice HTML specifica il pulsante:

  

Funziona e il link per il download sembra un pulsante. Testato su Firefox e Chrome.

Forse ho scoperto un modo migliore per non costringere l’utente a fare clic con il tasto destro e “salva l’immagine come”. Dal vivo disegnare il codice base64 della canvas nell’href del collegamento e modificarlo in modo che il download inizi automaticamente. Non so se è universalmente compatibile con il browser, ma dovrebbe funzionare con i principali / nuovi browser .

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

Puoi avvolgere il intorno a tutto ciò che vuoi.

Prova questo:

 jQuery('body').after('Click Here'); 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; } 

Puoi semplicemente inserire questo codice in console in firefox o chrom e dopo aver modificato l’ID del tag canvas in questo script sopra ed eseguire questo script in console.

Dopo l’esecuzione di questo codice vedrai il link come testo “clicca qui” nella parte inferiore della pagina html. clicca su questo link e apri il disegno su canvas come immagine PNG in una nuova finestra salva l’immagine.

Invia un modulo che contenga un input con valore di canvas a DataURL (‘image / png’) es

// JAVASCRIPT

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

Inserisci il valore dell’URL come input nascosto sull’elemento del modulo.

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

Codice HTML completo di lavoro . Taglia + incolla nel nuovo file .HTML:

Contiene due esempi:

  1. Tela in file HTML.
  2. Canvas creato dynamicmente con Javascript.

Testato in:

  1. Cromo
  2. Internet Explorer
  3. * Bordo (il nome del titolo non viene visualizzato)
  4. Firefox
  5. musica lirica

 < !DOCTYPE HTML >     #SAVE_CANVAS_TEST#      
Illustrates:
  1. How to save a canvas from HTML page.
  2. How to save a dynamically created canvas.
 var canvasId = chart.id + '-canvas'; var canvasDownloadId = chart.id + '-download-canvas'; var canvasHtml = Ext.String.format('', 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();