html2canvas che salva come jpeg senza aprire nel browser

Question

Sto provando a creare un pulsante Screengrab che crei un'immagine dell'utente document.body.

Idealmente l'utente avrebbe quindi un'opzione per salvare l'immagine localmente come .jpeg.

Mi sto avvicinando alla creazione della funzionalità di cui ho bisogno utilizzando la libreria 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 
    } 
}); 

} 

per verificare che questo sia working mi è stato aprendo la variabile img in una nuova finestra del browser. L'immagine non viene visualizzata completamente e immagino sia perché la lunghezza è di oltre 30.000 caratteri.

In che modo è meglio fornire all'utente un'opzione per salvare localmente il canvas dopo l'evento onrendered?

Answer 1

una funzione downloader rende molto più facile:

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

}