我正在构建一个名为“HTML测验”的东西。它完全使用JavaScript运行,非常酷。
最后,会弹出一个结果框,上面写着“你的结果:”,它显示了他们花了多少时间,他们得到了多少百分比,以及他们从10中得到了多少问题。我想要一个按钮显示“捕获结果”并以某种方式获取屏幕截图或div的某些内容,然后只显示在页面上捕获的图像,他们可以右键单击并“将图像另存为”。
我真的很乐意这样做,以便他们可以与他人分享他们的成果。我不希望他们“复制”结果,因为他们可以很容易地改变它。如果他们改变了图像中的内容,那就太好了。
有没有人知道这样做或类似的方法?
答案 0 :(得分:80)
不,我不知道一种“截图”元素的方法,但是您可以做的是将测验结果绘制到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 */
当用户点击“捕获”时,请执行以下操作:
window.open('', document.getElementById('the_canvas_element_id').toDataURL());
这将打开一个带有“屏幕截图”的新标签或窗口,允许用户保存。没有办法调用各种各样的“另存为”对话框,所以这是我认为你能做到的最好的。
答案 1 :(得分:73)
这是@ Dathan的answer的扩展,使用html2canvas和FileSaver.js。
$(function() {
$("#btnSave").click(function() {
html2canvas($("#widget"), {
onrendered: function(canvas) {
theCanvas = canvas;
canvas.toBlob(function(blob) {
saveAs(blob, "Dashboard.png");
});
}
});
});
});
此代码块等待单击标识btnSave
的按钮。如果是,它会将widget
div转换为canvas元素,然后使用saveAs()FileSaver接口(通过不支持本机的浏览器中的FileSaver.js)将div保存为图像命名为" Dashboard.png"。
此fiddle提供了此工作的一个示例。
答案 2 :(得分:7)
经过数小时的研究,我终于找到了一个截取元素截图的解决方案,即使设置了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
});
}
答案 3 :(得分:6)
如果您希望&#34;另存为&#34;对话框,只需将图像传递给php脚本,即添加适当的标题
示例&#34;一体化&#34;脚本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>
答案 4 :(得分:3)
你不能拍摄屏幕:让你这样做是不负责任的安全风险。但是,您可以:
答案 5 :(得分:3)
var shot1=imagify($('#widget')[0], (base64) => {
$('img.screenshot').attr('src', base64);
});
查看htmlshot包,然后深入检查客户端部分:
npm install htmlshot
答案 6 :(得分:2)
另一种选择是使用GrabzIt&#39; JavaScript API您需要做的就是传递要捕获的div的CSS选择器。然后它将创建该div的截图。
<script type="text/javascript" src="grabzit.min.js"></script>
<script type="text/javascript">
GrabzIt("YOUR APPLICATION KEY").ConvertURL("http://www.example.com/quiz.html",
{"target": "#results", "bheight": -1, "height": -1, "width": -1}).Create();
</script>
此处有更多示例解决capture HTML elements的方法。对于完全披露,我是API创建者。
答案 7 :(得分:2)
在 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();
}
答案 8 :(得分:1)
<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>
答案 9 :(得分:0)
据我所知你不能这样做,我可能错了。不过我用php执行此操作,使用php标准函数生成JPEG然后显示图像,不应该是一个非常艰苦的工作,但是取决于DIV的内容有多华丽
答案 10 :(得分:0)
很简单,您可以使用此代码来捕获特定区域的屏幕截图
您必须在html2canvas中定义div ID。我在这里使用2 div-:
div id =“ car”
div id =“ chartContainer”
如果您只想捕获汽车,请使用 car ,我只在这里捕获汽车,您可以更改 chartContainer 来捕获图形
html2canvas($('#car')
复制并粘贴此代码
<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>
答案 11 :(得分:-1)
据我所知,javascript无法实现。
您可以为每个结果创建一个屏幕截图,将其保存在某处并在点击保存结果时指向用户。 (我猜结果只有10个,所以创建10个jpeg结果图像并不是什么大不了的事)