1

我的客户在 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);

有任何想法吗？当我得到更多细节时，我会在这里发布它们。

4

1 回答 1

0

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

这个 Mozilla 支持问题听起来正是这里发生的事情，它与颜色管理问题有关。

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

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

于 2012-07-01T18:17:47.473 回答