html2canvas javascript截图和上传

是否可以使用html2canvas（ This）来拍摄用户屏幕的图片，还可以上传图片，获取上传链接并将其与ajax一起发送到网络服务器？

如果是的话，我该怎么做？

Answer 1

是的，当然可以做这样的事情。

首先使用html2canvas api拍摄用户屏幕的图片：

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

其次使用以下函数将返回的canvas图像转换为base64编码的URL（默认为png）：

 canvas.toDataURL(); 

规范对于canvas.toDataURL

现在构建一个将base64编码的url发送到图像上传服务器的请求（我以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); } } }); }); 

上传图像后，您可以将上传图像的URL发布到Web服务器。

$ .post的规格

$ .ajax的规范

Answer 2

这没有经过测试，但应该可行

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

然后解码服务器端base64的结果并放入文件

Answer 3

使用上面的示例，不要忘记将其添加到base64url，否则它将无法工作：

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

更多信息在这里 。