Firefox drawImage着色图像蓝色

Question

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

起初，我认为这是一个选择问题，尽管绘制的图像本身而不是整个画布似乎反驳了这一点。我一次又一次地尝试blur画布，容器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

这与画布无关;在Firefox中打开the image显示同样的事情。所以这是读取/渲染图像的问题。

This Mozilla support issue听起来就像这里发生的事情，它与色彩管理问题有关。

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

根据具体情况，您可能需要进行一些转换，而不仅仅是剥离配置文件;这是否必要取决于特定的图像，配置文件，以及颜色管理甚至远程有可能在访问者的监视器上产生有意义的东西的可能性有多大（除非你迎合平面设计师：可能不是很大）。 / p>