function screenshot(){
html2canvas(document.body).then(function(canvas) {
//document.body.appendChild(canvas);
// Get base64URL
var base64URL = canvas.toDataURL('').replace( 'image/octet-stream');
// AJAX request
$.ajax({
url: 'screen_shot.php',
type: 'post',
data: {image: base64URL},
success: function(data){
alert('Upload successfully');
}
});
});
}
too long
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
1条回答 默认 最新
- dongle3217 2019-07-23 08:59关注
1) You can use
HTML5 & javaScript
to take screenshots. This will work for sure. check more details here(function (exports) { function urlsToAbsolute(nodeList) { if (!nodeList.length) { return []; } var attrName = 'href'; if (nodeList[0].__proto__ === HTMLImageElement.prototype || nodeList[0].__proto__ === HTMLScriptElement.prototype) { attrName = 'src'; } nodeList = [].map.call(nodeList, function (el, i) { var attr = el.getAttribute(attrName); if (!attr) { return; } var absURL = /^(https?|data):/i.test(attr); if (absURL) { return el; } else { return el; } }); return nodeList; } function screenshotPage() { urlsToAbsolute(document.images); urlsToAbsolute(document.querySelectorAll("link[rel='stylesheet']")); var screenshot = document.documentElement.cloneNode(true); var b = document.createElement('base'); b.href = document.location.protocol + '//' + location.host; var head = screenshot.querySelector('head'); head.insertBefore(b, head.firstChild); screenshot.style.pointerEvents = 'none'; screenshot.style.overflow = 'hidden'; screenshot.style.webkitUserSelect = 'none'; screenshot.style.mozUserSelect = 'none'; screenshot.style.msUserSelect = 'none'; screenshot.style.oUserSelect = 'none'; screenshot.style.userSelect = 'none'; screenshot.dataset.scrollX = window.scrollX; screenshot.dataset.scrollY = window.scrollY; var script = document.createElement('script'); script.textContent = '(' + addOnPageLoad_.toString() + ')();'; screenshot.querySelector('body').appendChild(script); var blob = new Blob([screenshot.outerHTML], { type: 'text/html' }); return blob; } function addOnPageLoad_() { window.addEventListener('DOMContentLoaded', function (e) { var scrollX = document.documentElement.dataset.scrollX || 0; var scrollY = document.documentElement.dataset.scrollY || 0; window.scrollTo(scrollX, scrollY); }); } function generate() { window.URL = window.URL || window.webkitURL; window.open(window.URL.createObjectURL(screenshotPage())); } exports.screenshotPage = screenshotPage; exports.generate = generate; })(window);
2) You can also use
html2canvas
below is the simple example of how to implement. JShtml2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) });
HTML
<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div>
download & include in the head section
//* <script src="Scripts/jquer_latest_2.11_.min.js" type="text/javascript"></script> <script src="Scripts/html2canvas.js" type="text/javascript"></script> //*
解决 无用评论 打赏 举报
悬赏问题
- ¥15 BP神经网络控制倒立摆
- ¥20 要这个数学建模编程的代码 并且能完整允许出来结果 完整的过程和数据的结果
- ¥15 html5+css和javascript有人可以帮吗?图片要怎么插入代码里面啊
- ¥30 Unity接入微信SDK 无法开启摄像头
- ¥20 有偿 写代码 要用特定的软件anaconda 里的jvpyter 用python3写
- ¥20 cad图纸,chx-3六轴码垛机器人
- ¥15 移动摄像头专网需要解vlan
- ¥20 access多表提取相同字段数据并合并
- ¥20 基于MSP430f5529的MPU6050驱动,求出欧拉角
- ¥20 Java-Oj-桌布的计算