0

私は、ユーザーがいくつかの画像を作成してサーバーに送信できる、WeChat プラットフォーム用の JavaScript で記述された小さな webapp を持っています。

画像の作成は Canvas2D を使用して行います。

canvas.toDataURL(type,quality) から受信した画像データ文字列を使用してサーバーに画像を送信すると、サーバー PHP スクリプトは、webapp から受信したサーバー側でバイナリ JPG ファイルを作成します。

私が試したすべての電話 (Samsung S3/4/5、Xiaomi、Huawei Honor、Lenovo、Nexus 4/5、iPhone 4S/5/5S/6/6S、iPads...) で問題なく動作します。 . クライアントの Samsung Note 2 を除きます。

彼らのデバイスは、私の Android フォンと同じように、Android 4.3 と最新の WeChat (6.2.6) を実行しています。ただし、写真を提出すると、ファイルサイズは 6 ～ 7 倍大きくなります。

確認したところ、実際に受け取ったファイルはJPGではなくPNGです。

Canvas2D 画像から画像データ文字列を取得するために使用するコードは次のとおりです。

var jpgData = this.finalPicCanvas.toDataURL("image/jpeg",0.5);

このデータ文字列を受け取る PHP スクリプトを設定して、ログ、ヘッダーの内容、受け取った文字列のサイズなどを書き留めました。 JavaScript コードでは「image/jpeg」に設定されています。

これは、png ヘッダーと大きなデータ サイズを示すログです: http://snag.gy/ma39y.jpg

jpg ヘッダーと通常のデータ サイズを示すログは次のとおりです: http://snag.gy/enPvZ.jpg

私は困惑しています、私は何を間違えましたか？仕様を確認したところ、toDataURL は Android 3.4 以降でサポートされているはずです

ブラウザは PNG をサポートする必要がありますが、他の形式をサポートする必要はなく、提供された型が認識されない場合は PNG を返すという 2011 年の仕様を見つけました: http://www.w3.org/TR/ 2011/WD-html5-20110405/the-canvas-element.html#dom-canvas-todataurl

とはいえ、2015年というWebGLやモバイルの時代を考えると、自分にできることは何もないとは思えません。

誰にも解決策がありますか？高く評価！！！

4

1 に答える 1

1

あなたは正しいです。コードを実行しているブラウザは、JPEG を処理しないため、おそらく PNG を返すようです。ここでまったく同じ状況について読むことができます。別の理由として、画像にアルファ チャネルが存在し、アルファ チャネルが存在する場合にブラウザーが JPEG への強制変換をサポートしていないことが考えられます。fillStyleを白に設定することで、これを回避できる可能性があります。詳細については、こちらをご覧ください。

アルファ版の問題ではなく、回避策で問題が解決しない場合は、ここfillStyleにあるような JPEG エンコーダーを試して、次のようなことを行うことができます (GitHub の問題への最初のリンクのスレッドにあるコードから変更されています)。 :

var toDataURLFailed = false,
    encoder,
    url;

try {
  url = canvas.toDataURL('image/jpeg', 0.5);
} catch (e) {
  // android may generate PNG
  toDataURLFailed = true;
}

if (toDataURLFailed || url.slice(0, 'data:image/jpeg'.length) !== 'data:image/jpeg') {
  try {
    encoder = new JPEGEncoder();
    url = encoder.encode(ctx.getImageData(0, 0, width, height), 100);
  } catch (e) {
    // everything has failed here - do whatever you want in this case
  }
}
于 2015-09-19T05:26:29.640 に答える