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
Related
I have an angular application that allows you to choose a profile picture. Performing tests I noticed that when I take images from an iPhone in portrait mode and upload the image to my app it is shown rotated, however if I take the photo in landscape mode the image shows correctly. Additionally, perform this same test on an android device, and the result is that both in portrait mode or landscape mode the image shows correctly. My question is how to avoid this behavior since I want the images to always be displayed without rotations. Below is an example of the problem mentioned:
All images uploaded should be displayed this way:
I check the files uploaded from ios physically on the server and none of them are rotated. The problem seems to be the visualization from the app.
What should I do so that the images are always displayed without rotation from my angular application?
I have done a stackblitz to show the implementation made for this component
stackblitz
I appreciate that someone can help me, and explain to me why this strange behavior is due.
Many Thanks!
The problem here is with something called EXIF data. This is an extra set of metadata captured with the image which has location, time, apereture but also orientation.
If you want to display the image correctly after uploading it to the server, you could simply rotate the image based on the exif orientation, and then strip the exif data. This way, the image is always displayed "correctly", both in browsers that understand EXIF and browsers that don't.
This is explained here: Fix iOS picture orientation after upload PHP
If you want to display the image correctly before uploading (e.g. preview), your best bet is using a HTML canvas and then rotating the image based on it's orientation. Please see this topic for more information: JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
I am currently creating a web app that will allow users to upload their highlights / clips from Overwatch and I wanted to use JavaScript to detect what character they were playing as.
I currently have it taking a still from the video that they upload, but wanted to use JavaScript to detect the image at the bottom left of the screen and get a result for which character it is:
I am unaware of any libraries that can do this while not over complicating my needs. Furthermore if I was to use an AI library such as tensor (which im not even sure if it would work), would I be able to use the training data if I bundled it as an app for the app store?
If the image in the bottom left is the same, you can accomplish this using canvas.
You would need to chop the whole image down to just the avatar, and then compare the avatar to ones on file.
The comparison would require the base64 of the image, and compare those bases. If they are the same, voila!
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'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.
Suppose my image is not upright (I open it in window browser and the image it not upright), but when I upload it to some server (such as gmail, stackoverflow). The image becomes upright.
I asked this question is that I am writing a preview logic with html5 and javascript. The image that I talk about show what exactly I see in window browser. Just wondering if the server did some trick to adjust the orientation?
Image shown in windows:
Image that directly upload to stack overflow:
I'm guessing you are talking about an image you generate or manipulate client-side using a canvas element that is then rendered back into an img tag. Correct?
Server-side, the orientation can be determined by looking at the image's EXIF orientation flag. It IS possible to examine this flag client-side using a library like jQuery fileExif.
If you use a script like ImageInfo you can fetch EXIF data (if the image has it). If it hasn't you practically can't know why it happened. Might be some "fake" displaying on the computer you are working on. Some image managers might keep duplicates of an originally rotated image.
The EXIF property Orientation might tell you if the image is changed, based on it's dimensions compared to it's orientation.
On Server Side:
You can use a tool like Graphics Magic to auto-orient the image correctly: http://www.graphicsmagick.org/GraphicsMagick.html
gm.exe -convert -auto-orient MyImage.jpg MyImageCorrectOrientation.jpg