Question

我已经阅读了一些有关此问题的博客和问题/答案，但其中大多数都已过时，所以我正在寻找当前的情况。

我正在开展一个项目，我需要通过合成来合成其他图像。

在我的工作机器上，带有FX 17.0.1的Windows7，它可以正常运行。即使在IE9上大部分时间它也能正常工作，但我对复合操作并不总是很感激。

在我的老板机器上，Windows Vista SP2 + IE9，它的工作效果不可预测......有时它渲染整个构图，有时只渲染其中一个图像，有时候没有，...

从这个分析： http://weblog.bocoup.com/canvas-in-ie9-too-good-to-be-true/

我推断我无法使用复合操作，因为网站的受众，但我继续搜索，我看到复合操作在开发者网站上有详细记录：

http://msdn.microsoft.com/en-us/library/ie/ff974909%28v=vs.85%29.aspx

那么，这些运营支持的当前状态是什么？

我需要具有完整功能的应用程序：

Internet Explorer 9
Firefox 20
Chrome 30
Opera 12
Safari 5

我将理解有关此问题的任何澄清。

提前致谢。

PS.-我需要对复合操作做的主要代码是：

编辑：如果你看到我能做得更好，这种行为可能因为我编写代码的方式，我会很感激提示改进它。

$.fn.buildScooter = function(canvas, ctx, scoPath, supPath, sustPath, colourPath) {
    var supImg   = '';
    var sustImg  = '';
    var paintImg = '';
    var scoImg   = new Image();
    scoImg.onload = function() {
        if (supPath !== '') {
            supImg = new Image();
            supImg.onload = function() {
                sustImg = new Image();
                sustImg.onload = function() {
                    ctx.drawImage(scoImg, 0, 0, canvas.width , canvas.height);

                    ctx.globalCompositeOperation = 'destination-out';
                    ctx.drawImage(supImg, 0, 0, canvas.width , canvas.height);


                    ctx.globalCompositeOperation = 'source-in';
                    ctx.drawImage(scoImg, 0, 0, canvas.width , canvas.height);


                    ctx.globalCompositeOperation = 'source-over';
                    ctx.drawImage(sustImg, 0, 0, canvas.width , canvas.height);

                    if (colourPath !== '') {
                        paintImg = new Image();
                        paintImg.onload = function() {
                            ctx.globalCompositeOperation = 'source-over';
                            ctx.drawImage(paintImg, 0, 0, canvas.width , canvas.height);
                            jQuery().showScooter();

                        }
                        paintImg.onerror = function() {
                            jQuery('#messages').html('<p style="color:red;">No hay imagen disponible: </p><p style="color:white">' + paintImg.src + '</p>');
                            jQuery().showScooter();
                        }
                        paintImg.src = colourPath;
                    } else {
                        jQuery().showScooter();
                    }
                }
                sustImg.onerror = function() {
                    jQuery('#messages').html('<p style="color:red;">No hay imagen disponible: </p><p style="color:white">' + sustImg.src + '</p>');
                    jQuery().showScooter();
                }
                sustImg.src = sustPath;
            }
            supImg.onerror = function() {
                jQuery('#messages').html('<p style="color:red;">No hay imagen disponible: </p><p style="color:white">' + supImg.src + '</p>');
                jQuery().showScooter();
            }
            supImg.src = supPath;

        } else {
            ctx.drawImage(scoImg, 0, 0, canvas.width , canvas.height);
            if (colourPath !== '') {
                paintImg = new Image();
                paintImg.onload = function() {
                    ctx.globalCompositeOperation = 'source-over';
                    ctx.drawImage(paintImg, 0, 0, canvas.width , canvas.height);
                    jQuery().showScooter();
                }
                paintImg.onerror = function() {
                    jQuery('#messages').html('<p style="color:red;">No hay imagen disponible: </p><p style="color:white">' + paintImg.src + '</p>');
                    jQuery().showScooter();
                }
                paintImg.src = colourPath;
            } else {
                jQuery().showScooter();
            }
        }
    }
    scoImg.onerror = function() {
        jQuery('#messages').html('<p style="color:red;">No hay imagen disponible: </p><p style="color:white">' + scoImg.src + '</p>');
        jQuery().showScooter(canvas);
    }
    scoImg.src = scoPath;
}

编辑II：

根据Ken的建议，我已将代码更新为（最简单的情况）

function myHandler() {
    var canvas = document.getElementById('scooter-canvas');
    var ctx = canvas.getContext("2d");

    ctx.clearRect (0 , 0 , canvas.width , canvas.height);

    ctx.drawImage(this, 0, 0, canvas.width , canvas.height);
    jQuery().showScooter();
}

$.fn.buildScooter = function(scoPath, supPath, sustPath, colourPath) {
    var img = new Image();
    img.onload = myHandler;
    img.src = scoPath;

    if (img.complete) myHandler().bind(img);
}

但有时仍然会渲染图像。

jQuery（）。showScooter（）只是删除一个叠加层，并显示带有动画不透明度的canvas元素。

$.fn.showScooter = function() {
    jQuery('#scooter-canvas').css('display', 'block');
    jQuery('#scooter-canvas').css('opacity', 0);
    jQuery('#scooter-canvas').animate({
        opacity: 1,
    }, 400, function() {jQuery('#overlay').remove();});
}

编辑4：

奇怪的是，如果我在（img.complete）条件中添加了一个else语句，我总会得到这条消息，但myHandler被解雇了。

function myHandler() {
    var canvas = document.getElementById('scooter-canvas');
    var ctx = canvas.getContext("2d");

    ctx.clearRect (0 , 0 , canvas.width , canvas.height);

    ctx.drawImage(this, 0, 0, canvas.width , canvas.height);
    console.log(this.src + ' drawed');

    jQuery().showScooter();
}

$.fn.buildScooter = function(scoPath, supPath, sustPath, colourPath) {
    var img = new Image();
    img.onload = myHandler;
    img.src = scoPath;

    if (img.complete) myHandler().bind(img);
    else console.log('No se ha completado la carga: ' + img.src);
}

图像有时呈现，我不知道如何得到原因。

REGISTRO: no se ha completado la carga http://cfg.scooter.dev.inetpsa.com/img/3PSCO/1P/Pictures/D/Background/3PSC1PD2TB01A010_ZZZZZZZZ_0PAL0RFC_001_01.png 

REGISTRO: http://cfg.scooter.dev.inetpsa.com/img/3PSCO/1P/Pictures/D/Background/3PSC1PD2TB01A010_ZZZZZZZZ_0PAL0RFC_001_01.png drawed

Answer 1

IE存在onload的问题（错误），如果图像存在于缓存中，则不会始终触发。

要在IE上检测到这一点，您必须使用图像的complete标志，如果是，则以此方式调用您的处理程序。只需将图像onload处理程序代码重新分解为非匿名函数：

img.onload = myHandler;
img.src = url;

if (img.complete) myHandler().bind(img);

function myHandler() {
    ...
}

bind确保上下文（this）与onload一样是图像。

IE中的html5复合操作

1 个答案: