Возможно ли, чтобы представление отображало WebImage без предварительного сохранения его в файл? - PullRequest
Новая
       35

Возможно ли, чтобы представление отображало WebImage без предварительного сохранения его в файл?

6 голосов
/ 20 июля 2011

Я не совсем уверен, правильно ли я использую класс WebImage.

У меня есть контроллер, который извлекает фотографию и некоторую связанную информацию (комментарии, дату загрузки, имя файла) избаза данных.Я хочу вернуть частичное представление, содержащее эту информацию, и отобразить изображение вместе с дополнительной информацией.

Итак, я создал новый WebImage из байтового массива, но как его отобразить?

Согласно этой статье все должно быть довольно просто

  1. Вам необходимо поработать с синтаксисом Razor и создать переменную, которая будет содержать изображение:
    @{ var myImage = WebImage("/Content/myImage.jpg") // Work with the image… }

  2. Затем, чтобы загрузить изображение на странице, необходимо отобразить переменную, содержащую изображение, внутри тега HTML <img/>:
    <img src="@myImage"/>

За исключением того, что это не работает, он просто выводит <img src="System.Web.Helpers.WebImage"> и вызов .Write не помогает.

Есть лиспособ сделать это или мне нужно разделить мое действие на два разных действия: одно для возврата информации о фотографии, а другое для возврата самой фотографии?

Ответы [ 5 ]

8 голосов
/ 19 февраля 2012

Вы можете написать это на лету!

Вы просто не используете 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.
        }
    }
5 голосов
/ 20 июля 2011

Нет никакого способа сделать это в виде одной бритвы ... вам нужно создать отдельное действие для рендеринга изображения.

Тег img на странице сделает HTTP ОТДЕЛЬНЫМвызов сервера на основе URL-адреса, предоставленного в src img.

3 голосов
/ 24 ноября 2012

Попробуйте использовать URL данных для отображения изображения. Это позволит избежать временного сохранения изображения на диск и повторного HTTP-запроса для получения изображения. Вам просто нужно сделать одну поездку туда и обратно, чтобы кодировать изображение в строке.

2 голосов
/ 20 июля 2011

Я не верю, что помощник WebImage предоставляет возможность записи в поток. По этой причине вам, вероятно, потребуется сохранить файл во временном местоположении (или в кэшируемом месте), а затем прочитать байты и записать изображение обратно как FileStreamResult, указав тип содержимого и данные.

0 голосов
/ 02 октября 2016

Вы можете преобразовать 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';

Ниже приведена ссылка на пример приложения, который демонстрирует эту концепцию, а также показывает, как легко визуализировать диаграммы ASP.Net, используя одну страницу Razor с использованием той же концепции.

https://github.com/webextant/webimage

...