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

我正在尝试使用javascript创建一个包含嵌入swf的div元素的屏幕截图。此屏幕截图应保存到我的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>

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

我当前的Javascript确实如下所示：

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

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

$（函数（）{
$（“#提交表格”）。单击（函数（）{
html2canvas（$（“#缩略图”）{
onrendered：函数（画布）{
画布=画布；
document.body.appendChild（画布）；
canvas.toBlob（函数（blob）{
saveAs（blob，“test.png”）；
});
}
});
});
}); 

但不幸的是，一旦我点击按钮，什么都不会保存或发生

工作代码示例：

包含嵌入的HTML元素的屏幕截图：

---

---

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

由于安全限制，浏览器不允许您在网页上这样做。否则，你可以做一些事情，比如检查用户访问了哪些链接，这将允许检测用户的浏览器历史记录

另一方面，如果您正在编码chrome扩展，则可以选中

tabCapture

flash也应该允许你这么做，但我不熟悉

---

如果您想出于测试目的执行此操作，请选中Phantom CSS，您不应该仅使用js执行此操作，因为在这种情况下，您的ftp凭据将对公众开放

---

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

我不确定您使用的库是如何工作的，但您可以尝试将CSS代码放在CSS文件中而不是样式标记中吗。我可能是库重新加载CSS而忽略了样式标记。可能是html2canvas的重复，但是meh。。这只是一个解决方案，不能用于框架和对象。总而言之，我完全同意你的看法。然而这个问题实际上是一个复杂的问题，你试图解决一个需要成功创建一个屏幕截图的问题，而这在一开始几乎是不可能的。这里的原始问题实际上应该分为两个问题。