canvasOn a web page in a mobile web application I am developing, I have a fileinput control that is used to take a picture with a mobile device camera. The image from the camera is then drawn onto an HTML5 canvas object on the same page.
The issue I am having is that if the web application is run on an iPhone 5 running iOS 7 (in the Safari web browser), the image appears extremely distorted. Specifically, the image appears to be vertically squished when drawn on the canvas. If the same web application is run on an Android device, no distortion is seen.
In previous versions of iOS and on iOS devices prior to iPhone 5, some vertical squishing was seen (although not as bad as this), and a jquery plugin named megapixel-image.js could be used to correct the vertical squishing. This tool unfortunately is not compatible with iOS 7.
Is this related to image subsampling in Safari or something else? What can be done to correct this? I obviously cannot have my users see this distorted image. Any mobile web app developer who wants to use the camera and HTML5 canvas is going to run into this, so a solution is mandatory.
megapixel-image.js does handle this correctly. I found I was passing some parameters to the plugin incorrectly, causing it not to work. My thanks to Ray Nicholus for his assistance with this issue.
Related
I am looking for a solution to share the screen from a mobile AR app (ARKit or Unity AR Foundation).
The screen needs to be shared to a browser on the desktop and it should be possible to draw lines on the screen from the browser using the mouse in the AR environment that can be seen on the mobile app which is sharing the screen.
After some investigation there does not seem to be a viable solution to truly share the same AR instance with browser/mobile as you can do with 2 mobile devices.
There should however be some sort of work around possible as it can be done with Vuforia Chalk AR.
Here is a GIF showing how it works:
AR Drawing demo
Sharing a video seems to be possible
Specifically trying to figure out how the line is drawn from the browser and then displayed on the mobile AR app
How can you achieve the same functionality with open source alternatives or Unity and custom code (No Vuforia is possible)?
Looking for a tutorial or some directions to how this can be implemented.
I have developed a mobile web application which allows the user to take a picture with their mobile device camera and then displays it on an HTML5 canvas. When running this web application on an iPhone 5C under iOS 7, the image is severely vertically squished, so that it appears distorted and takes up approximately 20% of the canvas instead of taking 100% as intended.
This may be related to Safari image subsampling, which also caused vertical squishing in earlier versions of iOS and on other devices, although not nearly as bad as what is being seen in the above issue. A jquery plugin named megapix-image.js was created to address this issue and it works on iPhone4 and iPad running iOS 6 to correct this vertical squishing so the image appears correctly. megapix-image.js appears not to be compatible with iPhone 5/iOS 7 (it will not convert the image file).
Something to note is that iOS 7 completely corrected the vertical squishing issue seen on iPhone 4, but it has apparently made the problem much worse on iPhone 5/5C.
Is there a solution to this issue?
Solution:
<script type="text/javascript" src="~/Scripts/megapix-image.js"></script>
<script>
var mpImg = new MegaPixImage(file);
var mpImg.render(srcImage, {maxWidth: 960, maxHeight: 960});
</script>
where file is the file from the fileInput control and srcImage is the corrected image
I discovered that megapixel-image.js does work with iPhone 5 and iOS 7. I found I was calling some parameters incorrectly. The plug-in corrects the vertical squishing issue.
I am testing a web app by running selenium test scripts on an iPad simulator using Selenium iPhone driver. The app opens in UIWebView inside the simulator. However the top part of the app (title , toolbar etc.) gets hidden from view. I am able to see the top part when I drag down and hold the bottom part of the app.
1) How can I make UIWebView make the app visible fully? I guess it is because of the difference in iPad simulator version used in the iPhone driver source code and one that I am using to launch the app(iOS 6.0). However I have no idea how to proceed with this as but I'm not familiar enough with iOS development.
2) Is testing in UIWebview same as testing the app in mobile Safari? Is there any way I can test the app in mobile Safari in an iPad using Selenium?
as I understand, you want to test the website, not the iphone app.
Then you could just as easily open it in mobile safari and use bookmark to view full screen (if you wanted the app to go fullscreen, you would need to do it programmatically)
I updated the Ipad storyboard file located at src\resource. The webView setting Y coordinate was set to -84 and I changed it to 0. This might help
I'm working on an image heavy web site that's essentially got three designs for multiple screens: smart phone, tablet and desktop.
The main feature of this site is background/fullscreen images. Has anyone got any recommendations regarding the suggested sizes that these background images should be?
They'll all be progressive jpegs as that seems the most sensible path for resizing and optimisation.
Handling the different images sizes will be another test, but essentially it seems sensible to handle it on the client side since this design allows for a polite loader.
I would recommend formatting for a non-retina phone such as the iPhone 3Gs at 480x320, a retina iPhone 5 at 1136x640, a retina iPad at 2048x1536, a retina mac book pro at 2880x1800. Then setup your media queries to pick the best of those sizes for non-retina ipad, standard desktop (your default image), and the Google Nexus 10 which has a display near the MBP retina (2560x1600).
For background images you will want to use media queries. For fullscreen images what I've done is implement a JavaScript module that allows you to imitate the picture element proposed by the Responsive Images Community Group. Or if you prefer you could go the "srcset" route.
I am coding a web app for an iPhone and I'm wondering how best to use Safari to develop for the iPhone, the main problem being that I've got is that Safari apparently cannot be resized to the narrow 320 pixels of width. How can I do that?
Any other tips and tricks?
If you are looking for an environment to test, Ripple emulator seems a nice option.
I had the same problem and solved it quickly and simply by using a 320x480-sized iframe. Additionally, I added options to change the size (iPhone portrait, landscape, iPad, status bar or not, ...) and presto! an iPhone “simulator”!
Edit: that also allows the use of the Web Developer tools, they're invaluable in Safari or Chrome (I prefer to use the latter, but both are Webkit-powered).
The absolute best way is to use a real device - iPhone or iPod touch - so you get a proper feel for how the device responds. If you're doing hefty animations, for example, testing on a desktop computer may leave you scrambling once you realize the entire page lags horribly on a real device the day before launch.
Barring that, you should use the iOS Simulator that comes with the xCode iOS SDK.
You can use a browser extention or plug-in. For Safari there is ResponsiveResize for instance. You can donwload it here. It allows you to use a predefined browser size, or use any custom size you'd like.