Изображение для предварительного просмотра будет сжиматься, но загрузка изображения не будет - PullRequest
Новая
       80

Изображение для предварительного просмотра будет сжиматься, но загрузка изображения не будет

0 голосов
/ 20 июня 2020

Во-первых, я новичок в Javascripts & Jquery

Я хочу сжать изображение перед загрузкой.

мой preview image будет сжиматься, но я хочу для замены выбранного изображения его версией сжатия. , чтобы при отправке формы пользователем сжатое изображение не отправлялось в несжатом виде.

HTML

<form  enctype="multipart/form-data" class="shadow-lg p-3 mb-5 bg-white rounded" method="POST">
  {% csrf_token %}
  <!-- #input imagr with id=file  -->
  {{ form.image|as_crispy_field }}
  {{ form.info_post|as_crispy_field }}
  Preview Image - <br>
     <img id="original-Img"/> <br>
  <input class="btn btn-danger" type="submit" value='Post'>
</form>

// JAVASCRIPTS 

<script>
  document.getElementById("file").addEventListener("change", function (event) {
    compress(event);
  });

  function compress(e){
    const width = 300;
    const fileName = e.target.files[0].name;
    const reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onload = event => {
        const img = new Image();
        img.src = event.target.result;
        img.onload = () => {
                const elem = document.createElement('canvas');
                const scaleFactor = width / img.width;
                elem.width = width;
                elem.height = img.height * scaleFactor;
                const ctx = elem.getContext('2d');
                // img.width and img.height will contain the original dimensions
                ctx.drawImage(img, 0, 0, width, img.height * scaleFactor);

                ctx.canvas.toBlob((blob) => {
                    const file = new File([blob], fileName,{
                        type: 'image/jpeg',
                        lastModified: Date.now()
                    });
                }, 'image/jpeg', 0.8);
              document.getElementById("original-Img").src = elem.toDataURL();
            
            },
            reader.onerror = error => console.log(error);
    }
  }    

  </script>

foms.py 

class PostForm(forms.ModelForm):
    #image = forms.URLField(widget=S3DirectWidget(dest="mainpost"),required=False)
    class Meta:
        model = MainPost
        fields = ('image','info_post',)
        widgets = {
            'info_post': forms.Textarea(attrs={'rows':2}),
            'image': forms.FileInput(attrs={"id":'file',"accept":"image/*","type":"file","name":"image"}),
        }
...