Question

我知道您不应该在Javascript中进行阻止，而且我从来没有无法重构过这么做。但是我遇到了一些我不知道如何处理回调的事情。我试图将Downloadify与html2canvas一起使用（这仅适用于IE，下载数据URI并不适用于IE）。您必须指定数据函数，以便Flash对象知道要下载的内容。不幸的是，html2canvas是异步的。我需要能够等到onrendered事件被填满才能获得数据URI。

$('#snapshot').downloadify({
        filename: function(){
            return 'timeline.png';
        },
        data: function(){
            var d = null;
            html2canvas($('#timeline'),{
                onrendered:function(canvas){
                    d = canvas.toDataURL();
                }
            });

            //need to be able to block until d isn't null

            return d;
        },
        swf: '../static/bin/downloadify.swf',
        downloadImage: '../static/img/camera_icon_32.png?rev=1',
        width: 32,
        height: 32,
        transparent: true,
        append: false
});

我对其他方法的建议持开放态度，但我被卡住了。

编辑 - 有几条评论表明需要有关Downloadify的更多信息（https://github.com/dcneiner/Downloadify）。 Downloadify是一个Flash对象，可用于触发浏览器的“另存为”窗口。 downloadify（）函数只是初始化Flash对象并在元素中粘贴<object/>标记。由于它是Flash对象，因此您无法从Javascript触发事件而不会导致安全违规。

我只在IE上使用它来下载Canvas元素的图像。在所有其他浏览器中，我只能使用数据URI，但IE是一种特殊的花。

Answer 1

对于那个花了整整一夜的穷人，试图让HTML5功能在IE9上运行，这就是我最终使用的内容。我可以有点逍遥法外，因为我们并不太关心IE用户获得的用户友好体验，这是一个内部应用程序。但是，YMMV。

基本上，当返回字符串为空时，Downloadify将不执行任何操作。因此，由于html2canvas呈现的异步特性，用户第一次点击时，不会发生任何事情。第二次（假设渲染完成，如果没有任何东西将继续发生，直到它），该值不为空并且保存继续。我使用onCancel和onCoplete回调来再次清空值，以确保下次用户尝试保存时，图像不会太陈旧。

这并不能解释用户在点击之间以某种方式更改DOM的事件，但我不知道可以为此做些什么。我并不为此感到自豪，但IE就是它的本质。它有效，现在已足够了。

    var renderedPng = '';
    var rendering = false;

    $('#snapshot').downloadify({
        filename: function(){
            return 'timeline.png';
        },
        data: function(){
            if(!rendering && renderedPng == ''){
                rendering = true;
                html2canvas($('#timeline'),{
                    onrendered:function(canvas){
                        renderedPng = canvas.toDataURL().replace('data:image/png;base64,','');
                        rendering = false;
                    }
                });
            }
            return renderedPng;
        },
        onComplete:function(){
            renderedPng = '';
        },
        onCancel: function(){
            renderedPng = '';
        },
        dataType: 'base64',
        swf: '../static/bin/downloadify.swf',
        downloadImage: '../static/img/camera_icon_32.png?rev=1',
        width: 32,
        height: 32,
        transparent: true,
        append: false
    });

当Javascript回调无法使用时

1 个答案: