Tạo một hình ảnh của một div và Save as

Question

Tôi muốn tạo ra một nút đầu vào "Lưu hình ảnh" rằng:

1. chụp màn hình của một div
2. yêu cầu "Save as" trên máy tính của người dùng

tôi đã tìm thấy làm thế nào để tạo ra một màn hình của một lặn sử dụng html2canvas và để mở nó trong một tab mới, nó hoạt động một cách hoàn hảo:

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

Nhưng đối với ngươi Lưu như một phần, là một loại phần khó khăn ... Tôi đã tìm thấy các chủ đề thú vị, vì tôi mới trong JS (và đối tượng) mã hóa, tôi là một chút bối rối ... Tôi nghĩ rằng tôi sẽ phải sử dụng các FileSaver.js và để tạo ra một blob mới http://eligrey.com/blog/post/saving-generated-files-on-the-client-side/

Nhưng tôi không nhận được như thế nào để thực hiện các SaveAs trong html2canvas của tôi, làm thế nào để cast đúng một blob mới ...

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

Ngoài ra tôi đã cố gắng để làm điều gì đó với điều này, bằng cách chiết base64 tạo URL, nhưng nó quá phức tạp đối với tôi để hiểu everyting: http://bl.ocks.org/nolanlawson/0eac306e4dac2114c752

Nhưng ai đó cho tôi một vài lời khuyên và giúp tôi xin vui lòng?

Answer 1

Dưới đây là mã cuối cùng, nếu nó có thể giúp bạn:

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

Bạn đã nhìn

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

Hình như nó không những gì bạn cần

Answer 3

Bạn có thể làm phương pháp này:

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