如何在本地驱动器中保存网页屏幕截图

Question

我正在开发一个项目，其中一项需求是截取网页并将其作为图像存储在本地驱动器中。

我通过a blog走了，得到了我们如何使用JavaScript采取截图。 我能够获得截图，但如何将其保存为本地驱动器中的图像？

我的jQuery代码：

(function (exports) { 
function urlsToAbsolute(nodeList) { 
    if (!nodeList.length) { 
     return []; 
    } 
    var attrName = 'href'; 
    if (nodeList[0].__proto__ === HTMLImageElement.prototype 
    || nodeList[0].__proto__ === HTMLScriptElement.prototype) { 
     attrName = 'src'; 
    } 
    nodeList = [].map.call(nodeList, function (el, i) { 
     var attr = el.getAttribute(attrName); 
     if (!attr) { 
      return; 
     } 
     var absURL = /^(https?|data):/i.test(attr); 
     if (absURL) { 
      return el; 
     } else { 
      return el; 
     } 
    }); 
    return nodeList; 
} 

function screenshotPage() { 
    urlsToAbsolute(document.images); 
    urlsToAbsolute(document.querySelectorAll("link[rel='stylesheet']")); 
    var screenshot = document.documentElement.cloneNode(true); 
    var b = document.createElement('base'); 
    b.href = document.location.protocol + '//' + location.host; 
    var head = screenshot.querySelector('head'); 
    head.insertBefore(b, head.firstChild); 
    screenshot.style.pointerEvents = 'none'; 
    screenshot.style.overflow = 'hidden'; 
    screenshot.style.webkitUserSelect = 'none'; 
    screenshot.style.mozUserSelect = 'none'; 
    screenshot.style.msUserSelect = 'none'; 
    screenshot.style.oUserSelect = 'none'; 
    screenshot.style.userSelect = 'none'; 
    screenshot.dataset.scrollX = window.scrollX; 
    screenshot.dataset.scrollY = window.scrollY; 
    var script = document.createElement('script'); 
    script.textContent = '(' + addOnPageLoad_.toString() + ')();'; 
    screenshot.querySelector('body').appendChild(script); 
    var blob = new Blob([screenshot.outerHTML], { 
     type: 'text/html' 
    }); 
    return blob; 
} 

function addOnPageLoad_() { 
    window.addEventListener('DOMContentLoaded', function (e) { 
     var scrollX = document.documentElement.dataset.scrollX || 0; 
     var scrollY = document.documentElement.dataset.scrollY || 0; 
     window.scrollTo(scrollX, scrollY); 
    }); 
} 

function generate() { 
    window.URL = window.URL || window.webkitURL; 
    window.open(window.URL.createObjectURL(screenshotPage())); 
} 
exports.screenshotPage = screenshotPage; 
exports.generate = generate; 
})(window); 

This is my Fiddle

正如我拨弄出，我想提供一个按钮/链接到用户，使用户可以利用当前窗口/网页快照。并且能够将该快照下载/保存为图像（png，jpeg，jpg任何格式）。

Answer 1

这里是我的回答：

我的index.php

<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> 

<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm"> 
<input type="hidden" name="img_val" id="img_val" value="" /> 
</form> 

<input type="submit" value="Take Screenshot Of Div Below" onclick="capture();" /> 

<div id="target"> 
    DIV TO TAKE PHOTO OF. 
</div> 

<script> 
function capture() { 
    $('#target').html2canvas({ 
     onrendered: function (canvas) { 
      //Set hidden field's value to image data (base-64 string) 
      $('#img_val').val(canvas.toDataURL("image/png")); 
      //Submit the form manually 
      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); 

//Decode the string 
$unencodedData=base64_decode($filteredData); 

//Save the image 
file_put_contents('img.png', $unencodedData); 

$file = 'img.png'; 

if (file_exists($file)) { 
header('Content-Description: File Transfer'); 
header('Content-Type: application/octet-stream'); 
header('Content-Disposition: attachment; filename='.basename($file)); 
header('Content-Transfer-Encoding: binary'); 
header('Expires: 0'); 
header('Cache-Control: must-revalidate'); 
header('Pragma: public'); 
header('Content-Length: ' . filesize($file)); 
ob_clean(); 
flush(); 
readfile($file); 
exit; 
} 

?> 

这个解决方案，我发现在a blog。

Live Demo

Answer 2

无法直接访问客户端的文件系统。但是，您可以提示他们下载文件。

数据网址

数据网址是网址在链接中包含一个文件的内容。例如：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAioAAAO0CAYAAACLKx00 

该URL被裁剪，所以实际上不会工作。

这里是一个小提琴：http://jsfiddle.net/x876K/6/

你可以迫使它通过使用这样的链接下载：

<a download="file.png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAioAAAO0CAYAAACLKx00">text</a> 

尝试阅读：

• http://en.wikipedia.org/wiki/Data_URI_scheme
• How to convert image into base64 string using javascript

请告诉我，如果我误解了。

画布和图像

你也可以写一个画布，并允许用户点击右键并另存为。