html2canvas 브라우저에서 열지 않고 jpeg로 저장

Question

사용자의 document.body 이미지를 만드는 스크린 그램 단추를 만들려고합니다.

이상적으로 사용자는 이미지를 로컬로 .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"); 
    } 
}); 

}