javascript - Firefox drawImage 将图像着色为蓝色

Question

我的客户在 Windows 上的 Firefox 12 中遇到了一个奇怪的错误: Canvas 中绘制的图像周围出现蓝色框。 Canvas 位于 fancybox div 内的 iframe 内。您可以通过单击本网站主图像下的图像缩略图来查看此操作的实际效果: http://mattmatthias.com/a/index.php?route=product/product&path=20&product_id=80

起初，我认为这是一个选择问题，尽管绘制的图像本身而不是整个 Canvas 的事实似乎反驳了这一点。我一次又一次地尝试模糊 Canvas 、容器 div、iframe...一切，但无济于事。

更糟糕的是，我无法重现这个错误。我的 Mac 上的 Safari、Firefox、Chrome 和 Opera 一切正常。

这可能是有问题的代码，因为它是绘制任何内容的代码的唯一部分:

    if(imageWidth == 0) return;

    context.clearRect(0, 0, canvasWidth, canvasHeight);



    var x_adjust = -x-(ratio*canvasWidth    -canvasWidth        )/2;
    var y_adjust = -y-(ratio*canvasHeight   -canvasHeight       )/2;

    var width   = scaledWidth*ratio;
    var height  = scaledHeight*ratio;


    if(x_adjust < canvasWidth - width)
        x_adjust = canvasWidth - width;

    if(x_adjust > 0)
        x_adjust = 0;

    if(y_adjust < canvasHeight - height)
        y_adjust = canvasHeight - height;

    if(y_adjust > 0)
        y_adjust = 0;


    if(width < canvasWidth) {
        x_adjust += (canvasWidth - width) / 2;
    }
    if(height < canvasHeight) {
        y_adjust += (canvasHeight - height) / 2;
    }


    context.drawImage(image, 0, 0,
                      imageWidth, imageHeight,
                      x_adjust, y_adjust,
                      width, height);

有什么想法吗？当我获得更多详细信息时，我会将其发布在这里。

Answer 1

这与 Canvas 无关；刚刚开业the image在 Firefox 中也显示了同样的事情。所以这是读取/渲染图像的问题。

This Mozilla support issue听起来正是这里发生的情况，并且与颜色管理问题有关。

事实上，从图像文件中删除颜色配置文件会使图像看起来正确。

根据具体情况，您可能需要进行一些转换，而不是仅仅删除配置文件；是否有必要取决于特定的图像、配置文件，以及色彩管理即使远程也有机会在访问者的显示器上产生有意义的内容的可能性有多大(除非您迎合图形设计师:可能不是很大)。