What I need to do: I have a web page that uses the webcam to capture a photo. When you click a button, it saves the current webcam image to an HTML canvas object. When I get the image from the canvas object, it comes out as a Base64 encoded string, e.g.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAABwCAYAAAD8HIl9AAAgAElEQVR4Xky9B7hld3Hl...
On the other end is a Web API service used to save the photo to the server. It is written in C# and is expecting a FileStream.
My front end is written using only HTML and Javascript (Angular/Jquery included). I need to send the image to the server in the format it expects.
I've been banging my head against the wall for two days. It seems that what I need to do is create a FormData object, append the image to it, and send it up. But doing so gives me a 200 error. Something is not formed correctly.
While I use an input element of type file, and upload a file from disk, this code works perfectly. When when I pass it the base64 image string, it fails. When I append the image string to a FormData object, it fails.
factory.setPhoto = function (id, image) {
var fd = new FormData();
fd.append('file', image);
return $http.post(baseUrl + '/' + id, fd, {
transformRequest: angular.identity,
headers: { 'Content-Type': undefined }
}).then(function (results) {
// whatever
});
};
