We have a website that used HTML5 canvas and KineticJS to scale and resize and rotate an image on top of another image and then save them together as a new image. For some reason it does not show up correctly in IE9. It works perfect in FireFox, Chrome and Safari, but in IE9 the only thing that does not work is the rotate tool. Which is set in 15 degree increments and works by dragging the slider either left or right and it rotates the images slightly by 15 degrees depending on the direction you drag it.
Could it not be working because IE9 is not supporting the html5 tag..I am confused.
Related
I have some icons that are set to animate on hover (so there are two images per icon, a static PNG and an animated GIF). Since the icons are meant to be responsive, I'm using Bootstrap's img-fluid class on each img element.
In Chrome, both the static image and the animated version display properly - edges are smooth and antialiased. In Firefox and Chrome, however, the animated GIFs appear pixelated and I have no idea why. Is this simply due to how each browser renders resized images, or is there a way I can fix it?
Codepen sample here - hover over each icon to see what happens. In Firefox and Edge, there's a noticeable jump between the smooth-edged static PNG and the pixelated GIF. This doesn't happen in Chrome.
If it matters, my versions of each browser are:
Firefox 65.0.1
Microsoft Edge 44.17763.1.0
Google Chrome
72.0.3626.119
Help much appreciated.
When I view a photo I took using my Samsung Galaxy Note 3 using Windows Photo Viewer, the image is oriented correctly.
However, when I scp it to my website, it's rotated 90 degrees when viewed in Chrome, but displays correctly in firefox. The image in question is this one: http://drazzy.com/e/espruino/etc/20140925_152033.jpg
Why doesn't it display correctly in Chrome? How can I make my images display correctly in Chrome?
Imagine is displayed being rotated 90 degrees for both Chrome and Firefox for me. Find the original picture and open it on your computer. Depending on how you took it, the phones accelerometer may have simply registered a different rotation when you took the picture. Open it in paint, select the picture as a whole, and rotate is 90 degrees counter clock wise.
I am creating a web site where end users can upload a photo and have it superimpose under a calendar as a gift
All works perfectly in Chrome or FF, however in IE I have an issue with scaling the image, it only scales in the x axis meaning it squishes the image rather than makes the whole image bigger or smaller.
When you click on the plus or minus sign to scale the image, I am changing the inline width style for the canvas element.
I have tested it on IE 9 and 10, any ideas whatis going on?
Here is the link - http://www.submitphoto.com.au/new/diary.php
I used the -webkit- stuff and it doesn't animate for some reason, even though the same code with -moz- prefix works in firefox.
The background is meant to slide down, then the background changes & the new animation should start. The new animation is the same, the background slides in, then slides down out of the box, then the new one comes in again.
http://jsfiddle.net/6sQTJ/
The correct answer, given by #Gerben, was that you can't mix % positions with pixel 'px' positions in the CSS3 animation. Even though it will work in FireFox, it won't work in some other CSS3-animation-enabled browsers.
I created an animated HTML5 canvas that uses bezier curves to draw a filled pattern.
I have been testing it in Chrome for Mac. I only seem to see this on Safari for Mac.
For some reason, I see little artifacts left behind by the figures (see below that is moving to the left and the artifacts go off to the right).
I trigger a redraw by changing the width of the canvas to its current width, if that helps...
Also, if I mouse over the canvas or change windows the artifacts go away. Since I think it decides to redraw the whole thing over.
Does anyone know why this would be happening?