2

画像を取得するコントローラー:

public class PicturesSmallController : Controller
{
  public ActionResult Details(int id)
  {
    PictureSmallManager m = new PictureSmallManager();
    PictureSmall p = m.Load(id);
    ImageFormat imageFormat = ImageHelper.ConvertToImageFormat(p.ContentType);
    return p.Trunk != null ? File(p.Trunk, p.ContentType) : null;
  }
}

とビュー:

<script type="text/javascript">
  $(document).ready(function () {
  var picsSmall = $('#picturesSmall');
  picsSmall.toggle();
  var url = '@Url.Action("Details", "PicsSmall")';
  var ai = {
    id: 69
  };
  $.ajax({
    type: "POST",
    url: url,
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(ai),
    success: function (returndata) {
        picsSmall.append($('<img/>', {
          src: returndata,
          alt: 'some text'
        }));
      select.show('slow');
    }
  }
 );
});
</script>
<div id="picturesSmall"></div>
<div id="picturesBig"></div>

その結果、ページに画像は表示されませんが、FireBug で同じ結果が得られました。

<div id="picsSmall" style="display: block;">
<img src="�����JFIF��`�`���� ...... �d��:1�g�" alt="some text">
</div>

2 つの質問があります。

  1. 画像を正しく表示したい。ここで何が問題なのか教えていただけますか? 私はmvcが苦手です。
  2. 私は2つの同じ画像を持っています。最初の画像は小さく、2番目の画像は大きいです。ユーザーが小さな画像をクリックしたときに大きな画像を表示したいと思います。それを実装する最良の方法は何ですか？

画像がクライアント側に読み込まれるタイミングを正しく理解している場合は、ViewBag に保存する必要があります。それが正しければ、小さい画像と大きい画像を同期する最良の方法は何ですか (クライアント側で配列またはオブジェクトを使用する必要があります)? 他の方法はありますか？申し訳ありませんが、予想よりも複雑に見えます。

4

3 に答える 3

3

オブジェクトをImageオブジェクトに変換できる場合（または画像オブジェクトを取得している場合）、メソッドの戻りタイプをFileContentResultに設定し、MemoryStreamを返すことができます。次に、srcをコントローラーメソッドへのパスに設定します。

コントローラには、次のような効果があります。

public class MyController : Controller
{
    public FileContentResult GetImage(int id)
    {
        Image myimage = Bitmap.FromFile(Server.MapPath("~/Images/myimage.jpg"));
        var format = System.Drawing.Imaging.ImageFormat.Jpeg;
        string mimeType = "jpeg";

        MemoryStream ms = new MemoryStream();
        myimage.Save(ms, format);

        return File(ms.ToArray(), "images/" + mimeType);
    }
}

意見：

<img src="/MyController/GetImage?id=<%: myImageId %>" />
于 2012-06-26T21:55:06.303 に答える
2

アクションから画像バイトを返しています。raw バイトをソースとして設定することはできませんが、データ URI スキームをソースとして使用できます。アクションから返された形式を、base64 でエンコードされた画像のバイトを含む適切な形式の文字列に変更する必要があります。一部のブラウザでは、データのサイズに制限があることに注意してください。

ウィキペディアのページからのサンプル:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
于 2012-06-26T20:23:01.203 に答える
2

画像scrを次のように設定します

src = "data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsY......

UI Bloxkプラグインを使用して大きな画像を開くためにクリック可能なサムネイルを表示することに関して

于 2012-06-26T20:25:58.483 に答える