如何使用 html2canvas 存储屏幕截图？答案

【问题标题】：How can I store the screenshot using html2canvas?如何使用 html2canvas 存储屏幕截图？
【发布时间】：2014-02-10 18:57:46
【问题描述】：

我正在尝试使用 html2canvas 0.34 保存网站的屏幕截图。

但我不知道截图保存在哪里，如何将截图存储到我的数据库中，或者用新窗口打开图像。

我的代码如下：

<script type="text/javascript">
$('div').html2canvas({
onrendered: function( canvas ) {
var img = canvas.toDataURL();
window.open(img);
}
});
</script>

</head>
<body>         
<h1>Testing</h1>
<div>
<img src='http://25.media.tumblr.com/tumblr_mcc5k9YRli1rt6zh0o1_500.jpg'>
</div>
</body></html>

我想将图片的截图存入数据库或在其他窗口中打开。

非常感谢。

【问题讨论】：

标签： javascript jquery html2canvas

【解决方案1】：

toDataURL函数只返回图片数据为字符串，无法保存（因为JS无权访问文件系统）

为了保存它，您必须让浏览器将其作为图像加载，或者让服务器端脚本处理它。

这应该对你有用 http://www.kevinsookocheff.com/2011/07/27/saving-canvas-data-to-an-image-file-with-javascript-and-php/

【讨论】：

【解决方案2】：

   var data = canvas.toDataURL();
-----------------For Downloading Imgage in Chrome (just 4 testing)-------------------------
/* var save = document.createElement('a');
        save.href = data;
        save.target = '_blank';
        save.download = 'fileName';

        var event = document.createEvent('Event');
        event.initEvent('click', true, true);
        save.dispatchEvent(event);
        (window.URL || window.webkitURL).revokeObjectURL(save.href);*/
//---------------------------------

【讨论】：