如何捕获当前位于标签中的快照网页。请帮助我,我是初学者
答案 0 :(得分:2)
暂不公开评论,所以我会发一个答案。
很大程度上取决于您尝试做什么以及您正在使用的系统。
imagegrabscreen()
& imagegrabwindow()
仅适用于Windows& PHP 5> = 5.2.2。
如果您使用这些图像获取空白图像,则需要将Apache配置为“允许服务与桌面交互”。转到Windows服务,找到Apache并在属性中设置它。
您可以在客户端使用html2canvas + JavaScript在服务器端发布网页图片+ PHP以保存该图片。这是一个Tutorial来做这件事。
在这个SO问题Website screenshots using PHP
中也有很好的讨论选项(现在有些过时了)另外,有很多免费服务可以通过PHP API提供网站截图功能,例如GrabzIt,Websnapr等。
答案 1 :(得分:0)
您可以尝试使用此代码在客户端生成图像。如果您使用Juqery,那么在您的应用程序中实现此功能将非常容易。
以下是您可以尝试使用的代码。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>
</head>
<body>
<div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px;
padding-left: 25px; padding-top: 10px;">
<strong>WEB Page to Image Conversion</strong><hr/>
<h3 style="color: #3e4b51;">
Html to canvas, and canvas to proper image
</h3>
<p style="color: #3e4b51;">
<b>Here </b> is the example of image of text and html page that we are going to use to convert it into the image that you will be able to download and preview here. </p>
<p style="color: #3e4b51;">
<b>This html2canvas</b> script allows you to take "screenshots" of webpages containing anything it it., directly on the users browser. It will just capture the html and css that it will find in the DOM.
</p>
</div>
<input id="btn-Preview-Image" type="button" value="Preview"/>
<a id="btn-To-Convert-Html2Image" href="#">Download</a>
<br/>
<h3>Preview :</h3>
<div id="previewImage">
</div>
<script>
$(document).ready(function(){
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});
});
</script>
</body>
</html>