Is there any pure JavaScript way to reduce the quality to a specified size? For example if someone tries to upload a 12MP image is there any way to reduce this to 5MP for example? At the moment we are using Aurigma, but would like to get away from the reliance on a plugin that the user may or may not have.
SO recommended this post as a possible question/answer, but this seems to deal with cropping the image. I'm needing to reduce the size of the image client side. Is this something that is possible? Is there a plugin for jQuery that does this?
You try using the Plupload library. I have been using it for multiple file uploads, but never its PNG, JPEG resize capabilities.
There is a related question at Image resize before upload
Related
I have a problem rendering images with large file sizes. When I upload a lot of large file sizes of images and display them, it becomes very laggy.
My question is:
The ideal way is the backend should provide an very small image file size url?
Or the frontend can do it using Canvas API?
Could you provide an explanation please? Thank you
If you have a bunch of thumbnails to display, the source images for those thumbnails should definitely not be the original, full-size images. If those images are large, it will take a long time for the client to download them, no matter how you render them on the client.
When figuring out an image to be shown to client, you should have two versions on the server:
Thumbnail version - low resolution, small file size, easy to download and render many at once
Full-size version, downloaded when the user wants to zoom in on one of them
It could be that the full-size version should not necessarily be the original image. For example, if the original image is 20MB (yes, they can exist), you wouldn't want to burden clients with that. So you'd want to perform resizes and optimizations on the server for both the thumbnail version and the "full" version - enough such that there isn't much of a delay between when the client tries to zoom in and the full-size image fully loads.
My recommendation is that you convert the image type to something more performant like .webp or .jpeg and give the element the exact width and height properties.
And react also have a feature to lazy load your images using react.lazy() that can boost your web performance significantly
Handling large images is too much work for a frontend client. You should get these images at a smaller size in order to just show them as they are.
Imagine someone trying to use your application with an old computer, or even an old smartphone, you shouldn't rely on client's processing power to handle all this heavy work.
I hope my answer helps you!
Jpegs are what you should be using, look at functionPreload() as well
I am building a web application using Parse as my backend.
Part of the signup process involves the user uploading and cropping an image before I pass it along to my database (the picture is part of the user profile, similar to what you would do on Twitter).
I have figured out the uploading parts (both to the browser and then to the database), but I am not as confident with allowing the user to manipulate the image.
Most solutions involve using jCrop to achieve a result similar to the example here (although without the PHP).
Given that I am using Parse, is there a client-side solution that works better? How might a solution look?
Thanks!
Jesse
Basically I would go this way:
Load your image into a <canvas>
Crop the Image: http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/
Save a image from the canvas: http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/
Here is a very good tutorial.
Disclaimer: I haven't tested this yet, but I heard that this way work.
Also use background-size:cover; or background-size:contain; to get around nasty dimension problems.
You can able to crop an image using HTML canvas, but it involves lots of codes, Consider using Cropperjs, It's a pure javascript library for cropping images. Here client-side image cropping by cropperjs is the working example.
For those unaware of TimThumb, it will take any image, of any size or dimension and create a thumbnail on the fly to any desired size. The beauty of it is that it really works on any dimension you feed it through a combination of either resizing the image, cropping or zoom cropping the image.
Ive been searching for jscript equvalents but they either require the user to actually mask out the thumbs manually (looking for a script that automatically does it to images) or the scripts can't handle images in a different aspect ratio.
Thanks for any leads on this!
It is impossible to do this only with client-side javascript. PHP has GD, ImageMagick libraries which create the new image (actual thumbnail) and javascript alone can't do this, as it is client side script, it can't create files.
So the answer is: There is no any.
As #papirtiger pointed out you can still do it with server-side javascript (such as node.js).
Please see this link
It depends.
You can use CSS or Javascript for simple image scaling.
There are tons of available plugins to this.
I doubt that there is one that does the guesstimation exactly the same as timthumb.
If you are going resize a large amount images on the page it will really hurt performance.
Another alternative is to several fixed size "layouts" (960, 320) etc and have the server generate thumbs for each.
You can than use javascript to load the appriate size.
If you really need to rescale the file:
Use external webservice to resize the image.
Most of them take a url and return a resized image:
example.com/resize?image="http://example.com/image1.jpg"&height="...
If you have TimThumb running on your server you can set up a simple API to allow you to call your own service.
othrwise see Image resizing web service for a few alternatives.
I'm trying to build an interface for the user, so he can choose or pick colored eyes, skin, etc., of a model. I'm really on my way with divs and CSS. I'm using Ajax for loading images into the divs.
My problem is that I need to offer a option to the user so he can save the image as a JPEG or PNG file.
Looking around, I found canvas HTML5 stuff on Stack Overflow, but it's not compatible with Internet Explorer,
Create an Image of a DIV in JavaScript (GIF/PNG)
How can I save div as image at client side where div contains one or more than one HTML5 canvas elements?
I need help to find something compatible with all browsers.
I also found this JavaScript code:
button = document.createElement("img");
button.src = "http://example.com/livechart.gif?interval=15"
But I don't know much about the createElement method.
I know CSS, but JavaScript is beyond my knowledge.
You cannot do this on the browser, you must do it on the server.
see: Convert web page to image
You want to take screenshot of the browser? Well, there are lot of ways you could try, but all of them would be browser-specific. The most reliable would be to just tell the user to make a screenshot with the OS. On a Mac it's Command-Shift-4, then space; on a PC, it it's ALT-PrtScr, I think.
I believe you could do that with HTML canvas and some JavaScript: Canvas2Image : Saving Canvas data to image file.
I'm on my way creating a mobile app using phonegap and jquery mobile. i realized huge performance issues by displaying a list of images on the device. the reason must be that those images have a quite high resolution (> 1900 px in width).
i am using javascript and want to resize and reduce the resolution of an image taken by the device's camera!
is it possible to manipulate the image data in this way or is there any library to use?
if it is possible what one has to read and / or to do to get into the matter of image manipulation.
thanks in advance!
You need to reduce the images on the server side otherwise you aren't gaining anything. Using a server side language such as php you could clone the image and reduce it's size for mobile. So basically you will be retreiving mobile optimized images for mobile devices. Manipulating images on the client won't save you bandwidth and will cost extra processing.
May this link could help you: http://forums.macrumors.com/showthread.php?t=1178073
Instead of resizing the image you could take a smaler picture.
i found something which could be quite useful! actually this is an jpeg encoder written in javascript which can reduce the image's quality but cant scale the picture!
http://www.bytestrom.eu/de/blog/2009/1120a_jpeg_encoder_for_javascript
cu