html2canvasはブラウザで開くことなくjpegとして保存します

Question

ユーザの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"); 
    } 
}); 

}