Question

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

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

Answer 1

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

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

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

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

canvas.toDataURL();

Specification For canvas.toDataURL

现在构建一个将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

Answer 2

这未经过测试，但应该可以使用

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 3

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

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

更多信息here。

html2canvas javascript截图和上传

3 个答案: