For the mobile website of a project I need to add a image-uploading button which does allow the access of the Iphone camera.
For example, the user does have his own profile and wants to add an avatar to that, he should have the possibility to make a photo, which is directly uploading to a database. Ive found some scripts where it is possible to access the photo-gallery, but i want to access the camera, which automatically uploads the picture...
Take a picture and upload
something like that!
Any help is much appreciated,
Greets
If you have iOS 6 or greater you can use the
<input type="file" accept="image/*" capture="camera">
For iOS < 6, you can always implement an image picker yourself and then inject the captured image data into the html as base64 encoded data.
Take the picture, base 64 encode your captured image data, then,
with jQuery, it should be quite simple:
[self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:#"$('#imagePlaceholder').attr('src','data:image/png;base64,%#');", base64ImageDataString]];
Related
I'm trying to make a mobile web application (both for IOS and Android) that lets the user upload some pictures, either by choosing them from the library or by taking them with the device camera.
I'm using this input <input type="file" accept="image/*" capture="camera" multiple>. It works great, it opens the camera and it lets me choose to use the photo or to try again, but the multiple attribute doesn't work. I can only take one photo per time.
Am i missing something? Maybe the multiple attribute is not supported?
Just remove,
capture="camera"
then it will open on gallery directly and allow multiple selection.
I think it actually is impossible to take multiple pictures with the camera this way before uploading, and that it's only possible to upload multiples with the file browser.
You will need to use JavaScript and the MediaStream functionality, pretty much writing a quick camera app yourself. It works but there are a few pitfalls with how manufacturers report sensors etc.
I am taking a photo with the user's native camera application via HTML, like so:
<input
type="file"
accept="image/*"
capture="camera" />
This opens the user's native camera application and gives a reject/confirm dialogue, which fits our use case perfectly.
Firstly and most importantly - can we force the flash using this or any other method?
Also, it would be nice to force the rear camera, but this is not necessary.
Thanks!
I think the first comment is correct, but by using a client-side image EXIF data library it seems that we can accept/reject photos based on flash fired.
I have a PDF file being viewed on the browser.
I want to disable Save, Download and print option of the PDF file.
Please help.
Try this:
<object width="100%" height="100%" type="application/pdf"
data="yourpdffile.pdf#toolbar=0" id="pdf_content"><p>Document load was not
successful.</p></object>
Make sure you add #toolbar=0 in the data attribute after your pdf file.
You can use iframe to your own version of PDF viewer.
Use pdfJS and when showing viewer.html just remove these buttons.
If user is viewing it on it's own tool, than you can't control it.
Google Drive can disable the PDF functions to download, print and copy as of 2015.
Note however, that users can still print using the browser print function.
https://gsuiteupdates.googleblog.com/2015/07/disable-downloading-printing-and.html
As others have noted, once the pdf is being viewed by the user, they can save it.
If you are just wanting to obfuscate the download, you could disable the menu as described but to truly prevent downloading of the PDF, then only thing you could really do is a little crazy but not impossible.
You could convert it to images and show those instead. Not an ultimate solution as they would still be able to save each image, but at the very least they would not get a PDF file from it (or at least if they are smart enough to convert the images to one, it would not be the same pdf file or content)
There are many tools to do this and you'd have to implement a viewer with paging but this might achieve what you want.
I'm making an app where i want to show the user a range of base64 encoded picture. They are shown by using data-url. If the user wants to save a picture, it can simply rightclick and save as (or drag it into a folder).
Are there any way to control the sugested filename? Right now Chrome just sugest "download" and doesn't even recognize it as an image. Can this be done in any way?
I only need it to work in Chrome.
Thanks for any help
Make sure you are setting the proper mime type for the image in the data uri. Doing this fixed the file extension in Chrome 17, for me. The file was downloaded as "download.png", and opened fine.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
However, if you really need full control over the filename, you can exploit the html5 "download" attribute of the a tag, to set the filename, and create a Blob object with your image data that will be used be downloaded.
See a demo here: http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download
Read more here: http://dev.w3.org/2009/dap/file-system/file-writer.html
The current specification does not make this possible.
Hello I hope someone can help. I am creating an application that allows people to browse and download images. I know I can't access the photo library from mobile safari, my question is how can I deliver the images to a user? I don't think I can access mobile browsers copy > clipboard with javascript, can I? I am using sencha touch and it seems very difficult to implement press > hold > copy. Any ideas how you would deliver say 20 images to someone through the phone through mobile browser?
I guess you could email them to the user.
Can't you just display the images and then they can download them to their photo library? On an iphone you just hold down over an image and a sheet will popup asking the user if they want to save an image.