Skip to main content ↑ ↓
Client side image resize Started by badmonkey · · Read 16357 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Client side image resize

Anyone messed around with client side image resizing?  Sure, there is an image resize elk addon which works wonderfully!  That said, what if images could be resized before they're even uploaded?  Saving bandwidth as well as time could improve site functionality, particularly for mobile users.  Would anyone be willing to package it as an addon?  Or perhaps it could be part of the core?

Here's a discussion on client side resizing:

https://processwire.com/talk/topic/9814-client-side-image-resizing/

Re: Client side image resize

Reply #1 –

That is something I think I considered at the time, but never managed to put together a proof of concept... that is usually what I push to repos for others to refine. xD
Bugs creator.
Features destroyer.
Template killer.

Re: Client side image resize

Reply #2 –

What about the add-on to resize images? Could be run as a schedule task? something similar like how smush.it addon works...
sorry for my bad english

Re: Client side image resize

Reply #3 –

Sure. That is the fallback. It saves both storage as well as bandwidth on the download direction. But what if we could save bandwidth at upload time? It's far quicker to upload a smaller image. Especially from a phone with marginal data service. It saves server CPU too. Let the individual user pay that price. Could be beneficial to someone on shared hosting.

Re: Client side image resize

Reply #4 –

I like this idea but I don't have the slightest idea on how this could be done. I only understand that the needed "hack" is to modify if a file(s) is an image(s) during attachment process so it can be compressed or resized before it is saved.

Questions: Is it worth it? What is needed to get this done properly? Do we need to check or install any software before hands? Can this software be immediately used in ElkArte without much hacks?

Re: Client side image resize

Reply #5 –

Quote from: badmonkey – But what if we could save bandwidth at upload time?
Reading the page linked from the page you linked:
Code: [Select]
    // Enable image resizing, except for Android and Opera,
    // which actually support image resizing, but fail to
    // send Blob objects via XHR requests:
So, that particular solution won't work on mobile, but it's also 3 years old, so maybe now something works. Needs testing. nods


Quote from: ahrasis – Questions: Is it worth it?
It is interesting to try for sure. It may be more consistent, but it may be more browser-dependant (as usual).

Quote from: ahrasis – What is needed to get this done properly?
At the moment I'm not sure.
The drag&drop interface has already a "trigger" function and the concept of events, it has just a couple that I used to plug-in the sharing thingy, but the concept can be extended easily, sort of hooks basically.

Quote from: ahrasis – Do we need to check or install any software before hands?
Likely some javascript library.

Quote from: ahrasis – Can this software be immediately used in ElkArte without much hacks?
Who knows. :P
Bugs creator.
Features destroyer.
Template killer.

Re: Client side image resize

Reply #6 –

Quote from: badmonkey –
https://processwire.com/talk/topic/9814-client-side-image-resizing/

I missed this one. I checked the referred github just now and it seems updated and should work on mobile too. I may look further when I have more time.

Re: Client side image resize

Reply #7 –

Quote from: ahrasis –
Quote from: badmonkey –
https://processwire.com/talk/topic/9814-client-side-image-resizing/
 
I missed this one. I checked the referred github just now and it seems updated and should work on mobile too. I may look further when I have more time.
 My apologies, I know it's been a while. The demo on that one works oh so well - exactly what I seek. I have several users residing in areas with poor mobile data service who would greatly benefit from the bandwidth savings when uploading images!

In Attachments.subs.php, there is a hook integrate_attachment_upload. I understand just enough coding to know this is a potential vector for using the github script, and don't know enough to make it work. Is this a step in the right direction? Would anyone so kind as to provide a how-to? Thanks!!

Re: Client side image resize

Reply #8 –

On second thought, perhaps not that particular script. The demo quickly resizes but consistently stalls in the upload on a mobile platform. It actually takes longer than uploading a full size image - and that's on a good 4G connection!

Re: Client side image resize

Reply #9 –

The demo on your site?
Bugs creator.
Features destroyer.
Template killer.

Re: Client side image resize

Reply #10 –

Quote from: emanuele – The demo on your site?
 
 Hey eman! Hope you are well. I set one up on my site. The stalling issue might be ironed out after all. Eliminating dependence on third parties serving scripts, that is, serving everything locally trims down potential issues. Now to nail down the variables needed to pass images into the hook....

Re: Client side image resize

Reply #11 –

In that case, I don't think working server-side is the easiest way, probably it's better to modify the javascript in sendFileToServer so that the file is set there directly already squashed.
Of even better, before the two calls of handleFileUpload so that you send to that function directly the smaller file and everything else works as it should. Both are in dropAttachments.js.

Here everything fine, yes, thanks!
And you?
Bugs creator.
Features destroyer.
Template killer.

Re: Client side image resize

Reply #12 –

 We are like everyone else - trying to duck the insanity!!  ;D

A similar idea crossed my mind. The talents allow for reading code and following along. Actually creating working code, not so much. Therefore - using the code on this page as an example:

https://zocada.com/compress-resize-images-javascript-browser/


I came up with this with attached file. Naturally it doesn't work, since I created it. ;D Seriously, is it even close? What would correct it?

Re: Client side image resize

Reply #13 –

Ohh.. but you are using canvas. Spuds mentioned a couple of times (not sure if here or on github, can't find it now) that this method is very browser-dependent and can lead to poor quality results.

TBH I couldn't test, I also changed a bit my mind looking at the code, see if the attached gives any result. ;)

Re: Client side image resize

Reply #14 –

Quote from: emanuele – Ohh.. but you are using canvas. Spuds mentioned a couple of times (not sure if here or on github, can't find it now) that this method is very browser-dependent and can lead to poor quality results.

TBH I couldn't test, I also changed a bit my mind looking at the code, see if the attached gives any result. ;)
 
 Shows what I knew I already knew, which was knowing I know essentially nothing. ;D Thanks eman, I'll give it a whirl upon return to civilization. I'm spending the weekend in the woods hiding from a virus.  :-X