我正在构建一个叫做“HTML 测验”的东西。它完全在 JavaScript 上运行，非常酷。
最后，会弹出一个结果框，上面写着“你的结果：”，它显示了他们花了多少时间，他们得到的百分比，以及他们在 10 个问题中得到了多少问题。我想要一个按钮，上面写着“捕获结果”并让它以某种方式截取屏幕截图或 div 的某些内容，然后只显示在页面上捕获的图像，他们可以右键单击并“将图像另存为”。
我真的很想这样做，这样他们就可以与他人分享他们的结果。我不希望他们“复制”结果，因为他们可以轻松更改结果。如果他们改变图像中的内容，哦，好吧。
有谁知道这样做的方法或类似的方法？
不，我不知道有什么方法可以“截取”元素，但您可以做的是将测验结果绘制到画布元素中，然后使用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 */
当用户单击“捕获”时，执行以下操作：
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被点击。当它是时，它将widgetdiv 转换为画布元素，然后使用 saveAs() FileSaver 接口（通过本地不支持它的浏览器中的 FileSaver.js）将 div 保存为名为“Dashboard.png”的图像。
这个工作的一个例子可以在这个小提琴上找到。
经过数小时的研究，我终于找到了一种解决方案来截取元素的屏幕截图，即使origin-clean设置了FLAG（以防止 XSS），这就是为什么您甚至可以捕获例如 Google 地图（在我的情况下）的原因。我写了一个通用函数来获取屏幕截图。此外，您唯一需要的是 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 脚本中，它会添加适当的标题
“多合一”脚本示例 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>
在 index.html 中添加此脚本
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
使用此函数获取 div 标签的截图
getScreenShot(){
let c = this.elem.nativeElement.querySelector('.chartContainer'); // or document.getElementById('canvas');
html2canvas(c).then((canvas:any)=>{
var t = canvas.toDataURL().replace("data:image/png;base64,", "");
this.downloadBase64File('image/png',t,'image');
})
}
downloadBase64File(contentType:any, base64Data:any, fileName:any) {
const linkSource = `data:${contentType};base64,${base64Data}`;
const downloadLink = document.createElement("a");
downloadLink.href = linkSource;
downloadLink.download = fileName;
downloadLink.click();
}