Answered by:
winJS(CameraCaptureUI) How to preview(done) and SAVE(?) picture to disk?

Question
-
I researched a lot and tried a bunch of things that don't work. So what I need is:
- get picture (working)
- display as preview for user (working)
- creating an image in picture library (working)
- save the preview as that image to local picture folder (missing)
Thanks.
I capture a picture and display it on page like this:
function captureImage() { //S1: Create a new Camera Capture UI Object var cam = Windows.Media.Capture.CameraCaptureUI(); var name = document.getElementById('ticketnum').innerHTML+'.jpg'; var folder = Windows.Storage.KnownFolders.picturesLibrary; //was windows.storage //S2: Perform an Async operation where the Capture // Image will be stored as file cam.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo) .done(function (data) { if (data) { //S3: Create a URL for the capture image // and assign it to the <Img> var urlpic= window.URL.createObjectURL(data); document.getElementById('imgCapture').src = urlpic; //**save picture to memory as ticket number, creating new img, how to put the file inside? folder.createFileAsync(name, Windows.Storage.CreationCollisionOption.replaceExisting) //creates new file? .then(function (file) { //file.copyAndReplaceAsync(window.URL.createObjectURL(data)); // HOW TO SAVE IMAGE TO pictures library? }); } } , error); document.getElementById('txtserver').value = "Done"; //save image to memory? //clean up resources }
- Edited by SharonDev Friday, June 13, 2014 2:51 PM
Thursday, June 12, 2014 7:36 PM
Answers
-
Working. Here is the answer:
function testSavePictureDisk() { //S1: Create a new Camera Capture UI Object var cam = Windows.Media.Capture.CameraCaptureUI(); //location? var name = document.getElementById('ticketnum').innerHTML + '.jpg'; var folder = Windows.Storage.KnownFolders.picturesLibrary; //was windows.storage //S2: Perform an Async operation where the Capture // Image will be stored as file folder.createFileAsync(name, Windows.Storage.CreationCollisionOption.replaceExisting) //creates new file? .then(function (file) { cam.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo) .done(function (data) { if (data) { //S3: Create a URL for the capture image // and assign it to the <Img> document.getElementById('imgCapture').src = window.URL.createObjectURL(data); //**save picture to memory as ticket number data.moveAndReplaceAsync(file); //**end testing for local save } } , error); document.getElementById('txtserver').value = "Done"; //save image to memory? //clean up resources });//end of new file creation }
- Marked as answer by SharonDev Friday, June 13, 2014 6:05 PM
Friday, June 13, 2014 2:52 PM -
Yes, you found that the "data" variable you're getting back from the capture is a StorageFile object, and if you look at its properties you'll see that camera capture creates a file in your temp appdata location. So you can use its moveAsync or moveAndReplaceAsync methods to transfer it to another location.
- Marked as answer by SharonDev Friday, June 13, 2014 6:05 PM
Friday, June 13, 2014 5:58 PM
All replies
-
What do you mean by saving a preview as opposed to saving the image? What is the difference between cases 3 (working) and 4 (not working)?
Also see the CameraCaptureUI sample
Friday, June 13, 2014 2:45 PMModerator -
Working. Here is the answer:
function testSavePictureDisk() { //S1: Create a new Camera Capture UI Object var cam = Windows.Media.Capture.CameraCaptureUI(); //location? var name = document.getElementById('ticketnum').innerHTML + '.jpg'; var folder = Windows.Storage.KnownFolders.picturesLibrary; //was windows.storage //S2: Perform an Async operation where the Capture // Image will be stored as file folder.createFileAsync(name, Windows.Storage.CreationCollisionOption.replaceExisting) //creates new file? .then(function (file) { cam.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo) .done(function (data) { if (data) { //S3: Create a URL for the capture image // and assign it to the <Img> document.getElementById('imgCapture').src = window.URL.createObjectURL(data); //**save picture to memory as ticket number data.moveAndReplaceAsync(file); //**end testing for local save } } , error); document.getElementById('txtserver').value = "Done"; //save image to memory? //clean up resources });//end of new file creation }
- Marked as answer by SharonDev Friday, June 13, 2014 6:05 PM
Friday, June 13, 2014 2:52 PM -
The difference was that I displayed an image using the url method. I didn't see the generated picture in memory. 4. save image to my pictures.
The picture is created in temp memory somewhere and I need to move it to pictures location. That's the part that I was missing. Changed my code to opening file first and then moving the picture there and it works!
Friday, June 13, 2014 2:55 PM -
Yes, you found that the "data" variable you're getting back from the capture is a StorageFile object, and if you look at its properties you'll see that camera capture creates a file in your temp appdata location. So you can use its moveAsync or moveAndReplaceAsync methods to transfer it to another location.
- Marked as answer by SharonDev Friday, June 13, 2014 6:05 PM
Friday, June 13, 2014 5:58 PM