AckerApple / ack-angular-webcam

MIT License
37 stars 19 forks source link

How do I return the image in jpg and not as a base 64 string? #32

Closed rattios closed 6 years ago

rattios commented 6 years ago

I see the example but I do not understand the process.

I implement this: but formData contains nothing

//get HTML5 FormData object and pretend to post to server genPostData(){ this.webcam.captureAsFormData({fileName:'file.jpg'}) .then( formData=>this.postFormData(formData) ) .catch( e=>console.error(e) ) }

//a pretend process that would post the webcam photo taken postFormData(formData){ const config = { method:"post", url:"http://www.aviorsciences.com/", body: formData }

const request = new Request(config)

return this.http.request( request )
AckerApple commented 6 years ago

You cannot see file items within an HTML5 FormData class...

Please search this packages issues because this is a common one I've had to explain time and time again.

It's how HTML4 FormData class works. You cant inspect it, you have to trust the items are there and send it to your server.

AckerApple commented 6 years ago

The body of your issue does not reflect the title of this issue.

Your file data, in this case image data, is default in binary format inside the browsers memory. Casting it to base64 is an additional process. Otherwise, since you dont want base64, just send the captured files to your servers as in the demo and binary data is transmitted using tranditional <form method="post" enctype="multipart/form-data"> data

rattios commented 6 years ago

ok thanks, but what is the function that returns me in jpg or jpge instead of base64.

I understand that to return in base 64 is this: genBase64(){ this.webcam.getBase64() .then( base=>this.base64=base) .catch( e=>console.error(e) ) }

but to reguer me an image or file .jpg I do not know what it is

AckerApple commented 6 years ago

I guess I can't escape typing this out for you.... 1 minute

AckerApple commented 6 years ago

This library, like most, takes the web camera image and displays it out to a video element.

To convert a video element to an image still, this package uses a HTML canvas element to canvas.drawImage(video,0,0)

To convert a canvas element that has drawn an image...... Base64 using the method canvas.toDataURL()

SO. Their is no file. Only canvas rendered video element. This package converts Base64 into a transmittable file by casting Base64 into a HTML5 FormData class

If you want the image file, you have to send FormData to a server. The server will absolutely 100% think you are sending a binary file just as what happens with <form method="post" enctype="multipart/form-data">

AckerApple commented 6 years ago

The code for this package that draws a video element into a canvas into an image, can be seen here:

https://github.com/AckerApple/ack-angular-webcam/blob/master/src/webcam.component.ts#L348

rattios commented 6 years ago

ok thank you very much, very attentive to your great tool! very thankful

AckerApple commented 6 years ago

I'm glad to hear that. It's great to meet and be working with you. Pretty much everyone knows I'm short tempered and chat like a pain in the ass but I'll always try and be helpful.