Zapisywanie html2canvas jako jpeg bez otwierania w przeglądarce

Question

Próbuję utworzyć przycisk screengrab, który tworzy obraz użytkownika użytkownika document.body.

Idealnie użytkownik miałby wtedy opcję zapisania obrazu lokalnie jako .jpeg.

Zbliża się do tworzenia potrzebnej funkcjonalności przy użyciu biblioteki html2canvas.

function screenGrabber() { 
    html2canvas([document.body], { 
    logging: true, 
    useCORS: true, 
    onrendered: function (canvas) {    

     img = canvas.toDataURL("image/jpg"); 

     console.log(img.length); 
     console.log(img); 

     window.location.href=img; // it will save locally 
    } 
}); 

} 

Aby sprawdzić, czy to jest sprawne byłem otwierając zmienną img w nowym oknie przeglądarki. Obraz nie renderuje się całkowicie i domyślam się, że to dlatego, że jego długość wynosi ponad 30 000 znaków.

Jak mogę lepiej dać użytkownikowi opcję zapisania płótna lokalnie po wydarzeniu onrendered?

Answer 1

funkcją downloader znacznie ułatwia:

function download(strData, strFileName, strMimeType) { 
    var D = document, 
     A = arguments, 
     a = D.createElement("a"), 
     d = A[0], 
     n = A[1], 
     t = A[2] || "text/plain"; 

    //build download link: 
    a.href = "data:" + strMimeType + "," + escape(strData); 


    if (window.MSBlobBuilder) { 
     var bb = new MSBlobBuilder(); 
     bb.append(strData); 
     return navigator.msSaveBlob(bb, strFileName); 
    } /* end if(window.MSBlobBuilder) */ 



    if ('download' in a) { 
     a.setAttribute("download", n); 
     a.innerHTML = "downloading..."; 
     D.body.appendChild(a); 
     setTimeout(function() { 
      var e = D.createEvent("MouseEvents"); 
      e.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
      a.dispatchEvent(e); 
      D.body.removeChild(a); 
     }, 66); 
     return true; 
    } /* end if('download' in a) */ 
    ; //end if a[download]? 

    //do iframe dataURL download: 
    var f = D.createElement("iframe"); 
    D.body.appendChild(f); 
    f.src = "data:" + (A[2] ? A[2] : "application/octet-stream") + (window.btoa ? ";base64" : "") + "," + (window.btoa ? window.btoa : escape)(strData); 
    setTimeout(function() { 
     D.body.removeChild(f); 
    }, 333); 
    return true; 
} /* end download() */ 





function screenGrabber() { 
    html2canvas([document.body], { 
    logging: true, 
    useCORS: true, 
    onrendered: function (canvas) {    

     img = canvas.toDataURL("image/jpeg"); 

     download(img, "modified.jpg", "image/jpeg"); 
    } 
}); 

}