我正在建立一个叫做“HTML测试”的东西。它完全运行在JavaScript上，非常酷。
最后，会弹出一个结果框，上面写着“你的结果”，它显示了他们花了多少时间，他们得到了多少百分比，以及他们在10道题中得到了多少道。我想有一个按钮，说“捕获结果”，让它以某种方式截图或div的东西，然后只显示在页面上捕获的图像，他们可以右键单击并“另存图像为”。
我真的很愿意这样做，这样他们就可以与他人分享他们的成果。我不希望他们“复制”结果，因为他们可以很容易地改变结果。如果他们改变了图片上的内容，那好吧。
有人知道怎么做吗?
当前回答
经过几个小时的研究，我终于找到了一个解决方案来截取一个元素的屏幕截图，即使设置了origin-clean FLAG(以防止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
});
}
其他回答
你不能截屏:让你这样做是不负责任的安全风险。但是，你可以:
服务器端和生成图像吗 绘制一些类似画布的东西，并将其渲染为图像(在支持它的浏览器中) 使用其他绘图库直接绘制图像(速度较慢，但适用于任何浏览器)
这是一个11年前的答案。请忽略这个答案，并在这里查看其他最近的答案
据我所知，这是不可能的javascript。
你可以为每个结果创建一个截图，保存在某个地方，并在单击保存结果时指向用户。(我猜no的结果只有10，所以创建10个jpeg图像的结果不是一个大问题)
经过几个小时的研究，我终于找到了一个解决方案来截取一个元素的屏幕截图，即使设置了origin-clean FLAG(以防止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
});
}
在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();
}
var shot1=imagify($('#widget')[0], (base64) => {
$('img.screenshot').attr('src', base64);
});
看一下htmlshot包，然后，深入检查客户端部分:
npm install htmlshot
