I'm developing an artist portfolio website and displaying a lot of paintings on it organized by collections. To speed up loading time, I'm looking for a progressive image compression format that would allow me to decompress and render on the fly a picture such as I can render it at scale .5 when half of the picture data has been received.
I know JPEG has a progressive option, but I didn't find out how to transmit and decode it partially (I think that's the browser job, but then again I read that not all of them support this feature so I don't know where to look to find an example).
The idea is to be able to serve pictures that have just the resolution the client need without having to store differents scaled size of the same picture on the server and witout the need for the client to download the same picture twice each time (original and thumbnail).
Related
I wanna enable users of my web app to upload videos with a maximum lenght of 10s and cropped/scaled to a certain resolution. There for users should be able to trim there selected video to 10s before uploading it with a simple editor.
Is there any library or examples enabling client side video editting to cut video length as well as croping before uploading it to a server? I found some canvas approaches for filters, single video frames and export to webM videos but nothing bringing it all together. So anyone done that before?
Apreciate any ideas :)
Tipicaly video processing is a server thing because it's easier to find and run complex (often compiled) libraries (like ffmpeg) there than in browser and it may cause less performance problems for end user. Anyway I think there are two options:
1. Process video on server - send file and configuration
The first approach assume that you prepare client side "editor" based on canvas which simulate video editing. After setup of all filters, crops etc. the client might send original video file and video processing configuration which would be used on a server to do the same thing
Depends on which language you prefer on backend side implementation might be different so I don't give you ready snippet of code.
Of course you can switch order of tasks and upload original file at first place then smiulate video processing on client side and after all send mentioned configuration to backend and process video.
2. Process video within WebAssembly
If you really need to keep everything on client side you can try with WebAssembly ports of libraries like https://github.com/ffmpegwasm/ffmpeg.wasm and send already processed video file to server.
I have a server-side command defined to receive images uploaded with TinyMCE (file upload or drag-and-drop). I have the image in my hands as a binary which I then write to my server.
I was testing with this image taken with my iPhone. The original photo was 3024 x 4032. In the editor we can resize, but still the original 4.9 MB image would get saved on the server side. I was thinking there are probably server-side scripts we can add to rescale/resize it. Anybody know of any that can be used when saving images?
The image is a binary, and might be JPEG or might be PNG. It even might be GIF.
For this example, I used Preview on the Mac to resize my picture to 500 pixels wide before uploading, which reduced the size to just 191 KB. It would be great if this could do that using JavaScript once I have the image in hand. Any thoughts? Thanks.
It turns out my (not very standard) server has some built in commands to rescale and optimize image binaries. I added those to the backend upload processor and it works great. It makes editing a lot easier, saves a lot of space on the server, and email notifications containing the images open much quicker. So this issue is good for now.
My answer won't be of any help to a user using an ordinary Apache/PHP server though. But I imagine there are lots of libraries for those.
I'm building a site with lots of user uploaded images ( like an airbnb suppose)
Until now , the site would upload whatever image you submit to amazon s3 and then display accordingly. Sometimes these images are too heavy and increase page load time.
I want to resize this image to the resolution needed and compress when possible ( transform to jpeg) to enhance load time and reduce traffic.
I've found this can be done either by:
Creating an HTML canvas, make pertinent transformations in-browser and then upload.
Uploading the image to the server, then run some back-end tasks to reduce size and compress.
What are the benefits of each approach? which is the most common? what considerations should I have in each case?
My stack is currently node.js / angular. I don't intend to use a CDN for now as the project is in a dev phase
thanks in advance!
you need to install and add imagemin to your grunt task here is a link for you to get it going https://github.com/gruntjs/grunt-contrib-imagemin
Good luck.
for the record, the solution I've found the easiest was to load whatever image the user selected in a html5 canvas and convert it to jpeg, then upload the jpeg and in the backend I would resize it using a node imagemagick package.
By converting to jpeg in the frontend you minimize upload time while not losing performance and also normalize input format to the backend service.
We have an offline web app written with js/jquery/HTML5 that uses local storage to store multiple MB of data in json format that gets edited when the app is in use. This data eventually gets uploaded to our server via ajax. It works very well on both iOS and Android devices. We now want to allow users to repeatedly select an item in their data and take a picture to later be associated with that item. Pictures would be uploaded to our server along with the data. Pictures would also be reduced to 50kb or less in size with a canvas element either at the time they're taken or when they're uploaded. For any given upload, they're may a hundred or more pictures.
We had planned to store a reference to pictures as they're taken to later use for uploading. We now know, in a browser, without using native app code or frameworks such as PhoneGap, that there's no way to store such a reference or path when pictures are stored in the iOS camera roll or Android gallery. We can get the picture's file name by using an input control, but that's of no use without a full path. Also, all image filenames on iOS devices are "image.jpg". We could access the pictures' image data using data URLs, but we can't reliably store it because there' not enough space in local storage for both our json-formatted data and potentially hundreds of data URLs.
So the question is, is there a way using js/jquery/html5 (not PhoneGap or native app code) to take a picture, get a reference to it for later resizing with a canvas element and then uploading via ajax?
If you want to know if is there a way to resize image in Client-side using canvas to reduce them to 50kb then yes, there is.
Here is the link : http://blog.liip.ch/archive/2013/05/28/resizing-images-with-javascript.html
Here is a DEMO
And here is the CODE
I have tested it and it is really good.
PD. I dont like how this CODE resize the image, i changed it using another algorithm, let me know if you want it
Now i am looking for a way to listen the event when the mobile devise use the camera to take a photo and upload them. Because they are automatically rotated to left 90 grades.
I'm working on an image mashup web app.
I want to avoid flash or other client hassles and just do it pure HTML+javascript.
To keep it light, I'd like to do the work on the client side in Javascript, and have it just push a final saved image to the server.
I thought after reading about the wonders of HTML5 and Canvas I'd be able to use that.
Trouble is though:
If I use the new drag and drop feature of HTML5 for the user to pass a local image to the app and then paint it to the canvas, then ... the canvas get's dirty and it throws a security exception if I try to save the image data.
If I use an API like Bing Image search to find images for the user and paint them to the canvas, then ... the canvas gets dirty and it throws a security exception if I try to save the image data.
The only work around I can think is to have the server act as a kind of proxy and have it relay every image that is worked with to the client - but that defeats the purpose of going client side.
Is there any other method I'm not thinking of, or is pure HTML5 + JS at the client side just not an option for this use case?
The security exception is thrown because you are using images from different domain (local or Bing in your case), you should give to the user the ability to upload the selected images on your server and then work with them in canvas. For images from internet storages you can make something like a proxy to show them on the frontend, images from user's pc should always be uploaded. There is no other way to avoid XSS exceptions as far as I know.
P.S. there is a good article about HTML5 canvas image restrictions here: http://simonsarris.com/blog/480-understanding-the-html5-canvas-image-security-rules