ein Bild eines div und Speichern generieren als

Question

Ich mag würde eine Eingabe-Taste „Bild speichern“, das schaffen:

Schuss

1. nehmen einen Bildschirm eines div
2. bitten auf „Speichern unter“ der Computer des Benutzers

ich habe festgestellt, wie ein Bildschirm eines Tauchgangs mit html2canvas erstellen und sie in einem neuen Tab zu öffnen, es funktioniert perfekt:

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

Aber für dich Rette als Teil, ist eine Art des schwierigen Teils ... Ich habe interessante Themen gefunden, da ich neu in der JS- (und Objekt-) Programmierung bin, bin ich ein bisschen verwirrt ... denke ich ich werde die FileSaver.js habe zu verwenden und einen neuen Blob http://eligrey.com/blog/post/saving-generated-files-on-the-client-side/

Aber ich nicht bekommen, zu erstellen, wie die saveAs in meinem html2canvas zu implementieren, wie zu werfen richtig ein neues 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"); 
     } 
    }); 
} 

auch habe ich versucht, etwas damit zu tun, indem sie die base64-URL generiert extrahieren, aber es ist zu kompliziert für mich every zu verstehen: http://bl.ocks.org/nolanlawson/0eac306e4dac2114c752

Aber jemand mir ein paar Tipps geben und mir bitte helfen?

Answer 1

Hier ist der endgültige Code wird, wenn es kann hilft Ihnen:

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

Haben Sie bei

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

sah Sieht aus wie es das tut, was Sie

Answer 3

Sie müssen diesen Ansatz tun könnte:

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