3

概要: ブラウザーで canvas 要素を使用して白いスマイリー フェイスを描画するとします。このキャンバスから Safari で js/ajax ( toDataUrl('image/png') を使用) 経由で PHP サーバーに POST する画像文字列を生成すると、PHP 関数 imagecreatefromstring() および imagepng() を使用してサーバー上に作成された画像が適切な高さと幅ですが、ブラウザのキャンバスのスマイリーフェイスではなく、すべて白です。

base64_decoding の前に文字列から「data:image/png;base64」を取り除き、画像ファイルに保存しています。

この方法は、FF と Chrome で問題なく機能します。

toDataUrl が js で生成している base64 でエンコードされた文字列は、サーバーが受信している文字列と同じであることが検証されているため、転送で途切れることはありません。

toDataUrl() から画像文字列をブラウザにロードすると、描画された画像が期待どおりに表示されます。ただし、サーバー上で生成される newimage.png はすべて白です。

サーバーで説明する必要があるbase64文字列に画像をエンコードするためにSafariが行うこととは何か違いがありますか? もしそうなら、どんなブラウザでも画像文字列から正しいスマイリーフェイスをレンダリングできるので、それほど劇的であってはなりません。

さらに情報が必要な場合は、お気軽にお知らせください。

前もって感謝します！

編集:Safariが透明性を保存する方法に関連している可能性がありますか?

4

1 に答える 1

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 );

このようなものは、より一貫した結果を生成するはずです。

于 2012-04-23T19:25:41.983 に答える