2012-04-23 2 views
3

요약 : 브라우저에 캔버스 요소가있는 흰색 웃는 얼굴을 그립니다. Safari에서 js/ajax (toDataUrl ('image/png') 사용)를 통해이 캔버스에서 PHP 서버로 POST 할 이미지 문자열을 생성하면 PHP 함수 imagecreatefromstring() 및 imagepng()을 사용하여 서버에 생성 된 이미지가 오른쪽 높이와 너비이지만 브라우저의 캔버스에서 웃는 얼굴 대신 모든 흰색입니다.. Safari에서 PHP로 .toDataURL()이 전체 흰색 이미지 (그려진 영역이 아님)

base64_decoding 전에 문자열에서 "data : image/png; base64"를 제거하고 이미지 파일에 저장합니다.

이 방법은 FF와 Chrome에서 완벽하게 작동합니다.

toDataUrl이 js에서 생성하는 base64 인코딩 된 문자열은 서버에서 수신하는 것과 동일한 문자열로 확인되므로 전송시 잘리지 않습니다.

toDataUrl()에서 이미지 문자열을 모든 브라우저로로드하면 예상 한대로 그려진 이미지가 표시됩니다. 그러나 서버에서 생성 된 newimage.png은 완전히 흰색입니다.

사파리가 서버에서 차지할 필요가있는 base64 문자열로 이미지를 인코딩하는 데 뭔가 다른 점이 있습니까? 그렇다면 브라우저가 이미지 문자열에서 올바른 웃는 얼굴을 렌더링 할 수 있기 때문에 너무 격렬하지 않아야합니다.

자세한 정보가 필요하면 알려주세요.

미리 감사드립니다.

EDIT : Safari의 투명성 유지 방법과 관련이있을 수 있습니까?

+0

사파리와 FF의 'toDataUrl'에 의해 생성 된 문자열을 게시하여 다른 점을 확인할 수는 없습니까? –

답변

1

투명하지 않은 이미지를 내보내려고 했습니까? toDataURL을 호출하기 전에 단색으로 배경을 채우는 것이 좋습니다.

var ctx = document.getElementById('my_canvas').getContext('2d'); 
var w = $("#my_canvas").width(); 
var h = $("#my_canvas").height(); 
ctx.globalCompositeOperation = 'lighter'; 
ctx.fillStyle = "#000"; 
ctx.fillRect(0, 0, w, h); 

이렇게하면 좀 더 일관된 결과를 얻을 수 있습니다.

+0

샷이 가치가 있습니다 –

+0

완벽하게 작동했습니다! 문자열은 FF, Chrome 및 Safari와 완전히 똑같은 (공백) 마스크와 다르기 때문에 문자열을 다르게 인코딩합니다. 그러나 투명한 영역을 채우는 것이 트릭을 만들었습니다. 감사! –

관련 문제