Is it possible, using javascript, to allow a user to take a picture with their device and embed it into a svg for further processing without uploading image to a server? I'd like to allow a user to take a picture with their device, display it in an svg element so they can add annotations. Once they are done, they could push the whole svg, including the embedded image to the server.
It depends where the javascript is running. With HTML5 you can grab a files contents prior to it being uploaded using the FileAPI and there are libraries available that will convert an image to SVG, the problem you have is with gaining access to the camera.
In a users browser? No, you don't have access to their camera without utilizing Flash/Java
In a Cordova mobile app? Yes, you can gain access to the users camera.
In a Chrome App? Yes, you can get access to a lot of low-level APIs via Javascript.
What you need is the new JavaScript API getUserMedia/Stream API:
http://caniuse.com/#feat=stream1
Related
I was wondering how streaming service providers like Netflix, Hulu, Sling.. et identify my device when I login using web Browser on my labtop.
I couldn't find any Javascript APIs to get a GUID or so.
You can use the fingerprintJS2 library for your project too.
https://fingerprintjs.com/
How this library gets fingerprints
Fingerprint.js collects all the unique features from a device/browser passing them through a hash function to provide a unique identifier.
Example
There are many other ways to get unique browser fingerprint.
The newest method to obtain browser information is called “Canvas Fingerprinting.” Simply put, websites are written in HTML5 code, and inside that code, there is a little piece of code that takes your browser’s fingerprint.
So, how are websites doing that, exactly? Let me explain.
This new tracking method that websites employ to obtain your browser fingerprint is enabled by new coding features in HTML5.
HTML5 is the coding language used to build websites. It’s the core fundamentals of every website. Within the HTML5 coding language, there’s an element which is called “canvas.”
Originally, the HTML element was used to draw graphics on a web page.
Wikipedia provides the following explanation on how exploiting the HTML5 canvas element generates browser fingerprinting:
“When a user visits a page, the fingerprinting script first draws text with the font and size of its choice and adds background colors. Next, the script calls Canvas API’s ToDataURL method to get the canvas pixel data in dataURL format, which is basically a Base64 encoded representation of the binary pixel data. Finally, the script takes the hash of the text-encoded pixel data, which serves as the fingerprint."
In plain English, what this means is that the HTML5 canvas element generates certain data, such as the font size and active background color settings of the visitor’s browser, on a website. This information serves as the unique fingerprint of every visitor.
In contrast to how cookies work, canvas fingerprinting doesn’t load anything onto your computer, so you won’t be able to delete any data, since it’s not stored on your computer or device, but elsewhere.
Source and further reading: https://pixelprivacy.com/resources/browser-fingerprinting/
https://multilogin.com/everything-you-need-to-know-about-canvas-fingerprinting/
By the way you can get much more information from Googling yourself.
I am using fingerprintjs.library for creating a browser fingerprint it works well with all device but when i test fingerprint in exact configuration device like laptop with exact configuration it generate same fingerprint.
Before implementation i read many blogs says canvas fingerprint generate unique base64 string but when i tested in device with same configuration it generate same canvas fingerprint. The canvas fingerprint is not unique in exact or similar device.
While using fingerprint.Js libary, i made some option disable like plugins, enumerate device, browser version because this are dynamic in nature on adding headphone in device fingerprint will read headphone information or generate fingerprint accordingly or same with browser version. fingerprint will vary if any of this thing change in future.
My requirement was to create a unique & constant fingerprint that donot change even after opening browser after somedays.
I suggest using localStorage and store a unique white-listed ID that gets verified on every login attempt.
localStorage.setItem('laazaz_id', '4587ff526d');
localStorage.getItem('laazaz_id'); //returns 4587ff526d
docs: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
We have an offline web app written with js/jquery/HTML5 that uses local storage to store multiple MB of data in json format that gets edited when the app is in use. This data eventually gets uploaded to our server via ajax. It works very well on both iOS and Android devices. We now want to allow users to repeatedly select an item in their data and take a picture to later be associated with that item. Pictures would be uploaded to our server along with the data. Pictures would also be reduced to 50kb or less in size with a canvas element either at the time they're taken or when they're uploaded. For any given upload, they're may a hundred or more pictures.
We had planned to store a reference to pictures as they're taken to later use for uploading. We now know, in a browser, without using native app code or frameworks such as PhoneGap, that there's no way to store such a reference or path when pictures are stored in the iOS camera roll or Android gallery. We can get the picture's file name by using an input control, but that's of no use without a full path. Also, all image filenames on iOS devices are "image.jpg". We could access the pictures' image data using data URLs, but we can't reliably store it because there' not enough space in local storage for both our json-formatted data and potentially hundreds of data URLs.
So the question is, is there a way using js/jquery/html5 (not PhoneGap or native app code) to take a picture, get a reference to it for later resizing with a canvas element and then uploading via ajax?
If you want to know if is there a way to resize image in Client-side using canvas to reduce them to 50kb then yes, there is.
Here is the link : http://blog.liip.ch/archive/2013/05/28/resizing-images-with-javascript.html
Here is a DEMO
And here is the CODE
I have tested it and it is really good.
PD. I dont like how this CODE resize the image, i changed it using another algorithm, let me know if you want it
Now i am looking for a way to listen the event when the mobile devise use the camera to take a photo and upload them. Because they are automatically rotated to left 90 grades.
I have a Django web application in which I want to give an option to capture the image in the registration form. So, whenever the user presses the capture image button then the camera on the client system should open to take the image, the image then would get stored in the server-side folder.
I am thinking that the camera should open from the HTML page and send the image to the server, but I am not able to open the camera using the HTML code.
Please advise me.
You can use WebRTC for this; html5rocks.com has a nice tutorial, see especially the example of taking screenshots. To store the image on the server, you'll have to upload it via AJAX.
You have several options to access client webcam. The easiest way is HTML5. But you can use
sveral tools in silverlight and flash plugin.
See how-to-access-webcam-from-html5 and html5-getusermedia-record-webcam-both-audio-and-video
After getting image in page you can send it to server in diffrent ways including JavaScript (with AJAX) or using HTML form element (like file input)
How would one go about drawing the output of a program running outside the browser onto a canvas? I was thinking along the lines of using a virtual frame buffer, but am unsure of how one would proceed with the process. I figure that there would have to be some intermediate processing or mapping of the pixel data with JavaScript as an intermediary.
Does anyone have any recommendations or insight that they could offer?
Thanks
I know this thread is a bit old...
As an alternative to Guacamole (Linux/Apache/Java), you may have a look to Myrtille, (Windows/IIS/C#). It works for both HTML4 (using divs and xhr) and HTML5 (using canvas and websockets).
HTML5 canvas is not designed to do that. Its designed to read image (or video) data from the web and display it, either as normal http download or as xmlHttpRequest. When you need to get image data generated by an external application into the javascript engine of the web browser, you need to expose that image data as a webservice.
Thanks to MarkE's and Philipp's nudging I found what seems to be the beginnings of a suitable solution.
Although it does't involve a framebuffer directly, I found Guacamole an HTML5 remote desktop gateway, http://guac-dev.org/ it only uses Ajax and HTML5 to render on the desktop of a remote system using vnc or RDP protocols in the browser. Its open source and is a suitable starting point in my view.
I'm working on an image mashup web app.
I want to avoid flash or other client hassles and just do it pure HTML+javascript.
To keep it light, I'd like to do the work on the client side in Javascript, and have it just push a final saved image to the server.
I thought after reading about the wonders of HTML5 and Canvas I'd be able to use that.
Trouble is though:
If I use the new drag and drop feature of HTML5 for the user to pass a local image to the app and then paint it to the canvas, then ... the canvas get's dirty and it throws a security exception if I try to save the image data.
If I use an API like Bing Image search to find images for the user and paint them to the canvas, then ... the canvas gets dirty and it throws a security exception if I try to save the image data.
The only work around I can think is to have the server act as a kind of proxy and have it relay every image that is worked with to the client - but that defeats the purpose of going client side.
Is there any other method I'm not thinking of, or is pure HTML5 + JS at the client side just not an option for this use case?
The security exception is thrown because you are using images from different domain (local or Bing in your case), you should give to the user the ability to upload the selected images on your server and then work with them in canvas. For images from internet storages you can make something like a proxy to show them on the frontend, images from user's pc should always be uploaded. There is no other way to avoid XSS exceptions as far as I know.
P.S. there is a good article about HTML5 canvas image restrictions here: http://simonsarris.com/blog/480-understanding-the-html5-canvas-image-security-rules