我正在建立一个叫做“HTML测试”的东西。它完全运行在JavaScript上，非常酷。
最后，会弹出一个结果框，上面写着“你的结果”，它显示了他们花了多少时间，他们得到了多少百分比，以及他们在10道题中得到了多少道。我想有一个按钮，说“捕获结果”，让它以某种方式截图或div的东西，然后只显示在页面上捕获的图像，他们可以右键单击并“另存图像为”。
我真的很愿意这样做，这样他们就可以与他人分享他们的成果。我不希望他们“复制”结果，因为他们可以很容易地改变结果。如果他们改变了图片上的内容，那好吧。
有人知道怎么做吗?
当前回答
这是简单的，你可以使用这段代码捕捉特定区域的截图 你必须在html2canvas中定义div id。我在这里使用2 div-: div id = "车" div id ="chartContainer" 如果你只想捕获汽车，那么使用car i'm capture here car only你可以改变chartContainer来捕获图形 html2canvas($(“#汽车”) 复制并粘贴此代码
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <script> window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, theme: "light2", title:{ text: "Simple Line Chart" }, axisY:{ includeZero: false }, data: [{ type: "line", dataPoints: [ { y: 450 }, { y: 414}, { y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle" }, { y: 460 }, { y: 450 }, { y: 500 }, { y: 480 }, { y: 480 }, { y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross" }, { y: 500 }, { y: 480 }, { y: 510 } ] }] }); chart.render(); } </script> </head> <body bgcolor="black"> <div id="wholebody"> <a href="javascript:genScreenshotgraph()"><button style="background:aqua; cursor:pointer">Get Screenshot of Cars onl </button> </a> <div id="car" align="center"> <i class="fa fa-car" style="font-size:70px;color:red;"></i> <i class="fa fa-car" style="font-size:60px;color:red;"></i> <i class="fa fa-car" style="font-size:50px;color:red;"></i> <i class="fa fa-car" style="font-size:20px;color:red;"></i> <i class="fa fa-car" style="font-size:50px;color:red;"></i> <i class="fa fa-car" style="font-size:60px;color:red;"></i> <i class="fa fa-car" style="font-size:70px;color:red;"></i> </div> <br> <div id="chartContainer" style="height: 370px; width: 100%;"></div> <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> <div id="box1"> </div> </div>> </body> <script> function genScreenshotgraph() { html2canvas($('#car'), { onrendered: function(canvas) { var imgData = canvas.toDataURL("image/jpeg"); var pdf = new jsPDF(); pdf.addImage(imgData, 'JPEG', 0, 0, -180, -180); pdf.save("download.pdf"); } }); } </script> </html>
其他回答
你不能截屏:让你这样做是不负责任的安全风险。但是，你可以:
服务器端和生成图像吗 绘制一些类似画布的东西，并将其渲染为图像(在支持它的浏览器中) 使用其他绘图库直接绘制图像(速度较慢，但适用于任何浏览器)
不，我不知道一种方法来“截图”一个元素，但你可以做的，是绘制测试结果到一个画布元素，然后使用HTMLCanvasElement对象的toDataURL函数来获得一个数据: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());
这将打开一个带有“截图”的新选项卡或窗口，允许用户保存它。没有办法调用“另存为”对话框，所以在我看来，这是你能做的最好的事情。
这是一个11年前的答案。请忽略这个答案，并在这里查看其他最近的答案
据我所知，这是不可能的javascript。
你可以为每个结果创建一个截图，保存在某个地方，并在单击保存结果时指向用户。(我猜no的结果只有10，所以创建10个jpeg图像的结果不是一个大问题)
var shot1=imagify($('#widget')[0], (base64) => {
$('img.screenshot').attr('src', base64);
});
看一下htmlshot包，然后，深入检查客户端部分:
npm install htmlshot
这是@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的按钮被单击。当它是时，它将小部件div转换为画布元素，然后使用saveAs() FileSaver接口(在本机不支持它的浏览器中通过FileSaver.js)将div保存为名为“Dashboard.png”的图像。
这种工作的一个例子是在这小提琴。
