c# - ビューが最初にファイルに保存せずにWebImageを表示することは可能ですか？

Question

WebImageクラスを正しく使用しているかどうかはよくわかりません。

データベースから写真といくつかの関連情報（コメント、アップロード日、ファイル名）を取得するコントローラーがあります。この情報を含む部分的なビューを返し、追加情報とともに画像を表示したいと思います。

それで、バイト配列から新しいWebImageを作成しましたが、どのように表示しますか？

この記事によると、それはかなり単純なはずです

Razor構文を使用して、画像を含む変数を作成する必要があります。
@{ var myImage = WebImage("/Content/myImage.jpg") // Work with the image… }

次に、ページに画像を読み込むには、HTML<img/>タグ内に画像を含む変数を表示する必要があります。
<img src="@myImage"/>

それが機能しないことを除いて、それは単に出力<img src="System.Web.Helpers.WebImage">し、呼び出す.Writeことは役に立ちません。

これを行う方法はありますか、またはアクションを2つの異なるアクションに分割する必要がありますか？1つは写真情報を返すためのもので、もう1つは写真自体を返すためのものですか？

score 9 · Accepted Answer

その場で書き出すことができます！

思ったようにWebImage.Save（）を使用するのではなく、WebImage.GetBytes（）を使用します。

この例では、画像をバイト配列としてデータベースにすでに保存しています。jpegのみを処理するように少し簡略化しました。

    /// <summary>
    /// Reference this in HTML as <img src="/Photo/WatermarkedImage/{ID}" />
    /// Simplistic example supporting only jpeg images.
    /// </summary>
    /// <param name="ID">Photo ID</param>
    public ActionResult WatermarkedImage(Guid ID)
    {
        // Attempt to fetch the photo record from the database using Entity Framework 4.2.
        var photo = db.Photos.Find(ID);

        if (photo != null) // Found the indicated photo record.
        {
            // Create WebImage from photo data.
            // Should have 'using System.Web.Helpers' but just to make it clear...
            var wi = new System.Web.Helpers.WebImage(photo.Data); 

            // Apply the watermark.
            wi.AddImageWatermark(Server.MapPath("~/Content/Images/Watermark.png"), 
                                 opacity: 75, 
                                 horizontalAlign: "Center", 
                                 verticalAlign: "Bottom");

            // Extract byte array.
            var image = wi.GetBytes("image/jpeg");

            // Return byte array as jpeg.
            return File(image, "image/jpeg");
        }
        else // Did not find a record with passed ID.
        {
            return null; // 'Missing image' icon will display on browser.
        }
    }

score 5 · Accepted Answer

とにかく単一のかみそりのビューでそれを行うことはありません...あなたは画像をレンダリングするために別のアクションを作成する必要があります。

ページ上のimgタグは、img srcで提供されたURLに基づいて、サーバーに対して個別のhttp呼び出しを行います。

score 4 · Accepted Answer

データURLを使用して画像を表示してみてください。これにより、画像を一時的にディスクに保存したり、画像を取得するための2番目のHTTPリクエストを回避したりできます。画像をインラインでエンコードするには、1回のラウンドトリップを実行する必要があります。

score 2 · Accepted Answer

WebImageヘルパーがストリームに書き込む機能を提供するとは思わない。そのため、ファイルを一時的な場所（またはキャッシュ可能な場所）に保存してからバイトを読み取り、FileStreamResultコンテンツタイプとデータを指定して画像を書き戻す必要があります。

score 2 · Accepted Answer

WebImageをBase64でエンコードされた文字列に変換し、ページのデータURLで使用できます。HTMLキャンバスを使用すると、これを非常に簡単に実行できます。

サーバー側でBase64文字列を生成し、データURLを作成します

// C# Razor code
WebImage myWebImage;
// you need to now set the WebImage object in your code
string imagebase64string = Convert.ToBase64String(myWebImage.GetBytes());
string dataUrl = string.Format("data:image/jpeg;base64,{0}", imagebase64string);

Razor構文を使用して、データURLをJavascriptコードに挿入します。これにより、ページが読み込まれたときにブラウザで画像がレンダリングされます。

// Javascript Code
var myCanvas = document.getElementById('my-image-canvas');
var imageCtx = myCanvas.getContext('2d');
var myImage = new Image;
myImage.onload = function () {
   imageCtx.drawImage(myImage, 0, 0);
}
myImage.src = '@dataUrl';

以下は、この概念を示すサンプルアプリケーションへのリンクであり、同じ概念を使用して単一のRazorページを使用してASP.Netチャートを簡単にレンダリングする方法を示しています。

https://github.com/webextant/webimage

score 0 · Accepted Answer

@ Brady321のアプローチを使用しました（ありがとう;））が、私のコードは少し異なって見えます（以下を参照）。ブレイディのアプローチの利点は、ファイルをディスクに保存する必要がなく、アップロードして表示するだけで済むことです。

WebImage photo = null;
var dataUrl = "";

if (IsPost)
{
    photo = WebImage.GetImageFromRequest();
    if (photo != null)
    {
        string imagebase64string = Convert.ToBase64String(photo.GetBytes());
        dataUrl = string.Format("data:image/jpeg;base64,{0}", imagebase64string);
    }
}

ファイルのアップロードと表示の部分は次のようになります。

<div class="col-md-4">
    <h2>Display Image on the Fly</h2>
    <h1>Displaying an Image On the Fly</h1>

    <form action="" method="post" enctype="multipart/form-data">
        <fieldset>
            <legend> Upload Image </legend>
            <label for="Image">Image</label>
            <input type="file" name="Image" />
            <br />
            <input type="submit" value="Upload" />
        </fieldset>
    </form>
    <h1>Uploaded Image</h1>
    @if (dataUrl != "")
    {
    <div class="result">

        <img src="@dataUrl" alt="image" />

    </div>
    }
</div>

重要な部分は次のとおりです。<img src="@dataUrl" alt="image" />

score 0 · Accepted Answer

以前の回答と同様に、Brady321の回答に基づいて、Razor/.cshtmlを使用しないASP.NET4.7.2プロジェクトで機能する同様の代替アプローチがあります。これはVB.NETにありますが、C＃でも機能します。

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            . . .
            If IsPostBack Then
                ' A postback
                Dim dataURL As String
                Dim photo As System.Web.Helpers.WebImage
                photo = System.Web.Helpers.WebImage.GetImageFromRequest()
                If (photo IsNot Nothing) Then
                    Dim imagebase64string As String
                    imagebase64string = Convert.ToBase64String(photo.GetBytes())
                    dataURL = String.Format("data:image/jpeg;base64,{0}", imagebase64string)
                    UploadedImage.Src = dataURL
                End If


            . . .
   End Sub

.aspx HTMLは次のようになります（srcパラメーターがないと警告が発生しますが、正常に機能します）。

                                          <form action="" method="post" enctype="multipart/form-data">
                                            <fieldset>
                                                <legend> Upload Image </legend>
                                                <label for="Image">Image</label>
                                                <input type="file" name="Image"  />
                                                <br />
                                                <input type="submit" value="Upload" id="Submit" onsubmit="UploadFile2" runat="server" />
                                            </fieldset>
                                        </form>
                                      <h1>Uploaded Images</h1>

                                      <img  alt="image" id="UploadedImage" runat="server" />

c# - ビューが最初にファイルに保存せずにWebImageを表示することは可能ですか？

7 に答える 7

Related

Reference