locked
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 }




    • 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 PM
    Owner
  • 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