html2canvas javascript截图和上传
html2canvas javascript截图和上传
提问于 2015-05-01 00:22:41
是否可以使用html2canvas (This) )为用户屏幕拍照，但也可以上传图像，获取上传链接，并使用ajax将其发送到get服务器？
如果是这样，我该怎么做呢？
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-05-01 00:50:26
是的，做这样的事情当然是可能的。
首先使用html2canvas接口对用户屏幕进行拍照：
html2canvas(document.body).then(function(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);
}
}
});
});上传图像后，您可以将上传的图像的URL发布到您的web服务器。
Stack Overflow用户
发布于 2015-05-01 00:38:04
这没有经过测试，但应该可以工作
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的结果进行解码，并放入一个文件中
Stack Overflow用户
发布于 2017-03-06 16:48:36
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29972949
复制相关文章
相似问题
腾讯云开发者
