Показать numpy массив как изображение в Django

Question

Я новичок в Django Framework. Я создаю веб-сайт, который получает изображение от пользователя, затем обрабатывает изображение и возвращает массив numpy (обработанное изображение). Я хочу показать массив numpy как изображение. Как я могу это сделать? Спасибо за чтение и помощь?

index. html

<form name="image" method = "post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Upload</button>
</form>

Index view

def index(request):
    if request.method == 'POST':
        form = UploadFileForm(request.POST, request.FILES)
        if form.is_valid():
            model = MyDeepLearningModel.get_instance()
            file_name = request.FILES['file']

            processed_image = model.run_png(file_name) #processed_image is an numpy array

            #how to show the processed_image in index.html?
            return render(request, 'lowlighten/index.html')
    else:
        form = UploadFileForm()
    return render(request, 'lowlighten/index.html', {'form': form})

Answer 1

Хорошо, давайте сначала договоримся о чем-то: чтобы показать изображение во внешнем интерфейсе, вам нужно иметь URL-адрес этого изображения, это изображение должно существовать где-то в известном месте, чтобы его мог загрузить внешний интерфейс.

Я предполагаю, что вы не желаете сохранять это изображение где-либо, например imgur или что-то в этом роде, поэтому лучше всего сделать данные URI из этого изображения.

Сначала нам нужно преобразовать ваш numpy массив в изображение:

from PIL import Image 

def to_image(numpy_img):
    img = Image.fromarray(data, 'RGB')
    return img

Затем, чтобы получить URI из этого изображения, нам нужно еще обработать его:

import base64
from io import BytesIO
def to_data_uri(pil_img):
    data = BytesIO()
    img.save(data, "JPEG") # pick your format
    data64 = base64.b64encode(data.getvalue())
    return u'data:img/jpeg;base64,'+data64.decode('utf-8') 

Теперь ваше изображение закодировано как данные uri, вы можете передать эти данные uri во внешний интерфейс и использовать их в теге img

<img src={{ image_uri }} />

Исходя из этого, мы можем изменить вашу функцию следующим образом:

def index(request):
    if request.method == 'POST':
        form = UploadFileForm(request.POST, request.FILES)
        if form.is_valid():
            model = MyDeepLearningModel.get_instance()
            file_name = request.FILES['file']

            processed_image = model.run_png(file_name) #processed_image is an numpy array
            pil_image = to_image(processed_image)
            image_uri = to_data_uri(pil_image)

            #how to show the processed_image in index.html?
            return render(request, 'lowlighten/index.html', {'image_uri': image_uri})
    else:
        form = UploadFileForm()
    return render(request, 'lowlighten/index.html', {'form': form})