cómo guardar el lienzo como imagen png?

Question

Tengo un elemento de lienzo con un dibujo y quiero crear un botón que, al hacer clic, guarde la imagen como un archivo png. Por lo tanto, debe abrir el cuadro de guardar, abrir, cerca de diálogo ...

lo hago usando este código

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

Pero cuando lo pruebo en IE9, una nueva ventana se abre diciendo que "el página web no se puede mostrar" y la dirección URL de la misma es:

datos: image/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 + um/+ 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

Alguien sabe cómo solucionar ¿esta?

Answer 1

probar esto:

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

Esto muestra la imagen del lienzo sobre nueva página, pero si tiene la configuración open popup in new tab se nota about:blank en la barra de direcciones.

EDIT: - aunque window.open("<img src='"+ c.toDataURL('image/png') +"'/>") no funciona en FF o Chrome, a raíz de las obras, aunque la representación es algo diferente de lo que se muestra en la lona, ​​creo que la transparencia es el problema:

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

Answer 2

FileSaver.js debe ser capaz de ayuda aquí

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

Answer 3

Quizás descubrí una forma mejor de no forzar al usuario a presionar el botón derecho del ratón "guardar imagen como". solo en vivo, dibuje el código canvas base64 en el href del enlace y modifíquelo para que la descarga se inicie automáticamente. No sé si su navegador universal es compatible, pero debería funcionar con los principales/nuevos navegadores.

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

}); 

dude en envolver la mínima alrededor de cualquier cosa que desee, espero que ayude un poco

Answer 4

que utiliza esta solución para establecer el nombre archivo:

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 5

Prueba esto:

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

Usted puede poner este código en la consola en Firefox o chrom y después cambió su nombre de etiqueta canvas en esta secuencia de comandos y ejecutar esta secuencia de comandos en la consola.

Después de ejecutar este código, verá el enlace como texto "haga clic aquí" en la parte inferior de la página html. haga clic en este enlace y abra el dibujo del lienzo como una imagen PNG en una ventana nueva, guarde la imagen.

Answer 6

he tenido este problema y esta es la mejor solución sin ninguna biblioteca externa o adicionales de secuencias de comandos: de las etiquetas JavaScript o archivo crear esta función: Aquí se supone que el lienzo es su lienzo:

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

    } 

En la parte del cuerpo de su HTML especifique el botón:

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

Esto funciona y el enlace de descarga se parece a un botón. Probado en Firefox y Chrome.

Answer 7

Presentar un formulario que contiene una entrada con el valor de toDataURL lienzo ('image/png'), por ejemplo

// JavaScript

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

Introducir el valor de la dirección URL de su campo oculto de formulario elemento.

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

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

Answer 9

completa de Trabajo Código HTML. Cortar + pegar en nuevo archivo .HTML:

contiene dos ejemplos:

1. lienzo en archivo HTML.
2. Lona creada dinámicamente con Javascript.

Probado en:

1. Chrome
2. Internet Explorer
3. * Edge (nombre del título no se muestra)
4. Firefox
5. 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>