6

我知道您不应该在 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 是一朵特殊的花。

4

1 回答 1

5

对于花了一整夜试图让 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
    });
于 2013-02-15T02:50:10.340 回答