Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/420.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Firefox drawImage将图像着色为蓝色_Javascript_Fancybox - Fatal编程技术网

Javascript Firefox drawImage将图像着色为蓝色

Javascript Firefox drawImage将图像着色为蓝色,javascript,fancybox,Javascript,Fancybox,我的客户在Windows上的Firefox12中遇到了一个奇怪的错误:画布上绘制的图像周围出现了一个蓝色的框。 画布位于fancybox div中的iframe中。您可以通过单击此网站主图像下的图像缩略图来查看此操作: 起初,我认为这是一个选择的问题,虽然事实上,绘制的图像本身而不是整个画布似乎反驳了这一点。我一次又一次地尝试模糊画布、容器div、iframe。。。一切都没有用 更糟糕的是,我无法复制这个错误。在我的mac上,Safari、Firefox、Chrome和Opera中的所有功能都

我的客户在Windows上的Firefox12中遇到了一个奇怪的错误:画布上绘制的图像周围出现了一个蓝色的框。 画布位于fancybox div中的iframe中。您可以通过单击此网站主图像下的图像缩略图来查看此操作:

起初,我认为这是一个选择的问题,虽然事实上,绘制的图像本身而不是整个画布似乎反驳了这一点。我一次又一次地尝试模糊画布、容器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);
if(imageWidth==0)返回;
clearRect(0,0,画布宽度,画布高度);
var x_adjust=-x-(比率*画布宽度-画布宽度)/2;
变量y_adjust=-y-(比率*画布高度-画布高度)/2;
变量宽度=标度宽度*比率;
变量高度=标度高度*比率;
如果(x_调整<画布宽度-宽度)
x_adjust=画布宽度-宽度;
如果(x_调整>0)
x_调整=0;
如果(y_调整<画布高度-高度)
y_调整=画布高度-高度;
如果(y_调整>0)
y_调整=0;
如果(宽度<画布宽度){
x_adjust+=(画布宽度-宽度)/2;
}
if(高度<画布高度){
y_调整+=(画布高度-高度)/2;
}
context.drawImage(图像,0,0,
图像宽度,图像高度,
x_调整,y_调整,
宽度、高度);

有什么想法吗?当我得到更多细节时,我会把它们贴在这里。

这与画布无关;仅仅在Firefox中打开就可以看到同样的情况。因此,读取/渲染图像是一个问题

听起来就像这里发生的事情,它与颜色管理问题有关

实际上,从图像文件中删除颜色配置文件可以使图像看起来正确

根据具体情况,您可能需要进行一些转换,而不是仅仅剥离外形;这是否有必要取决于特定的图像、配置文件,以及颜色管理即使是远程管理也有可能在访问者的显示器上产生有意义的东西的可能性有多大(除非你迎合图形设计师:可能不是很大)