HTML5 canvas saving image on tablet doesn't seem to work - javascript

So I'm working on a HTML5 drawing app using canvas and am using canvas.toDataURL("image/png") to save the image.
It works perfectly fine on Desktop but on Ipad it won't work at all.
It seems like the Ipad is taking more time to render the Data-URL and trying to render the image before the url is finished.
Every time I try on Ipad it shows a blank white screen but if i hit render a few times SOMETIMES it will show the drawing. Is their any way I can asynchronously set the source of the image once the canvas is done render the Data-URL?
live example:
http://imstillreallybored.com/curtainapp/

Related

Animated PNG looping on IOS

I'm having an issue where an animaed png that is encoded to only play once, plays twice on IOS. I am swapping out a blank PNG to the animated PNG when it gets within viewport. Once in viewport since its on scroll it checks to see if the src of the image is the animated or static. If its the static it doesn't do a swap.
On desktop its perfect. But on mobile the animation plays twice. I thought it was my js but it turns out the png itself is acting differently in IOS.
I checked out the direct url to the animation and it turns out even though the PNG is set to play only once on IOS it plays twice.
The PNG in quesiton is used here: https://www.xeroproject.com/wtf/
And the direct link is here: https://www.xeroproject.com/wtf/wp-content/themes/wtf_big5/images/arrow_animate.png
WHen you scroll down to the map an arrow animates and map markers fall in. Again, Desktop perfect but on ios it animates twice. Same goes for going to the direct link.
Is there a different way to encode it I can use? or is this something I can't control in IOS?

Using HTML5 Canvas Tag on Safari With Large Images

on safari through iphones I can read an image through js window.FileReader but cannot use the canvas tag in HTML5 due to the image size of standard photos taken by the iphone.
The image can be displayed in tags but canvas cannot draw these tags.
I need this to be able to manipulate an image (compress, move, rotate,etc.)
How can I work around this? Android works fine.

Dynamically changing the viewport in iOS Safari doesn't work until the second time rotating the device

I'm developing a web for iPad/iPhone and need to set different viewports for portrait and landscape mode. I'm doing this with Javascript with the orientationchange event, but there is a problem, after loading the page when I first rotate the device, the content doesn't get scaled, but this is only the first time, if I go back to the first state and then rotate back again, this time works perfectly.
I tried the same but loading the page with the other orientation and it's the same problem, it only scales the content properly after the second try.

Send HTML based on browser (iPhone or other)

I have an image carousel on a page on my site (using slidesjs and jQuery). It works fine on all desktop browsers, and even on the iPhone if the phone is on wireless. When the iPhone is connecting via 3G or GPRS, the image area of the carousel doesn't load and there's just blank white space.
However, I believe that the size of the images is stopping things from loading.
So what I'd like to do is detect whether or not the user is using mobile Safari, and if so, just show a single image in this space.
To do that means changing the HTML that is output for the carousel and just setting it to a single image source.
Is it possible to do this with javascript somehow ?
It is quite easy to do. Full explanation is here: http://www.quirksmode.org/js/detect.html.
Just look for "iPhone" in navigator.userAgent string.

Cache images offscreen in Mobile Safari

I have an javascript image gallery that slides in images from offscreen in Mobile Safari. It seems like the offscreen images are not getting cached because every time they slide in it takes a few seconds to load them at which point they are already halfway to their destination. I'm trying to get all the images to load during the initial page load. It seems Mobile Safari ignores or "garbage collects" offscreen images. Is there a way through CSS3 (some -webkit prefix property) or any way so that all images load and stay loaded so their is no flickering.
Thanks!
If the set of images in the gallery is somewhat static (ie. it's managed through some sort of upload process rather than picking up images dynamically), you could try using an HTML5 offline application cache for your images. This blog post describes the technique, along with some other pitfalls frequently encountered with iPhone caching.

Categories