CODEWITHSUNDEEP
jqueryjquery-file-uploadblueimp
dav
dav

Reputation: 9267

Blue imp file upload client size image resize and crop

I am using this jquery image upload plugin https://github.com/blueimp/jQuery-File-Upload

What I need is to to resize/crop the image in client size, so it will have exact height and width, and then upload into server.

this is the part of the script for upload, and it works fine, the only problem, is that it just resizes the image without cropping and I end up having the uploaded image with e.g. width 150 px and height say 133 px (though the height and width of the initial picture is more than 1000 px, and I want exact height and width - 150px). From the option list I thought imageCrop should do the trick, https://github.com/blueimp/jQuery-File-Upload/wiki/Options#imagecrop, but it does not. Am I doing something wrong, or the plugin does not support the functionality, that I need ? And if so, is there any way I can achieve what I need using some external library/function using with this plugin ?

Thanks

edit:

I also tried this options as well

 canvas: true,
 cover: true,
 crop: true,
 thumbnail: true,
 aspectRatio: '1/1'

but of no avail

$('#fileupload').fileupload({
    url: 'test.php'
     dataType: 'json',
     imageCrop: true,
     process: [
         {
             action: 'load',
             fileTypes: /^image\/(gif|jpeg|png)$/,
             maxFileSize: 20000000 // 20MB
         },
         {
             action: 'resize',
             maxWidth: 150,
             maxHeight: 150,
             minWidth: 150,
             minHeight: 150,
             imageCrop: true
         },
         {
             action: 'save'
         },
         {action: 'duplicateImage'},
         {
             action: 'resize',
             maxWidth: 100,
             maxHeight: 100,
             minWidth: 100,
             minHeight: 100,
             imageCrop: true
         },
         {
             action: 'save'
         }
     ], ...

Upvotes: 5

Views: 4642

Answers (1)

JuZer
JuZer

Reputation: 783

As per "blueimp" manual to do Client side Image Resizing You have to set the option disableImageResize to false

$('#fileupload').fileupload({
    url: 'test.php',
    dataType: 'json',
    disableImageResize: false,
    imageMaxWidth: 800,
    imageMaxHeight: 800,
    imageCrop: true
})

Reference to src.

Upvotes: 1

Related Questions