Using Image Resize with BlueImp

Jun 12, 2015 at 7:31 PM
Hi Guys.. I'm exhausted trying to make this work...

I'm successfully using blueimp in my site, however, I want to implement the resizing features that Jquery.Fileupload offers.
My thinking is that most of the code is already there, I should just be able to add the additional js scripts:
<script type="text/javascript" src="@App.Path/lib/jquery-fileUpload/jquery.iframe-transport.js" data-enableoptimizations="true"></script>
<script type="text/javascript" src="@App.Path/lib/jquery-fileUpload/jquery.fileupload.js" data-enableoptimizations="true"></script>
<script type="text/javascript" src="@App.Path/lib/jquery-fileUpload/jquery.ui.widget.js" data-enableoptimizations="true"></script>
<script type="text/javascript" src="@App.Path/lib/jquery-fileUpload/jquery.fileupload-image.js" data-enableoptimizations="true"></script>    
<script type="text/javascript" src="@App.Path/lib/jquery-fileUpload/jquery.fileupload-process.js" data-enableoptimizations="true"></script>
<script type="text/javascript" src="@App.Path/lib/JavaScript-Load-Image-1.13.0/js/load-image.all.min.js"></script>
<script type="text/javascript" src="@App.Path/lib/JavaScript-Canvas-to-Blob-master/js/canvas-to-blob.min.js"></script>
and add the optional:
            imageMaxWidth: 300,
            imageMaxHeight: 300,
I can't get it to work. Where am I going wrong?

Thanks all
Jun 15, 2015 at 7:43 AM
I'm not sure I even understood the question.

You want to resize the image before uploading - is that correct? So not on-the-fly on the server (which allows you to have another size another day when the design requirements change), but on the client using a JS-Framework - right?

And where is it failing? is it uploading the large picture? is it not uploading? what is unexpected?
Jun 15, 2015 at 5:18 PM
Thanks for trying lol! I'll explain a little clearer.

Indeed, I want to resize to a specific size on the client side, on upload. Ultimately, my users will want to drag and drop photos for upload without having to consider the amount of space they are taking on the server. If I want to display an image of say 960 x 960, I don't need a file size of 1.4mb sitting on the server.

As for where it's failing... visit The blueimp demo page
Take an image file of say 1.4mb and upload it to the demo. You'll note the file size is reduce to approx 449kb
When using the 2sexy app in it's native state, it doesn't make any file reduction at all.

I guess it depends on whether Daniel changed anything on the js when he built the app.

The image resizing functionality should come from the jQuery-File-Upload component which is being used for the blueimp app.

The site page is here

Client-side image resizing:
Images can be automatically resized on client-side with browsers supporting the required JS APIs.

I'm thinking that you weren't aware of the possible functionality of the upload component when the app was built (if you had anything to do with of course)... but this functionality seems invaluable to me, especially when you consider that images can be reduced to a decent size before uploading to the server, taking costly MBs on my Power DNN subscription lol!

Thanks again
Jun 16, 2015 at 6:49 AM
Got that. And what fails in your implementation?

Does it shrink but not transfer? or does it transfer but it's still large?
Jun 16, 2015 at 10:33 PM
It will transfer okay, but the file size remains the same.
Jun 17, 2015 at 5:54 AM
In this case your JavaScript doesn't do what you're expecting - so it has to do with the uploader client side.
Basically it's out-of-scope for here; my guess is that the JS versions in blue-imp are older than the documentation. Try replacing them with the newer scripts from blueimp and tell us if it worked.