從html2canvas打開base64圖像

Question

我試圖實際查看html2canvas呈現的字符串圖像。我有一個從超鏈接打開的網頁。我最終希望使用圖像按鈕拍攝網頁的屏幕截圖。我得到的base64字符串，但我如何查看字符串圖像？

 $(document).ready(function(){   

     html2canvas(document.body,{ 
      onrendered: function (canvas){ 
       var data = canvas.toDataURL(); 
       alert(data); 
      }, 
      width:300, 
      height:300 
     }); 

Answer 1

你做到這一點通過附加類似data:image/png;base64,到的base64字符串，並將其作爲源的圖像標記，在某個地方插入：

html2canvas(document.body,{ 
     onrendered: function (canvas){ 
      var data = canvas.toDataURL(); 
      var img = document.createElement('img'); 
      img.setAttribute('download','myImage.png'); 
      img.src = 'data:image/png;base64,' + data; 
      document.body.appendChild(img); 
     }, 
     width:300, 
     height:300 
    });