如何用JavaScript截取div的截图？
我正在建立一个叫做“HTML测验”的东西。 它完全在JavaScript上运行，而且非常酷。
最后，会弹出一个结果框，上面写着“Your Results：”，它显示了他们花了多少时间，他们得到了多少百分比，以及他们从10个中得到了多少个问题。我想要一个按钮“捕捉结果”，并以某种方式截图或东西的div，然后只显示在页面上捕捉的图像，他们可以右键单击和“保存图像为”。
我真的很想做到这一点，所以他们可以与他人分享他们的成果。 我不希望他们“复制”结果，因为他们可以很容易地改变这一点。 如果他们改变了图片中所说的话，那好吧。
有没有人知道一个方法来做到这一点或类似的东西？
不，我不知道如何“截图”一个元素，但是你可以做的是将测验结果绘制成一个canvas元素，然后使用HTMLCanvasElement对象的toDataURL函数获取一个包含图像内容的data: URI 。
测验完成后，请执行以下操作：
var c = document.getElementById('the_canvas_element_id'); var t = c.getContext('2d'); /* then use the canvas 2D drawing functions to add text, etc. for the result */
当用户点击“Capture”时，执行以下操作：
window.open('', document.getElementById('the_canvas_element_id').toDataURL());
这将打开一个新的标签或窗口的“截图”，允许用户保存它。 没有办法调用“另存为”对话框，所以在我看来这是最好的。
这是@ Dathan的答案的扩展，使用html2canvas和FileSaver.js 。
$(function() { $("#btnSave").click(function() { html2canvas($("#widget"), { onrendered: function(canvas) { theCanvas = canvas; canvas.toBlob(function(blob) { saveAs(blob, "Dashboard.png"); }); } }); }); });
这个代码块等待点击id为btnSave按钮。 如果是这样，它会将widget div转换为canvas元素，然后使用saveAs（）FileSaver接口（通过本机不支持的浏览器中的FileSaver.js）将div保存为名为“Dashboard.png”的图像。
这个工作的一个例子是可以在这个小提琴 。
如果你想有“另存为”对话框，只需将图像传递到php脚本，它会添加适当的标题
示例“all-in-one”脚本script.php
<?php if(isset($_GET['image'])): $image = $_GET['image']; if(preg_match('#^data:image/(.*);base64,(.*)$#s', $image, $match)){ $base64 = $match[2]; $imageBody = base64_decode($base64); $imageFormat = $match[1]; header('Content-type: application/octet-stream'); header("Pragma: public"); header("Expires: 0"); header("Cache-Control: must-revalidate, post-check=0, pre-check=0"); header("Cache-Control: private", false); // required for certain browsers header("Content-Disposition: attachment; filename=\"file.".$imageFormat."\";" ); //png is default for toDataURL header("Content-Transfer-Encoding: binary"); header("Content-Length: ".strlen($imageBody)); echo $imageBody; } exit(); endif;?> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2'></script> <canvas id="canvas" width="300" height="150"></canvas> <button id="btn">Save</button> <script> $(document).ready(function(){ var canvas = document.getElementById('canvas'); var oCtx = canvas.getContext("2d"); oCtx.beginPath(); oCtx.moveTo(0,0); oCtx.lineTo(300,150); oCtx.stroke(); $('#btn').on('click', function(){ // opens dialog but location doesnt change due to SaveAs Dialog document.location.href = '/script.php?image=' + canvas.toDataURL(); }); }); </script>
你不能屏幕截图：让你这样做是不负责任的安全风险。 但是，您可以：
- 做服务器端的东西，并生成一个图像
- 绘制类似于Canvas的东西，并将其呈现给图像（在支持它的浏览器中）
- 使用其他绘图库直接绘制图像（慢，但可以在任何浏览器上工作）
var shot1=imagify($('#widget')[0], (base64) => { $('img.screenshot').attr('src', base64); });
看看htmlshot包，然后深入地检查客户端部分：
npm install htmlshot
经过几个小时的研究之后，我终于找到了一个解决方案，即使设置了origin-clean标志（为了防止XSS），也是为什么你甚至可以捕获例如谷歌地图（在我的情况下） 。 我写了一个通用函数来获取屏幕截图。 此外，您唯一需要的是html2canvas库（ https://html2canvas.hertzen.com/ ）。
例：
getScreenshotOfElement($("div#toBeCaptured").get(0), 0, 0, 100, 100, function(data) { // in the data variable there is the base64 image // exmaple for displaying the image in an <img> $("img#captured").attr("src", "data:image/png;base64,"+data); }
请记住，如果图像的大小很好， console.log()和alert()不会生成输出。
功能：
function getScreenshotOfElement(element, posX, posY, width, height, callback) { html2canvas(element, { onrendered: function (canvas) { var context = canvas.getContext('2d'); var imageData = context.getImageData(posX, posY, width, height).data; var outputCanvas = document.createElement('canvas'); var outputContext = outputCanvas.getContext('2d'); outputCanvas.width = width; outputCanvas.height = height; var idata = outputContext.createImageData(width, height); idata.data.set(imageData); outputContext.putImageData(idata, 0, 0); callback(outputCanvas.toDataURL().replace("data:image/png;base64,", "")); }, width: width, height: height, useCORS: true, taintTest: false, allowTaint: false }); }
据我所知你不能这样做，我可能是错的。 不过，我会做这个与PHP，生成一个JPEG使用PHP标准功能，然后显示图像，不应该是一个非常艰苦的工作，但取决于如何华丽的DIV的内容是
<script src="/assets/backend/js/html2canvas.min.js"></script> <script> $("#download").on('click', function(){ html2canvas($("#printform"), { onrendered: function (canvas) { var url = canvas.toDataURL(); var triggerDownload = $("<a>").attr("href", url).attr("download", getNowFormatDate()+"电子签名详细信息.jpeg").appendTo("body"); triggerDownload[0].click(); triggerDownload.remove(); } }); }) </script>
行情
据我所知，它不可能与JavaScript。
你可以做的每一个结果创建一个截图，保存在某个地方，并指向用户点击保存结果。 （我猜没有结果是只有10个，所以没有什么大不了的，创建10个JPEG图像的结果）
