我正在建立一个叫做“HTML测试”的东西。它完全运行在JavaScript上，非常酷。
最后，会弹出一个结果框，上面写着“你的结果”，它显示了他们花了多少时间，他们得到了多少百分比，以及他们在10道题中得到了多少道。我想有一个按钮，说“捕获结果”，让它以某种方式截图或div的东西，然后只显示在页面上捕获的图像，他们可以右键单击并“另存图像为”。
我真的很愿意这样做，这样他们就可以与他人分享他们的成果。我不希望他们“复制”结果，因为他们可以很容易地改变结果。如果他们改变了图片上的内容，那好吧。
有人知道怎么做吗?
当前回答
如果你希望有“另存为”对话框，只需将图像传入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>
其他回答
添加到你的html文件和id="capture"到你想截图的div
<a id="btn-Convert-Html2Image" href="#">Download</a>
<script src="capture.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js" type="text/javascript"></script>
在capture.js中添加:
document.getElementById("btn-Convert-Html2Image").addEventListener("click", function() {
html2canvas(document.getElementById("capture")).then(function (canvas) {
var anchorTag = document.createElement("a");
anchorTag.download = "filename.jpg";
anchorTag.href = canvas.toDataURL();
anchorTag.target = '_blank';
anchorTag.click();
});
});
然后，只需按下下载键，它就会下载截图
或者您可以通过添加查看截图img
<div id="previewImg"></div>
在HTML代码中是你想要查看img和js代码的地方
document.getElementById("btn-Convert-Html2Image").addEventListener("click", function() {
html2canvas(document.getElementById("capture")).then(function (canvas) {
var anchorTag = document.createElement("a");
document.body.appendChild(anchorTag);
document.getElementById("previewImg").appendChild(canvas);
anchorTag.click();
});
});
<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>
报价
在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
不，我不知道一种方法来“截图”一个元素，但你可以做的，是绘制测试结果到一个画布元素，然后使用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());
这将打开一个带有“截图”的新选项卡或窗口，允许用户保存它。没有办法调用“另存为”对话框，所以在我看来，这是你能做的最好的事情。
