I've been using the very well made Jumploader for image uploading and processing for a few years now on our local intranet. We use it to upload images from a compactflash card to the server... and while it's uploading 1) make two different sized thumbnails of the images while uploading and 2) watermark one of the images with a simple transparent PNG file. Unfortunately with the disabling of NPAPI in Chrome it's forced us to use Internet Explorer to use Jumploader and with the newest versions of Java it's all but disabled the Java applet because it is so out of date and expired. The maker of Jumploader has completely abandoned the project a few years ago and the forums on the jumploader website are completely spam filled.
So my question is this... is there an alternative to Jumploader that does this:
Uploads the full images (JPG) to a specified location. The file
names need to be settable when uploading.
Creates two specific sized thumbnails, one of which needs an
overlayed transparent PNG watermark.
It does all this in about 5 seconds or less each image (if
possible)
The only alternative I've really seen at this point is making it myself, which I'm not as familiar with Java as I am PHP. Doing this all in PHP would take way more than 5 seconds... a LOT more from my initial testing plus when you upload an image via php we've noticed that it often strips the metadata and color profile from the jpg images when uploading. If it has to be two different javascripts/applets that run that's fine, though I'm hoping there's another 'all in one' out there somewhere.
Thanks all!
Related
I am creating a website which contains posts. Every post has an image. Feed page of the website is slow because every image takes a lot of time to be downloaded and while it is downloading it is a blank space and it does not look nice. Images are uploaded by users and are of different formats. Is it possible to somehow make it so that images first appear blurry and then they start becoming less and less blurry as they load (I’ve read it is called interlacing)?
I have tried searching on the internet but didn’t find anything on the topic but the usage of .jpeg format which does not seem to work because even the .jpegs I have as post images are not loading interlaced and I cannot exactly force people to use only that format.
Images take time to load because they are relatively large files and the data in them has to be transferred over the network.
Interlacing is a a feature of the JPEG format that gives visible process as the image loads by reordering the image data so it doesn't run sequentially (Wikipedia has diagrams and animations which might be helpful in understanding that.)
If you want interlacing in the image then you need to make sure it is in the image. You can't really change that outside the image.
While it is impractical to ask users to upload images encoded that way, you can write server side code to convert images to meet you standards. When converting them you could also perform other optimisations (such as reducing the dimensions or increasing the compression level) that would speed up the load time. Of course, this will have an impact on image quality which might not be desirable. (Consider Flickr, for example, which provides a degraded image (with smaller file size) by default but allows switching to higher quality or original images on demand).
You could also consider displaying placeholder images while the full version loads. These could also be generated server side from the upload images and have extremely high levels of compression and resizing so you just display a small number of large pixels that give a vague impressions of the average colour over large chunks of the image until the real image is available to the browser.
I have been going through a few SO questions and getting bits and pieces from it, but the solution is not fully apparent. What I have is a Django web server and in my model for posts I have an ImageField. I have then created my form and that renders fine.
I can use the input tag just fine, and it will upload to the server and location saves to the database. The problem comes when I take an image on an iOS device in portrait and view it on another platform e.g. Android, Desktop, the image will be rotated.
Now I have found out that when you take an image on iOS it will keep the resolution as landscape and put into the EXIF data the orientation of the image to make it portrait.
So finally my question is, what is the best approach to this issue. The options I have seen as are:
In the webpage where the upload occurs, transform the image and reset the orientation then upload to the server.
Upload as is, and in my view do the transform/reset before the save.
Again upload as is, and I render the image in the view detail post and fix it there.
I will also at some point also be creating some thumbnails and smaller instances of the image. Only thing my javascript skills are not the greatest!
Thanks
For working with images python has some good packages.
Pillow :
You can use it from this link:
https://pillow.readthedocs.io/en/4.1.x/
or Easy thumbnails for Django (it is easy version and based on Pillow)
https://pypi.python.org/pypi/easy-thumbnails
I have a form input file, and when we upload an image, it will resize the image 2 times. First the original image will resize to square resolution(100x100), and second the original image will resize to landscape resolution(1000x500). After upload the square resolution will go to folder square and landscape will go for folder landscape.
So the original image won't be saved to the database, but the resized images will. Do you think a jQuery plugin for my case exists?
Javascript/Jquery is not the right choice there.
Javascript/Jquery work client side: they operate on users pc and not on your server. Maybe there are some plugins capable of resizing images, but surely you won't be able to store them in different folders using Javascript/Jquery
Such an operation must be done on your server, with a sever side language like PHP, NodeJS (still uses Javascript language), Java or many others.
The answer is based on the language off your choice, so i can't give a general one
I've tried to ask this question before, but I failed completely there. After useful input, I decided to leave that one, and to try again.
I'm looking to create a web-based application where users can draw images built from a set of pre-defined icons. There is a need to be able to save the final image (encoded jpg/png), and also save a "current setup" that can be re-loaded later for further editing (a "settings" file?).
My question : What would be the best approach for this matter? Flash+AS3? HTML5+JS? Something else?
For better understanding of what I want to create, here are 2 screenshots that illustrate in what direction I'm thinking:
The drawing application (made in Flash): http://imgur.com/U4GNKJF
The final created picture: http://imgur.com/aCtxwo1
Thanks in advance, and I really hope I've made my question more clear this time.
Since you need advice...
Draw your icons in some art software (even online) and save as transparent PNG's
Look-up HTML5 Drag & drop tutorials that involve "Canvas". You'll want to meaure the positions of objects dragged (mouse position on Canvas) and their order. The drag function could update a JSON String (this hold entries of items, type, position, etc)
Look-up How to save JSON as text file, also how to parse text file as JSON. This becomes the "settings file".
To save images best use PHP language code. PHP must be installed on the server (most have, or is installable or else get a better host). There are tutorials on how to save an image with content from "snapshot of Canvas"
flash is unsupported on IOS and android mobile browsers and google is giving a lower index to websites using it.
I would use javascript with HTML5 canvas with PIXI.JS ,CreateJS or PANDA.JS.
These libraries make it easier to create the canvas elements you need (draggable objects, buttons ) from sprites and adding event listeners to them.
And drawing graphics on the canvas (lines, shapes).
Since you have a lot of sprites you can pack them in a spritesheet with TexturePacker for faster loading ( and PIXI works great with spritesheets).
You can package this web page to android/ios with phonegap,ionic,crosswalk, cocoonjs etc ( i recommend ionic + crosswalk webview it gives great performance)
for saving i would also use a json file to save the setting . You can use PHP to load and save it.
I was wondering if there is any other ways to compress my images or any script that would load the page faster / or the the images behind the scenes?
The site is very interactive and using very high quality layers of images for the main layout. I have already saved for web devices in Photoshop and re-compressed using ImageOptim, some are jpeg but the majority are png24 to maintain transparancy, they are all set in CSS.
I have used jpegs and css sprites where i can but there is one in particular of a tree illustration streching the full site length, that is really slowing up the loading time, is there any I could compress these images further or code them differently that I missed?
Any help would be great thanks!
You said you are spriting. That is good.
You can also use tools such as PNGcrush which attempt to make files smaller by dropping things such as meta data.
You should also send far distant expiry headers and use a cache breaker on your images, to ensure the images won't be downloaded again if unnecessary.
In Photoshop, choose file-> save for web, you will be able to find the best compromise between size and quality.
Do you really need the transparency there? PNG transparency is unsupported on some browsers and makes the page processing intensive and slow even on high end computers, depending on image size and quantity of layers. If you can show something of your site maybe someone can give more hints about how to optimize it.
You can compress them on the fly with Apache if that's your web server. One of many available articles on the subject: http://www.samaxes.com/2009/01/more-on-compressing-and-caching-your-site-with-htaccess/