I'm having an issue which could be an edge case.
The thing is that I'm developing a web site that is acting as a mobile app (something like a mobile first website) and to do this, I found a method to open the camera of the device when the user click on a file input.
Until there every works fine. The problem is that when I open the website on my laptop, when I click the input file, it opens a file selector, instead of open the camera of the device.
Also when I click the input file on some mobile devices, sometimes happens some of the following: 1. select photo from the gallery 2. open the camera
Which aren't accepted in my project, due to it only can accept recent photos(which are taken at that moment).
Anybody knows how to control this?
Really thanks!!!
Okay, I see you are using PHP server-side... If you don't mind uploading the image without checking first, you can build in a check server-side.
With exif_read_data() you can read metadata from an image. See documentation for all details
The FileDateTime will hold the date of when the image was created. Thus you could check if the image is a recent image.
Another possible way is to check which camera was used. It depends on which device was used to take the picture if these values are set.
$exif_ifd0 = exif_read_data($tempImagePath ,'IFD0' , 0);
// $exif_ifd0 will be an array.
The last method is illustrated in this comment at php.net
Related
I'm working with BootstrapVue. I have a b-form-file in my template which I'm using to upload photos - it should run on a Webbroswer and it's, for now, always used by an iPhone-User.
Now I want to know if there is a possibility that my project notice that I have opened it on Safari (it's possible that it will run on Android too later because of that it should check that first) and than if this is known it should select always Take Photo or Video.
Normally you can choose between these 3 on iPhone after clicking on b-form-file
Photo Libarry
Take Photo or Video
Browse
and it should always use Take Photo or Video after detecting that it's running on Safari..
Is it possible to achieve that ?
Thanks in advance!
We use Atalasoft's web image viewing SDK to display TIF images in a web page. We recently upgraded to their client-side, JavaScript/jQuery based component and discovered some odd behavior. After initializing the control, if a link is clicked to a resource that should be downloaded, the control(s) clear themselves out. The issue exists in Chrome and IE 11 that I have tested.
Since it is a paid SDK, the easiest way to test this is to go to their demo at:
http://www.atalasoft.com/demos/dotimagewebdemo/
Once the page finishes loading, open a developer console and paste in the following (simply adds a download link to a file on their site):
$("body").append($("<div style='position:absolute;right:5px;top:5px;'><a href='/Gallery/WebViewingDemo.zip'>DOWNLOAD</a></div>"))
Clicking the download link will wipe out their controls on the page.
Adding download to the anchor tag resolves the issue in Chrome, but not IE.
Adding target='_blank' resolves the issue in both, but creates an ugly blank window first (that in my experience does not always close).
I am setting headers server-side to tell the browser to download the file rather than displaying it.
I guess my questions are two-fold:
Is it normal for JavaScript/jQuery based objects to disappear/destroy/whatever when a link is clicked to download a file or is this a problem with their implementation?
and
What is the best solution for this (preferably without the blank page showing up)? We need to support mainly Chrome, FF, and IE (most popular desktop versions).
Thanks in advance!
(First time doing this, so I hope I'm doing it right)
As a part of a bigger project, I'm interested in being able to show an iframe with the contents of another site as it would look if viewed on a mobile device. I understand that I might run into some issues later on with mobile-specific looks and such but with my current tests I'm using a simple site with no special mobile design.
So I started out with visiting the site on my mobile phone (Galaxy S3). Here's a picture I took as reference of what it looks like on it: http://i.imgur.com/n9rRKIx.png
The important thing to notice is where the text wraps. The first row is "Turtles are reptiles of the order Chelonii[2]"
Now, if I were to visit it on my computer, the first row would be longer: "Turtles are reptiles of the order Chelonii[2] or Testudines characterised by a special bony or "
If I were to just resize the iframe, it wont automatically resize the paragraphs and such, making them wrap earlier.
I decided to google it and see if I could find a site doing the same thing. However, each one I tried displayed it wrong. All of them have the longer version as the first row. Here's some of the ones I tried:
iPhone tester
Mobile Phone Emulator
Responsivepx
Screenfly
Here's an album showing the results: http://imgur.com/a/cRaAs
As you can see, most of them look almost the same, but none of them looks or wraps like my mobile phone. This is despite me telling these sites to use a Galaxy S3 preset if available.
To clarify, I am not interested in finding another site that does this (except as a proof of concept). I want to know how to detect things like where the text wraps and the font size so that I can replicate it in an iframe.
If I've left out any vital information, tell me and I'll add it.
The title is very self-explanatory, but I'll get into a deeper explanation here. I have a Firefox extension for my image hosting site (which is currently down).
It currently has two features:
Right click on image and remote upload
Right click on image, get a Javascript popup to enter new width and upload
What the extension still needs is a feature (or two) which allows the user to upload the current visible things on the browser or a full capture of the browser (including what's under the scrollbar).
What I have tried:
I have tried copying various pieces of code from other extensions and combine them with my own. They included stuff such as canvas which I did not really understand. I was able to get a base64 image string somehow (I don't exactly remember how). With that string, I thought the best way to achieve my goal is send it to my image host via XMLHttpRequest and create the image in my host. The ResponseText would be a link to the image.
As you can see, I was doing too much here - I obviously don't need to do extra handling in my server side for this issue. I think there are ways to handle everything from the extension only, without extra coding in my server-side (correct me if I am wrong).
Actual issue
This is the add-on: https://addons.mozilla.org/en-US/firefox/addon/imgit/
As you can see the two context menus that get added by the extension, I need a third context menu, which has an arrow to the right to open another menu with the two new options I need:
Capture visible screen and upload
Capture full screen and upload
The first option should capture and upload what's visible in the browser, excluding what's under the scrollbar. The second option should capture everything and upload it to my website, including what's under the scrollbar.
Adding the context menus is not a big deal, but making them behave the way I want is the problem I have. I have no idea how to start and my research around the web couldn't get me further. Creating the image via Javascript somehow (using canvas which I don't know how) and sending a base64 encoded string to my website could actually work, but taking the snapshot and making it base64 encoded is the problem. I'm also unsure if Firefox extensions actually let me use Ajax to send/receive data.
What I need from you
I need a logical approach to this issue. If you have an idea, please answer and showing code snippets would be really appreciated. I'm not a Javascript guru, but with some information on how to start, I could get myself out of this mess.
What is the best way to achieve what I want?
Check out the grabScreen function of the devtools' screenshot command.
I have been struggling with this issue for days now. I am implementing an application for Android and iOS using Sencha Touch. I want to be able to click on a link (a list item) which can point to a html or an image or maybe even PDF documents (for iOS). This file can be either local or on another domain.
I have found two different approaches so far, but haven't got any of them to work perfect. One approach is to change "window.location" and go to a html page containing a frame with a back button and another frame with the file I want to display. Scrolling and zooming works fine but when the user wants to go back the whole application has to be reloaded (all javascript files and so on..).
The other approach is to fetch the desired file using an ajax request and add the response text inside a panel. The problem with this is that the zooming is not working. I tried to listen for a pinch event and then scale the panel but then the scrolling stops working...
So the question is: How do i display external content such as HTML pages and pictures but still preserve the scroll and zoom capabilites and allow the user to go back without having to reload the whole application again?
I am grateful for all information i can get! /Christian
Add the following to your apps onCreate() method:
WebSettings settings = this.appView.getSettings();
settings.setSupportZoom(true);
settings.setBuiltInZoomControls(true);
It won't work if your ROM does not support mulit-touch but since it is already working in your browser this should do it.
If you are using PhoneGap, you can try to the ChildBrowser plug-in: https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/ChildBrowser
For a pure mobile web app, use the HTML5 cache manifest to avoid reloading when you move between frames and pages: http://diveintohtml5.ep.io/offline.html