html2canvas javascript截图和上传 [英] html2canvas javascript screenshot and upload

问题描述

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

如果是这样，我该怎么做？

解决方案

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

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

  html2canvas（document.body）.then（function（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'，
类型：'post'，
标题：{
授权：'yourauthcode'
}，
数据：{
 image：dataURL 
}，
 dataType：'json'，
成功：函数（响应）{
 if（response.success）{
 //将imgur url发布到您的服务器。
 $ .post（yourlinkuploadserver，response.data.link）; 
} 
} 
 }）; 
}）; 
  

上传图片后，您可以将上传图片的网址发布到您的网络服务器。 / p>

$ .post规范

$ .ajax的规格

Would it be possible to use html2canvas (This) to take a picture of the user`s screen but also upload the image, get the upload link and send it with ajax to the webserver?

if so, how can i do this?

解决方案

Yes it is certainly possible to do such a thing.

Firstly use the html2canvas api to take a picture of the user's screen:

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

Secondly use the following function to convert the returned canvas image into a base64 encoded URL (defaults to png):

canvas.toDataURL(); 

Specification For canvas.toDataURL

Now construct a request to send your base64 encoded url to an image uploading server (I'm using Imgur as an example).

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);
            }
        }
    });
});

After the image has been uploaded you can POST the URL of the uploaded image to your web server.

Specification for $.post

Specification for $.ajax

这篇关于html2canvas javascript截图和上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！