html2canvas javascript截图和上传

Question

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

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

Answer 1

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

首先使用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',
        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, e.g. jQuery's
        $.post('http://urlgoeshere.com', canvas.toDataURL('image/png'));
    });
}

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

Answer 3

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

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

更多信息在这里 。