html2canvas javascript 截图并上传

Question

是否可以使用 html2canvas（This) 拍摄用户屏幕的照片并上传图像，获取上传 link 并使用 ajax 到网络服务器？

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

Answer 1

这没有经过测试，但应该可以工作

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解码后的结果存入文件

Answer 2

是的，这样做当然是可能的。

首先使用html2canvas api对用户屏幕进行拍照：

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

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

canvas.toDataURL();

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

图片上传后，您可以POST将上传图片的URL发送到您的网络服务器。

Specification for $.post

Specification for $.ajax

Answer 3

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

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

更多信息here。

html2canvas javascript 截图并上传

html2canvas javascript screenshot and upload

javascript

jquery

canvas

image-uploading

html2canvas