ElkArte Community

Elk Development => Feature Discussion => Topic started by: badmonkey on October 02, 2017, 11:41:13 am

Title: Client side image resize
Post by: badmonkey on October 02, 2017, 11:41:13 am
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/
Title: Re: Client side image resize
Post by: emanuele on October 02, 2017, 02:47:26 pm
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
Title: Re: Client side image resize
Post by: radu81 on October 02, 2017, 04:31:21 pm
What about the add-on to resize images? Could be run as a schedule task? something similar like how smush.it addon works...
Title: Re: Client side image resize
Post by: badmonkey on October 02, 2017, 09:02:42 pm
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.
Title: Re: Client side image resize
Post by: ahrasis on October 02, 2017, 10:26:08 pm
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?
Title: Re: Client side image resize
Post by: emanuele on October 03, 2017, 02:31:55 am
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


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
Title: Re: Client side image resize
Post by: ahrasis on October 03, 2017, 03:43:26 am
Quote from: badmonkey –
https://processwire.com/talk/topic/9814-client-side-image-resizing/

I missed this one. I checked the referred github (https://github.com/blueimp/jQuery-File-Upload/blob/master/README.md) just now and it seems updated and should work on mobile too. I may look further when I have more time.
Title: Re: Client side image resize
Post by: badmonkey on April 05, 2020, 10:31:42 am
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 (https://github.com/blueimp/jQuery-File-Upload/blob/master/README.md) 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!!
Title: Re: Client side image resize
Post by: badmonkey on April 05, 2020, 10:40:26 am
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!
Title: Re: Client side image resize
Post by: emanuele on April 08, 2020, 02:29:50 am
The demo on your site?
Title: Re: Client side image resize
Post by: badmonkey on April 08, 2020, 07:06:12 am
 
 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....
Title: Re: Client side image resize
Post by: emanuele on April 10, 2020, 12:11:03 pm
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?
Title: Re: Client side image resize
Post by: badmonkey on April 10, 2020, 06:06:30 pm
 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/


(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?
Title: Re: Client side image resize
Post by: emanuele on April 11, 2020, 10:47:35 am
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. ;)
Title: Re: Client side image resize
Post by: badmonkey on April 11, 2020, 02:04:33 pm
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
Title: Re: Client side image resize
Post by: badmonkey on April 12, 2020, 01:26:25 pm
Here's the result of the test run. File selection results in no upload action. In Chrome, the console provides the following error:


Code: [Select]
Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.


Anyone know where to go from there? Thanks guys! You all are amazing!
Title: Re: Client side image resize
Post by: badmonkey on April 15, 2020, 09:32:26 pm
It's as if nothing is being passed into the compress function? Can't seem to figure this one out.   :-X ;D
Title: Re: Client side image resize
Post by: emanuele on April 21, 2020, 05:38:09 pm
Sorry, that's my limit on the subject... :(
Javascript is really not something that I'm so proficient with. :'(
Title: Re: Client side image resize
Post by: emanuele on April 21, 2020, 05:38:24 pm
@FF / MFG test
Title: Re: Client side image resize
Post by: badmonkey on April 21, 2020, 07:44:05 pm
Quote from: emanuele – Sorry, that's my limit on the subject... :(
Javascript is really not something that I'm so proficient with. :'(
 
 It's all good eman. Thanks for your help! It must be something simple. My troubleshooting time has been limited. Hopefully time will come available soon!
Title: Re: Client side image resize
Post by: vbgamer45 on April 21, 2020, 08:21:44 pm
Quote from: emanuele – Sorry, that's my limit on the subject... :(
Javascript is really not something that I'm so proficient with. :'(
me too i hoping to do some pluralsight.com classes just a lot going with work so too busy for a class.
Title: Re: Client side image resize
Post by: badmonkey on September 19, 2020, 12:16:50 pm
Could someone give me a jumpstart on including a basic integration hook script? Basically output a "test" message in the integrate_attachment_upload hook so I can verify the hook is active and the function returns correctly. Currently there is an active hook, a file called dropzone.subs.php in the sources/subs directory, the active hook is set to call the function drop_zone(). Something like this:

Code: [Select]
function drop_zone()
{
global $modSettings;

$something = "test";
    return $something;

}

The normal attachment upload drag and drop appears with no "test" message. What is incorrect here? Yours truly is a php dummy, for full disclosure, in case it isn't obvious!  ;D
Title: Re: Client side image resize
Post by: emanuele on September 19, 2020, 04:09:20 pm
hmm.. is that a php function of a javascript one? O_o
Title: Re: Client side image resize
Post by: badmonkey on September 19, 2020, 04:59:28 pm
Quote from: emanuele – hmm.. is that a php function of a javascript one? O_o
 
 

Supposed to be a php function...

Spuds attachment resize mod uses php with this hook.