How to crop images stored in server? I'm not using a form since I'm not uploading the image. How can this be done?
Django View
from .models import Image
def main_view(request):
obj = Image.objects.get(pk=1)
context = {'obj':obj}
return render(request, 'main.html',context)
HTML + CROPPERJS
<img src="{{obj.file.url}}" id="image" width="400px" >
{% csrf_token %}
<input type="button" id="confirm-btn" value="Start cropping" />
<script>
const csrf = document.getElementsByName('csrfmiddlewaretoken')
console.log(csrf)
const image = document.getElementById('image');
const confirmBtn = document.getElementById('confirm-btn')
console.log(image)
const cropper = new Cropper(image, {
aspectRatio: NaN,
crop(event) {
console.log(event.detail.x);
console.log(event.detail.y);
console.log(event.detail.width);
console.log(event.detail.height);
console.log(event.detail.rotate);
console.log(event.detail.scaleX);
console.log(event.detail.scaleY);
/*const canvas = cropper.getCroppedCanvas();
console.log(canvas)*/
}
});
confirmBtn.addEventListener('click', ()=>{
cropper.getCroppedCanvas().toBlob((blob) => {
const formData = new FormData();
console.log(formData)
formData.append('csrfmiddlewaretoken', csrf[0].value)
formData.append('file', blob, 'my-image.png' );
console.log(formData)
$.ajax({
method: 'POST',
enctype: 'multipart/form-data',
data: formData,
processData: false,
contentType: false,
success() {
console.log('Upload success');
},
error() {
console.log('Upload error');
},
});
}/*, 'image/png' */);
});
Edit 1 :
I have arrived to the point where I get: Forbidden (CSRF token missing or incorrect.). There has to be an {% csrf_token %} associated to the post ... something's missing
Edit 2:
Not receiving a csrf error anymore. I receive the post but the image is not being loaded to the media file. Getting closer though.