容量の大きい画像を描画時に画像の右端・下部分が切れてしまう。

Question

WEBのImageコントロールに容量の大きい画像(1MB~)を描画しようとすると
画像の右端・下部分が切れた状態で表示されてしまいます。

この原因や調査のポイントがあればご教授お願いします。

ちなみに、開発者ツールのネットワークツールで調べてみたところ、
サーバーからレスポンスを受け取った段階で切れた画像がかえっています。

○参考情報
・サーバー言語はC#
・画像の描画はGraphicsクラスのDrawImageメソッドを使用
・画像の描画時はサーバーに問い合わせを行っている（ポストバックが生じている）
・画像はリサイズせずそのままのサイズで描画させている（仕様）
・Web.configのmaxRequestLengthは10MB程度に設定

Comments

[tkanda]

画像のサイズとファイル形式が必要かと思います。
あと、下記の情報があればベターです。
・ブラウザの種類とバージョン
・別のブラウザでも発生するかどうか
・OSとバージョン
・別のPC、別のOSでも発生するかどうか
・ブラウザの「ソースを表示」で <img> がどのようになっているか
いかがでしょうか？

[trtl21]

今、わかる範囲でお答えします。

・画像のサイズとファイル形式
→Height=2400px、Width=3200px程度、jpegファイルになります。
　容量が10KB程度で縦横6000pxぐらいの画像では現象が発生しませんでした。
・ブラウザの種類とバージョン
→IE10になります。
・別のブラウザでも発生するかどうか
→発生します。
・別のPC、別のOSでも発生するかどうか
→別PCでは発生します。別OSで発生するかどうかは確認できておりません。

[tkanda]

DrawImage() で書き込んでいる画像は、もともとファイルから読み込んだものですか？それとも、独自に描画した画像ですか？
外部ファイルから読み込んでいる場合、その画像ファイルのDPIは解りますか？
それと、可能でしたら DrawImage() をどのように呼び出しているか示していただけると何かヒントがあるかもしれません。

Answer 1

サーバーからレスポンスの時点で切れているという事ですので、サーバ側の設定等で
解決できそうな気もしますが、以前似たような状況を実装で解決した事があるので、
少しでも参考になればと思い、以下、情報を投げておきます。

環境は異なりますが、3年ほど前 HTML5 の Canvas 上の画像描画で 2000px～4000px 程度の幅を持つ
巨大な１枚の画像(jpeg/png)をそのまま描画しようとすると、PC のブラウザでは問題ないのに
当時の iPad の Safari において画像が途中で切れてしまう状況に遭遇したことがあります。

全くスマートな解決策ではないのですが、画像を 400px 程度のタイル状に分割したものであれば、
切れずに表示できる事が解ったので、その時は並べて描画することで問題を回避しました。
※ 画像のファイルサイズが問題だったのかは？検証していません

私の場合は、拡大縮小移動やらもシステムに必要な機能だったため、見えているタイルのみを
描画する最適化処理や調整を行ったり、作るのに大変苦労した覚えがあるので、
この方法は全く他人にオススメできないのですが、もし、別の簡単な解決策が見つからず、
画像を分割して扱う方法の採用に支障が無いのであれば、試す価値があるかもしれません。

蛇足にはなりますが、リアルタイムに画像分割すると同時処理件数によってはサーバの
パフォーマンスに問題が出るかもしれません。その場合、事前に分割してキャッシュを
用意しておくのが一つの解決策です。こういったシーンでは ImageMagick/GraphicsMagick 等の
ツールを裏で定期的に動かすような仕組みを検討するのも手でしょう。

以上、ご参考になれば幸いです。