problem with CaptureUI capturedItem to HTML Canvas

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';
		URL.revokeObjectURL(capturedItem);

		//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);

with

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!!

Answer 1

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

URL.revokeObjectURL(capturedItem)

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

HTH.

---

Phil