Question

我正在尝试使用包含嵌入式swf的div元素的javascript创建屏幕截图。此屏幕截图应保存到我的FTP服务器。

html看起来如下所示：

<div class="thumbnail" id="thumbnail">
    <div style="background: #FFF url('assets/images/canvas.png') repeat;" id="builder" class="thumb">
        <object>
            <embed width="100%" height="350" src="http://assets.zwinky.com/assets3/avatar/avatar10.8.swf?u=dane" wmode="transparent"></embed>
            <param name="wmode" value="transparent">
        </object>
    </div>
</div>

我目前的Javascript看起来如下：

<script type="text/javascript" src="assets/js/FileSaver.js"></script>
<script type="text/javascript" src="assets/js/html2canvas.js"></script>
<script type="text/javascript">
    $(function() { 
        $("#submit_form").click(function() { 
            html2canvas($("#thumbnail"), {
                onrendered: function(canvas) {
                    theCanvas = canvas;
                    document.body.appendChild(canvas);

                    canvas.toBlob(function(blob) {
                        saveAs(blob, "test.png"); 
                    });
                }
            });
        });
    }); 
</script>

但遗憾的是，一旦点击按钮，任何事情都无法保存或发生。

工作代码示例：http://jsfiddle.net/6FZkk/1/

包含嵌入的HTML元素的屏幕截图：https://gyazo.com/37683328b5a785e6b17f78eca5e1c2de

有没有人知道我做错了什么？

Answer 1

由于安全限制，浏览器不允许您在网页上执行此操作。否则，您可以执行诸如检查用户访问过的链接之类的内容，这样可以检测用户的浏览器历史记录。

另一方面，如果您对Chrome扩展程序进行编码，则可以查看tabCapture https://developer.chrome.com/extensions/tabs#method-captureVisibleTab

闪存应该允许你这样做，但我不熟悉。

如果您想进行测试，请查看Phantom CSS https://github.com/Huddle/PhantomCSS

Answer 2

您不应该只使用js，因为在这种情况下，您的ftp凭证将向公众开放。

为此，您可以在服务器上创建类似upload_to_ftp.ext等的页面，该页面将接受您的文件并将上传到您的ftp。在浏览器上获取屏幕截图后，将该文件（屏幕截图）发送到您的服务器（upload_to_ftp.ext）。

使用Javascript / Jquery将div的屏幕截图保存到我的ftp

2 个答案: