html2canvas在瀏覽器

Question

保存爲JPEG不打開我試圖創建一個用於創建用戶的document.body的圖像的screengrab按鈕。

理想情況下，用戶會再有一個選項保存到本地圖像作爲.jpeg。

我越來越接近我創建需要使用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 
    } 
}); 

} 

要驗證這是否正常工作，我一直在新的瀏覽器窗口中打開img變量。圖像沒有完全渲染，我猜測這是因爲它的長度超過了30,000個字符。

我如何能夠更好地爲用戶提供一個選項，onrendered事件後，在本地保存的印刷品嗎？

Answer 1

一個下載功能，使得它更容易：

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

}