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:

1. get picture (working)
2. display as preview for user (working)
3. creating an image in picture library (working)
4. 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

}

Answer 1

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

Answer 2

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

}

Answer 3

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!

Answer 4

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.