html2canvas JavaScript的屏幕截圖，並上傳

是否可以使用html2canvas（This)採取user`s屏幕的圖像，而且上傳的圖片，獲得上傳鏈接，並使用Ajax發送到Web服務器？html2canvas JavaScript的屏幕截圖，並上傳

如果是這樣，我怎麼能做到這一點？

2015-04-30 maria

是的，可以做這樣的事情。

首先使用html2canvas API以便將用戶的屏幕的圖片：

html2canvas(document.body).then(function(canvas) { 
});

其次使用下面的函數返回的畫布圖像轉換成BASE64編碼的URL（默認爲PNG）：

canvas.toDataURL();

Specification For canvas.toDataURL

現在構建一個請求URL編碼發送您的base64到圖像上傳服務器（我使用Imgur作爲例）。

html2canvas(document.body).then(function(canvas) { 
    var dataURL = canvas.toDataURL(); 
    $.ajax({ 
     url: 'https://api.imgur.com/3/image', 
     type: 'post', 
     headers: { 
      Authorization: 'yourauthcode' 
     }, 
     data: { 
      image: dataURL 
     }, 
     dataType: 'json', 
     success: function(response) { 
      if(response.success) { 
       // Post the imgur url to your server. 
       $.post("yourlinkuploadserver", response.data.link); 
      } 
     } 
    }); 
});

上傳圖片後，您可以將上傳圖片的網址發佈到您的網絡服務器。

Specification for $.post

Specification for $.ajax

來源

2015-04-30 16:50:25

是否可以在html2canvas api中提供這個功能？因爲我不知道該把代碼放在哪裏/與api集成在一起。 – maria

當然，我會爲你做一個演示 –

yourimagesharingserver會是etg：www.example.com/postlink？ – maria

這不是測試，但應該工作

function screenshot() { 
    html2canvas(document.body).then(function(canvas) { 
     // post using your favourite xhr polyfill, e.g. jQuery's 
     $.post('http://urlgoeshere.com', canvas.toDataURL('image/png')); 
    }); 
}

然後從服務器端的base64結果進行解碼，並放在一個文件

來源

2015-04-30 16:38:03 liamness

我將如何解碼它在服務器端？ – maria

完全取決於您使用的後端技術。 PHP，Python，.NET等都可以解碼Base64字符串並創建文件。 – liamness

它將如何與PHP。 – maria

使用上面的例子，不要忘了把它添加到base64url，否則將無法正常工作：

var dataURL = canvas.toDataURL().replace(/.*,/, '');

更多信息here。

來源

2017-03-06 08:48:35

html2canvas JavaScript的屏幕截圖，並上傳

回答

相關問題