如何使用JavaScript将渲染的网页保存为图像
How to save a rendered webpage as image with JavaScript?
在我的应用程序中,我必须提供一个"另存为图像"按钮。我想将网页上呈现的HTML保存为JavaScript中的图像。它是一款网络应用程序,将在台式机/平板电脑/手机的浏览器中使用。如何将渲染的HTML保存为图像?
查看html2canvas。在画布元素上呈现页面内容的javascript框架。将画布保存为图像非常简单:
var canvas = document.getElementById("mycanvas");
var img = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
源
使用http://html2canvas.hertzen.com/
index.php
<style>.wrap{background:white;padding:0 0 16px 0;width:1500px;}.colour{width:1500px;position:relative;height:1400px;}p.footer{text-align:center;font-family:arial;line-height:1;font-size:28px;color:#333;}.wrap img{height:389px;width:389px;position:absolute;bottom:0;right:0;left:0;top:0;margin:auto;}p.invert{position:absolute;top:300px;left:0;right:0;text-align:center;display:block;font-family:arial;font-size:48px;padding:0 40px;filter:invert(0%);}p.inverted{-webkit-filter: invert(100%);filter:invert(100%);}</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery.plugin.html2canvas.js"></script>
<?php // Open our CSV File
$colours = fopen('colours.csv', 'r');
// Reset Count
$i=0;
// Loop Through the Colours
while (($colour = fgetcsv($colours)) !== FALSE){
// Get the First Item and display some HTML
if($i==0){ ?>
<div id="target" class="wrap">
<div class="colour" style="background:<?php echo $colour[0]; ?>">
<img src="paragon2.png" alt="Image" />
<p class="invert inverted" style="filter:invert(100%);"><?php echo $colour[1]; ?></p>
</div>
<p class="footer"><?php echo $colour[1]; ?></p>
</div>
<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
<input type="hidden" name="img_val" id="img_val" value="" />
<input type="hidden" name="filename" id="filename" value="<?php echo $colour[0].".png"; ?>" />
</form>
<?php } // Count
$i++;
} // Loop
// Close the CSV File
fclose($colours); ?>
<script type="text/javascript">
$(window).load(function () {
$('#target').html2canvas({
onrendered: function (canvas) {
$('#img_val').val(canvas.toDataURL("image/png"));
document.getElementById("myForm").submit();
}
});
});
</script>
save.php
<?php // Get the base-64 string from data
$filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);
$filename=$_POST['filename'];
// Decode the string
$unencodedData=base64_decode($filteredData);
// Save the image
file_put_contents("IMG2/".$filename, $unencodedData);
// Open the CSV File
$file = fopen('colours.csv', 'r');
// Loop through the colours
while (($line = fgetcsv($file)) !== FALSE) {
// Store every line in an array
$data[] = $line;
}
// Remove the first element from the stored array
array_shift($data);
// Write remaining lines to file
foreach ($data as $fields){
fputcsv($file, $fields);
}
// Close the File
fclose($file);
// Redirect and start again!
header( 'Location:/' ) ; ?>
您的问题非常不完整。首先,这是移动应用程序还是桌面应用程序?在这两种情况下,问题的解决方案都将在很大程度上取决于呈现页面的HTML引擎:例如,Webkit、Geko/Firefox、Trident/IE都有自己的方法来生成要保存为图像的视图。
无论如何,你可以开始看看这个Firefox插件是如何工作的:https://addons.mozilla.org/it/firefox/addon/pagesaver/
它应该做你想实现的事情,寻找它的源代码。
相关文章:
- 永久保存网页的所有效果
- 如何使用javascript保存网页
- "无法保存此网页“;Internet Explorer 8中出现错误
- 编辑网页并在本地保存更改
- 使用JS将网页直接保存为PDF
- 如何在不编码或保存数据的情况下将二进制数据从javascript传递到actionscript(网页到flash)
- 使用java脚本通过网页保存Excel文件
- AppleScript 从网页特定部分的 URL 保存文档
- 用于检测用户何时保存网页的 Javascript
- 将网页转换为PDF并将其保存在服务器中 - JS或PHP
- 保存网页以供在 Web 应用程序中脱机访问
- 将从网页中的网络摄像头拍摄的图片保存到本地文件夹
- 用于检索、保存和存储信息的内部网页
- 内容可编辑 - JQuery 仅将内容保存到网页(以及添加和删除)
- 如何使用JavaScript将渲染的网页保存为图像
- 具有Raspberry Pi nginx网页保存复选框状态
- 如何防止浏览器将网页保存在缓存中,或每次强制请求新页面
- 我正在努力使用Javascript和XMLHTTPRequest从网页保存音频文件
- 希望使用javascript将网页保存为文本文件
- 将通过ajax提供内容的网页保存为pdf格式