Generare l'immagine di un div e Salva con nome

Question

mi piacerebbe creare un "Salva immagine" pulsante di input che:

1. prendere una schermata di un div
2. chiedono di "Salva con nome" su il computer dell'utente

ho trovato come creare uno schermo di un tuffo utilizzando html2canvas e per aprirlo in una nuova scheda, che funziona perfettamente:

function printDiv2(div) 
{ 
    html2canvas((div), { 
     onrendered: function(canvas) { 
      var img = canvas.toDataURL(); 
      window.open(img); 
     } 
    }); 
} 

Ma per te Salva come parte, è una specie di parte difficile ... Ho trovato argomenti interessanti, dato che sono nuovo nella codifica JS (e oggetto), sono un po 'confuso ... Penso dovrò usare le FileSaver.js e per creare un nuovo blob http://eligrey.com/blog/post/saving-generated-files-on-the-client-side/

Ma io non capisco come implementare le saveAs nei miei html2canvas, come lanciare correttamente un nuovo blob ...

function printDiv2(div) 
{ 
    html2canvas((div), { 
     onrendered: function(canvas) { 
      var img = canvas.toDataURL(); 
      window.open(img); 

      var blob = new Blob(img, {type: "image/jpeg"}); 
      var filesaver = saveAs(blob, "my image.png"); 
     } 
    }); 
} 

Inoltre ho provato a fare qualcosa con questo, estraendo i Base64 generati URL, ma è troppo complicato per me capire everyting: http://bl.ocks.org/nolanlawson/0eac306e4dac2114c752

Ma qualcuno mi dà qualche consiglio e mi aiuta per favore?

Answer 1

Qui è il codice finale, se si può ti aiuta:

function PrintDiv(div) 
{ 
    html2canvas((div), { 
     onrendered: function(canvas) { 
      var myImage = canvas.toDataURL(); 
      downloadURI(myImage, "MaSimulation.png"); 
     } 
    }); 
} 

function downloadURI(uri, name) { 
    var link = document.createElement("a"); 

    link.download = name; 
    link.href = uri; 
    document.body.appendChild(link); 
    link.click(); 
    //after creating link you should delete dynamic link 
    //clearDynamicLink(link); 
} 

Answer 2

Hai guardato

http://eligrey.com/demos/FileSaver.js/

sembra che fa ciò che è necessario

Answer 3

Si potrebbe fare questo approccio:

//Creating dynamic link that automatically click 
    function downloadURI(uri, name) { 
     var link = document.createElement("a"); 
     link.download = name; 
     link.href = uri; 
     link.click(); 
     //after creating link you should delete dynamic link 
     //clearDynamicLink(link); 
    } 

    //Your modified code. 
    function printToFile(div) { 
     html2canvas(div, { 
      onrendered: function (canvas) { 
       var myImage = canvas.toDataURL("image/png"); 
       //create your own dialog with warning before saving file 
       //beforeDownloadReadMessage(); 
       //Then download file 
       downloadURI("data:" + myImage, "yourImage.png"); 
      } 
     }); 
    }