2012-07-01 1 views
1

내 클라이언트가 Windows의 Firefox 12에서 기괴한 버그가 발생했습니다. 캔버스의 그려진 이미지 주위에 파란 색조의 상자가 나타납니다. 캔버스는 fancybox div 내부의 iframe 안에 있습니다. 이 사이트의 기본 이미지 아래에있는 이미지 미리보기 이미지를 클릭하면 다음과 같이 볼 수 있습니다. http://mattmatthias.com/a/index.php?route=product/product&path=20&product_id=80Firefox drawImage tinting 이미지 파란색

처음에는 필자가 선택한 이미지라고 생각했으나 실제로는 선택 문제라고 생각했습니다. 전체 캔버스가 그것을 반박하는 것으로 보인다. 나는 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); 

어떤 아이디어 :

blue shade

은 아무것도 그리는 코드의 유일한 부분으로, 아마 잘못된 코드? 내가 더 자세한 내용을 알게되면 여기에 게시 할 것입니다.

답변

0

이것은 캔버스와 관련이 없습니다. Firefox에서 the image을 열면 똑같은 것을 볼 수 있습니다. 따라서 이미지를 읽거나 렌더링 할 때 문제가됩니다.

This Mozilla support issue은 정확히 무슨 일이 일어나는 지 같은데 소리 관리 문제와 관련이 있습니다.

실제로 이미지 파일에서 색상 프로파일을 제거하면 이미지가 올바르게 보이게됩니다.

특정 경우에 따라 프로필을 스트립하는 대신 일부 변환을 대신 수행 할 수 있습니다. 그것이 필요한지 여부는 특정 이미지, 프로필 및 색상 관리가 원격지에서 방문자의 모니터에서 의미있는 것을 생산할 가능성이 얼마나 큰지에 달려 있습니다 (그래픽 디자이너를위한 것이 아닌 경우 : 아마도 그리 크지 않을 것입니다).