I have created a small website that lets users create a collage of images in frames. I have no issues with all browsers I have tried...except any browsers on my iPad; both Chrome and Safari.
My call to save the canvas is as follows...
var durl = fabCanvas.toDataURL({
format: 'png',
multiplier: 1
});
The image should come out as follows...
But instead it is coming out like so...
These images are not big. Any reason why it would be doing this?
Thanks in advance.
fabricjs supports retina display of your ipad device.
The Canvas is prescaled to give the display higher clarity when watched.
Unfortunately this was not taken in account when exporting to dataUrl.
Lately (less than one month ago) this defect has been corrected on Feb 24 2016 with this
commit.
Your code is probably correct, what you have to do is download and build latest version of fabricjs.
Related
Font "DIN Condensed" letter spacing on ios is huge (exactly one previous letter width extra). This happens with all browsers (Safari and Google) on all ios devices, with original ttf, and with font-squirrel generated woff as well.
How can I fix this?
(Tried so far as well - renaming font-file to .otf)
This is the site: https://itstestlab.eu/
#font-face{font-family:'FontName';src:url('/f/f.woff2') format('woff2'),url('/f/f.woff') format('woff')}
This is the closest I got to importing fonts and having no issues with Chrome, Firefox, IE10, Edge, Safari back to version 5 upwards and iPhone 5S with original iOS, upwards.
It also solved Apple's DRM (copyright protection) issues with other font formats.
I use FontSquirrel to convert fonts into other formats, and also "normalize" them, inlcuding mis-sized, mis-defined glyphs. There are a lot of options, but going the pre-defined "usual" conversion should work.
EDIT: I have looked into your CSS and found that the last rule of /cms/css/cms_normalise.scss applies some non-standard stuff to your fonts. It looks like an overklill of a reset.css. I am not sure if that causes the problem, since I am unable to reproduce it, but you might want to check it out..
Included web version from Typekit CDN and it works from there.
Seems that this is some kind of a copy protection system. The original file client sent to me was for desktop use only.
Problem:
When uploading image taken from iPhone, it is displayed on the website rotated 90 degrees counter-clockwise. I've done research and understand certain meta data contained in the image file is causing this. Is there a good library to determine if this meta data is in the file and rotate it properly?
My app is build with Laravel and I was looking at Intervention Image to see if maybe that can solve this.
Thanks!
UPDATE:
Still not working. I've checked the php modules and exif and mbstring are enabled on the server.
Here's my code in my laravel controller. The image saves to the directory I specify, but just doesn't orientate properly. Image taken on mobile still shows as rotated on desktop. Thanks!
if (Input::hasFile('profile-image'))
{
$extension = Input::file('profile-image')->getClientOriginalExtension();
$fileName = rand(11111,99999).'.'.$extension;
$image = Image::make(Input::file('profile-image'))->orientate()->save('images/profiles/'.$fileName);
Auth::user()->update([
'image_path' => $fileName,
]);
}
Yes, you'll want the orientate() function it provides.
http://image.intervention.io/api/orientate
Modern cameras add EXIF data to photos that includes the orientation (as well as details about flash, exposure, aperture, etc.). Intervention and other libraries (I've used jhead in the past for autorotation) can use this data.
The images in question are JPEGs and I've gotten them down to a smaller size (30kb). The wordpress site in question is responsive and this issue on happens when I'm using mobile network to load the site. Wirelessly, it has no issues but on 3G/4G, images loaded randomly, some are corrupted, images swap places, so all css and js seems messed up. I'm using W3 cache to enhance the speed, but nothing is helping. Some images are half grey, black and look corrupted sometimes. This only happens on iOS devices with safari browser.
Anyone else faced the same issue? On desktop being wired, wireless, I've never had this issue.
Not sure if it has to do with with database or overall site performance of the server. Any help is greatly appreciated.
While supporting our WordPress Clients, I've faced such an issue dozens of times There are two general reasons for such a behavior:
You're using some CDN (Content Delivery Network) which you didn't mention in your question, and different CDN servers output different website cache version. If you're using CDN, try to purge your local plugin's cache, disable your local plugin and purge your CDN cache.
Sometimes images thumbnails may be corrupted, while they still exist. Try installing "Force Regenerate Thumbnails" plugin and regenerate all the thumbnails.
Though two above reasons are the most common, the issue itself may be connected with something else as well, for example, with some particular plugin. For this case it might be a good idea to temporarily deactivate your plugins one after another and see if the issue is resolved.
In case any of these won't help, it will require some debug work, so it could be a good idea to hire some WordPress developer for about an hour to fix this.
Good Luck!
If you have access to a mac + safari you can try remote debugging your iOS device. If you do this you could open the developer toolbar for the device so you can see if the information is actually being loaded. ie. if the messed up image is 300k on the desktop site, but the iOS device is loading a 30k image, you would know you're losing data somewhere.
I've not seen this specific issue, but I've had similar issues pop up due to bad CDN links, caching plugins, and lazy loading of images.
Another note to look for would be if your theme/template/plugins are using src sets. It could be possible that your normal version of the image is fine, but the images in the srcset for mobile are all messed up.
As noted above, completely disable w3 cache to troubleshoot that it's not the issue. Then take a look at the plugins.
I am using Howler.js on my PhoneGap application. Because my audio files are large (more than 10Mb) im an setting the buffer attribute to true (forcing HTML5 Audio).
var theSound = new Howl({
urls: ['assets/Sound.m4a'],
buffer: true,
sprite: {
scene0 : [ 1966000, 27000] }
When I test my application on the emulator and my iPad Mobile Safari everything works well. But when I run the application on the iPad as an app, the audio never starts. Using the web inspector I have noted that the audio file tries to load again and again like an not ending loop. You can see an attached screenshot of the resources tab on the web inspector both both the emulator and the iPad, running the same PhoneGap app.
Any idea on what could be the problem?
I've been looking into this for a while.
From what I've gathered, Howler defaults to Web Audio API, and this SO answer says you need a "user input event" to make it work on iOS, because by default it mutes everything. I even tried Howler's own interactive demo on my iPad 2 with iOS 5 (I still haven't updated) here and NONE OF THE SOUNDS WORK. My first link has a link to Apple's documentation, and I haven't tried it yet, but it looks like the convenience of Howler has to be replaced with a lower level implementation that takes about 5-10 lines with XMLHTTPRequest (see the Apple link), or another more versatile library. I'm still learning about what exactly I need, but I have a very similar problem I've been working on resolving today.
But then Howler falls back to HTML5 Audio. OK so I'm just googling that now, and this link comes up, and it's just reminding me of the pletora of compatibility considerations between OGG ACC MP3 etc on various browsers vs. browser layout engines vs. operating systems. So I'm left believing your file format M4A, related to MP3 as far as I can tell, isn't working in the target brower on the target iPad OS. I'm not familiar enough yet to give exact specifics but certainly since Howler doesn't work on my iPad that proves there's at least a problem with that.
The whole point I chose Howler to use was to abstract all the above away! I'm going to go look for another more comprehensive library now =D
the problem might be file size. IPad has a limited cache memory size and if you overflow it assets will not work. The only solution to this problem is smaller file size. Another possibility is html audio will not load or play except in a user event (touch). Web Audio will load but starts muted and only unmutes with a play call inside of a user event.
SoundJS is a library I help develop that handles as much of this stuff as possible. In particular I think you would find the Mobile Safe Approach useful. It is well tested on iOS and Android devices. Unfortunately we do not support sound sprites yet.
Hope that helps.
Hello people
I am really facing a big ask. I have created a dynamic AS3 flash website which loads images and text from an xml file.
Everything is fine, it works okay. EXCEPT that it goes totally dead in Ipad / iphone. My client was somehow not aware of this. And now he is going ballistic about the importance of IPAD in todays world etc etc..
I know IPAD does NOT support flash. Other than the OBVIOUS solution of recoding the complete website in HTML5 etc, I just wanted to know if somebody has tried anything else that could somehow make it work.
I have heard about the following, would like to know if any of this would make sense:
1. USE FLASH SUPPORTIVE BROwSER APPS IN IPAD
like Photon, skyfire, Puffin : are these brosers any good!! observations !!
2. CONVERT THE FLASH FILE INTO HTML5
using :
(1) Google SWiffy
Tried converting flash to HTML5 using swiffy extension for flash professional cs5 but the output was a disaster. XMLlist ignored, .... the list of errors is endless.
(2) Using Flash Professional CS6 / Toolkit for CreateJS
Any body having experience With this?? Any suggestions.
(3) Sothink sWf decompiler - decompile to HTML5
(4) Adobe Wallaby
(5) Anything else that is out there ...
3. USE ADOBE AIR
(1) Repackage as an app for IOS
This would work but can never give the experience of a website. Any thoughts.
(2) Package as AIR execute able file that can be run on IPAD??
Does Apple Ipad allow the installation of AIR files ??
Can it somehow be added to a browser and where it may automatically be loaded into the safari browser in IPAD etc ?? Its highly unlikely. Any thoughts !!
I would really appreciate if anybody and everbody could share their eperiences with these options AND whether or not its worth the try !!
Is the only option available is RECODING ONLY!!
Thanks ... looking forward to all your inputs and suggestions
Thanking you all in anticipation
Moody
Like you I found swiffy a waste of time for most things other than very simple as2 animations.
I don't know about AIR, but CS6 toolkit with createjs is excellent. Have a look at the video on the adobe site (http://www.adobe.com/devnet/createjs.html) - it's a good introduction to what you can and can't do.
Pete