three.js project won't upload a background image on IOS - javascript

Please see my project:
http://webgl.unilimes.com/project/3dhouse/
On desktop, images are uploaded fine using the camera button:
However, unfortunately, on IOS this is not the case:
the image is cropped, there's lots of weird lines across it and it in no way represents the background image uploaded. Furthermore, the desktop app successfully reads the images EXIF data and moves the model accordingly, whilst IOS does not
here are two example images
Picture of the scene.
Picture for location
Any pointers as to what is going wrong would be greatly appreciated. I've seen background imagery uploaded with three.js on IOS before, so im hoping there is a solution, as for the exif reader I don't know. Thanks

Related

Images in android studio html files

I am making a game called "shades" and I want to learn how to put Javascript files in android studio. If someone could give me a detailed guide with examples that'd be great. I am copying and pasting a game that I have made and I am confused about which files I would find my images. Please help me find out where to drag my images into.
My screen right now
just to be specific, this is how I make an image in Javascript.
var image = new Image();
image.src = "image.png";
Where in my files (found on the left side of the screen in "My screen right now") do I drag my images into?

How to avoid image rotation in angular 4 app

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

Image upload in web page with correct orientation

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

three.js transparency from .png files issue in chrome

I recently started working in three.js and i am trying to render a human model. i have two objects that are transparent in nature the hair and face and the transparency is taken from a .png image texture. I,m using three.js version r82 and it works perfectly in firefox. But I have an issue with the same code in Google Chrome as the transparent objects act in a bizzare manner.
im getting the files locally and using THREE.TextureLoader to load the png image files
Kindly help me resolve this issue. Thank you in advance

Changing image rotation using Javascript best practice

I am attempting to upload an image by capturing from camera on android phone. After searching why the image shows rotated I found the reason was due to the image EXIF of the captured image. And I was wondering what is the best practice to rotating the image back to normal, is it after uploading the image or when viewing the image?
Also I need assistance in writing the JavaScript code for that given that I have an image element and file input element.

Categories