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/
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
What about the add-on to resize images? Could be run as a schedule task? something similar like how smush.it addon works...
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.
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?
Reading the page linked from the page you linked:
// 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.
nodsIt is interesting to try for sure. It may be more consistent, but it may be more browser-dependant (as usual).
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.
Likely some javascript library.
Who knows. :P
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!!
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!
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....
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?
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
Here's the result of the test run. File selection results in no upload action. In Chrome, the console provides the following error:
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!
It's as if nothing is being passed into the compress function? Can't seem to figure this one out. :-X ;D
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!
me too i hoping to do some pluralsight.com classes just a lot going with work so too busy for a class.
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:
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
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.