Отображение изображения в django

Question

У меня есть Django веб-приложение, в котором я загружаю изображение и показываю некоторые тексты. Но я не могу показать изображение в интерфейсе после загрузки.

views.py

def index(request):
    if request.method == "GET":
        return render(request, 'index.html')
    elif request.method == "POST":
        input_file = request.FILES['file']
        media_root = settings.MEDIA_ROOT
        fs = FileSystemStorage()
        filename = fs.save(input_file.name, input_file)
        uploaded_file_url = fs.url(filename)
        filepath = os.path.join(media_root, filename)
        images = segment_lines(filepath)
        extracted_text = extract()
        copy2(filepath, '/home/user/ocr/ocr/static/'+ filename)
        response = { "response" : extracted_text, "img": filename}
        return JsonResponse(response, safe=False)

index.html

<form action="" id="file-form" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="row">
        <div class="col-sm-10 col-md-10 col-lg-9">
            <div class="form-group">
               <div class="input-group">
                   <div class="input-group-prepend">
                       <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
                    </div>
                    <div class="custom-file">
                        <input type="file"  accept="image/*" name="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
                        <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                    </div>
                </div>           
            </div>            
      </div>

      <div class="col-sm-2 col-md-2 col-lg-3">
          <span class="upload-btn">
          <button type="submit" id='upload-button' class="btn btn btn-outline-dark">Extract</button>
          </span>
      </div>
     </div>
 </form>
<div class="row" style="border:none;">
      <div class="col-xs-6 mx-auto" id="img_data">
      </div>
      <div class="col-xs-6 mx-auto" id="content_data">
      </div>
</div>
<script type="text/javascript">
    var form = document.getElementById('file-form');
    var fileSelect = document.getElementById('inputGroupFile01');
    var uploadButton = document.getElementById('upload-button');

    form.onsubmit = function(event) {
      event.preventDefault();
      uploadButton.innerHTML = 'Processing ...';
      var file = fileSelect.files[0];
      var formData = new FormData();
      formData.append('file', file, file.name);
      formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'http://127.0.0.1:8000', true);

      xhr.onload = function () {

        if (xhr.status === 200) {
          uploadButton.innerHTML = 'Extract';
          var data = JSON.parse(xhr.responseText);
          var follow_up = data['response'];
          var corrected = data["correct_response"]
          var demoid = document.getElementById("content_data");

          var btnid = document.getElementById('btn-data')
          var imgid = document.getElementById('img_data')
          var img_path = data["img"]
          var final_content = follow_up;
          demoid.innerHTML = '<h3>Extracted Text</h3><p id="rcorners3">' + final_content + '</p>'
</script>

Как я могу показать загруженное изображение здесь, у меня мало опыта с javascript, так что если кто-нибудь может помочь мне в этом!

Я до сих пор пробовал передать URL-адрес пути изображения и с помощью {% stati c%} попытался показать изображение, как показано ниже

imgid.innerHTML = '<h3>Your Image</h3><img class="id-of-img-tag" src="" alt="img" style="width:300px;height:300px;margin-right:15px;">'
document.querySelector(".id-of-img-tag").src = "{% static " + img_path + " %}";

Answer 1

Если путь к вашему изображению действителен, то вы должны создать изображение с помощью конструктора new Image(). Это похоже на выполнение document.createElement('img') для создания изображения. Конструктор возвращает экземпляр HTMLImageElement, который в основном эквивалентен JavaScript элементу <img>.

Чтобы обеспечить правильную загрузку, прослушайте событие load на изображении. Чтобы после загрузки изображения вы могли добавить его на страницу.

Затем установите свойство src изображения (которое также установит атрибут), чтобы начать загрузку изображения с вашего сайта. c папка.

...
var btnid = document.getElementById('btn-data')
var imgid = document.getElementById('img_data')
var img_path = data["img"]

var image = new Image();
image.addEventListener('load', function() {
  var title = document.createElement('h3');
  title.textContent = 'Your image';
  image.className = 'id-of-img-tag';
  image.alt = 'img';
  image.style.width = '300px';
  image.style.height = '300px';
  image.style.marginRight = '15px';
  imgid.append(title, image);
}, {once: true});
image.src = img_path;

var final_content = follow_up;
demoid.innerHTML = '<h3>Extracted Text</h3><p id="rcorners3">' + final_content + '</p>'

Answer 2

Возможно, вы захотите использовать fs.url() для восстановления URL-адреса сохраненного изображения.

Кроме того, как обсуждалось в комментариях, segment_lines() должен действительно возвращать список имен файлов, которые extract_text() буду использовать. В противном случае, если / когда вы используете одну временную папку, одновременные запросы вызовут havo c.

from django.core.files.storage import FileSystemStorage
from django.http import JsonResponse


def extract_text(input_paths):
    # ... Do some magic using the input paths ...
    return 'hello'


def segment_lines(image_path):
    return [
        # ... file paths for segmented result...
    ]


def handle(request):
    input_file = request.FILES['file']
    fs = FileSystemStorage()
    filename = fs.save(input_file.name, input_file)
    images = segment_lines(fs.path(filename))
    extracted_text = extract_text(images)
    response = {"response": extracted_text, "img_url": fs.url(filename)}
    return JsonResponse(response)

Упрощенная версия вашего HTML, затем, используя fetch() и данные формы :

<form action="" id="file-form" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="file" accept="image/*" name="file" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
    <button type="submit" id='upload-button' class="btn btn btn-outline-dark">Extract</button>
</form>
<div id="content_data"></div>
<script type="text/javascript">
  var form = document.getElementById('file-form');
  var uploadButton = document.getElementById('upload-button');

  form.onsubmit = function (event) {
    event.preventDefault();
    uploadButton.innerHTML = 'Processing ...';
    fetch('/', {body: new FormData(form)})
      .then(resp => resp.json())
      .then(data => {
        console.log(data);
        const demoid = document.getElementById('content_data');
        demoid.innerText = JSON.stringify(data);
        // or to show the image:
        // demoid.innerHTML = `<img src="${data.img_url}"/>`;
      });
  };
</script>

Возможно, что-то здесь я пропустил.