problem with CaptureUI capturedItem to HTML Canvas RRS feed

  • Question

  • Hey Guys,

    I am trying to move the captured image from webcam into an HTML Canvas element for some good old fashioned pixel manipulation but it just isnt working! I cant work out why. here is my code:

    var captureUI = new Windows.Media.Capture.CameraCaptureUI();
    captureUI.photoSettings.format = Windows.Media.Capture.CameraCaptureUIPhotoFormat.png;
    captureUI.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).then(function (capturedItem) {
    	if (capturedItem) {
    		var canvas = document.getElementById("area");
    		var context = canvas.getContext("2d");
    		var image = new Image();
    		image.src = URL.createObjectURL(capturedItem);
    		image.width = '800';
    		image.height = '480';
    		//draw canvas
    		context.drawImage(image, 0, 0, image.width, image.height);
    		imgd = context.getImageData(0, 0, image.width, image.height);
    		pix = imgd.data;
    		context.putImageData(imgd, 0, 0);
    	} else
    		// do stuff

    I know the code itself works, because if i replace:

    image.src = URL.createObjectURL(capturedItem);


    image.src = 'images/source.png';

    this works. So i am thinking it is something to do with the ObjectURL.

    I seem to have no issue using the createObjectURL command as such:

    document.getElementById("image").src = URL.createObjectURL(capturedItem);

    where "image" is the id of an <img> tag. So i am very confused as to why canvas wont accept it as a valid URL when declared the way I have done.

    does ANYONE have any tips? It would be much appreciated!!

    Thursday, October 4, 2012 5:52 AM

All replies

  • I use code very similar to what you have there but no


    and after context.drawImage()   I don't use the other three lines.



    Wednesday, March 19, 2014 7:41 PM