Closed rattios closed 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.
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
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
I guess I can't escape typing this out for you.... 1 minute
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">
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
ok thank you very much, very attentive to your great tool! very thankful
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.
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 }