Recently I started making a game with Phaser 3.
I made an image player.png. Now comes the weird part. Whenever I try to display player.png it won't display on screen. Path, filename, console everything is correct. Code also has no errors. Now when I replaced the png image with another image. Surprise! It shows up. In fact any other image would be displayed other than player.png.
Please can anyone figure out why?
could be format issue. try opening your image in something like photoshop and save it again as png.
Related
I'm trying to screenshot the contents of a canvas that uses webgl2.
It's from a game on a website that i didn't build myself.
I can get a screenshot with certain console commands but only if the game window is not visible, otherwise it's just a black screen.
From what i understand, this has to do with the drawing buffer being cleared after the render function that fills the canvas.
I'm currently trying to add my screenshot commands right after where that render function is called, in the hope that at this point the buffer will not be cleared.
However this code is in a big file compiled with webpack, and i'm not sure if/how i can reference that function from the console.
It seems they use PIXI for the rendering.
Any tips on how to override the part where the render function is called, so i can add my screenshot code there?
Or otherwise how to get the screenshot?
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 actually using a face detection (with eyes, mouth, face) library in JQuery. I have manipulated/changed many things (such as length, width, blur etc) on the pictures to see what are the most perfect settings for a picture to have a well-detected face on it. It is really easy to change property of the image in JS BUT the issue I am facing is that :
the face detection on a .jpg picture works way better than for a .png
picture.
Problem 1 : the picture is uploaded using <input type="file" accept="image/*"> so maybe I have to change the extension before the picture is really uploaded on the page
Problem 2 : how to do that. I read on internet the difference between .jpg and .png but how to change it ? I know that jpg is lighter but I don't care.
To summarize: Is it possible to change the extension of a picture BEFORE it is uploaded on a webpage ?
ps: The image is loaded on Canvas, I don't know if it changes anything.
I came across this gifx.js - http://evanw.github.io/webgl-filter/ - which seems to work well except for one thing: the save button always generates a blank image. I have tried playing around with the source but do not understand why the data URI that is generated is always the same (and blank) rather than that of the canvas. This is the script that I've been trying to tinker with - http://evanw.github.io/webgl-filter/script.js. If anyone has any ideas, I would appreciate the help!
The WebGL context needs to be created with { preserveDrawingBuffer: true } in the options, otherwise the buffer being rendered is cleared once it is drawn to the screen, and toDataURL will give you a blank image.
See also:
How do you save an image from a Three.js canvas?
how can I change the way an image loads on a web page? I presume using javascript to do this. I'm looking for a way to have the picture load at a lower resolution and then get "sharper". As appose to loading downward, if that makes sense. Facebook does this with their "theater" picture pop-up window.
This is actually due to the way that the image is encoded, namely images that are interlaced will have this effect.
http://en.wikipedia.org/wiki/Interlacing_(bitmaps)
Check to see if your image editing utility has this feature, applications such as photoshop definitely will but something as simple as paint won't.
Sounds to me a lot like progressive loading in jpg images. That's something you have to adjust while creating the image. I'm only familiar with the gimp, there you have to check a checkbox while exporting to jpg. Check out this screenshot.
Another way to achieve this is to initially point the images on the webpage to smaller images and then do some stuff with some jQuery plugin. I'm not sure right now but I think there was one called jQuery.lazyload or sth. like that.
Hope it helps you!
To do this you don't need javascript. It is actually part of how you saved your image. You should make your image with progressive option. It adds a little weight on the image, but it will show parts of image as it is loading.
To do this on Photoshop:
Open your images file
Choose File
Choose Save for Web... option.
On the opened Dialog select jpg
On the upper right corner there are few options. Check 'Progressive' option
You are done!
Now replace your image and all the browser will show that image as they are loading it.