Generowanie obrazu div i zapisać jako

Question

Chciałbym utworzyć przycisk INPUT „Zapisz obrazek”, że:

1. zrobić zrzut ekranu div
2. zapytać „Zapisz jako” na komputer użytkownika

Znalazłem jak stworzyć ekran nurkowania przy użyciu html2canvas i otworzyć go w nowej karcie, działa perfekcyjnie:

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

Ale dla ciebie Zapisz jako część, to rodzaj trudnej części ... Znalazłem interesujące tematy, ponieważ jestem nowy w kodowaniu JS (i obiektowym), jestem trochę zdezorientowany ... Myślę, że muszę użyć FileSaver.js i utworzyć nową blob http://eligrey.com/blog/post/saving-generated-files-on-the-client-side/

Ale ja nie rozumiem jak wdrażać saveas w moich html2canvas, jak prawidłowo rzucać nowy kropelka ...

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

także starałem się coś z tym zrobić, przez ekstrakcję base64 generowane URL, ale to zbyt skomplikowane dla mnie do zrozumienia everyting: http://bl.ocks.org/nolanlawson/0eac306e4dac2114c752

Ale ktoś dał mi kilka wskazówek i pomóż mi proszę?

Answer 1

Oto ostateczny kod, jeśli to możliwe pomaga:

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

Czy spojrzał na

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

Wygląda na to, że robi to, co trzeba

Answer 3

Można zrobić to podejście:

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