将 base64 图像转换为 jpeg

Question

Struggling to convert a base64 image captured using a webcam into a jpeg for upload.

The following capture / display photo works (note that I am using webcam.min.js (which returns base64) and not webcam.js (which returns jpeg but relies on Flash) -

function take_snapshot() {
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('upload_results').innerHTML = 
'<img id="imageprev" src="'+data_uri+'"/>';
} );
}

I have tried the following, which may or may not be converting the base 64image to a blob -

function saveSnap(){
var base64image = document.getElementById("imageprev").src;
alert(base64image)
                                
                                                               
    // convert base64 to raw binary data held in a string
    var byteString = atob(base64image.split(',')[1]);
    // separate out the mime component
    var mimeString = base64image.split(',')[0].split(':')[1].split(';')[0];
    // write the bytes of the string to an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);
    var dw = new DataView(ab);
    for(var i = 0; i < byteString.length; i++) {
    dw.setUint8(i, byteString.charCodeAt(i));
                                                                    alert("arrived here");
                                                                    
    // write the ArrayBuffer to a blob, and you're done
    return new Blob([ab], {type: mimeString});
    }

And this doesn't do anything, except halt the jsp

let image = new Image();
image.src = base64image;
document.body.appendChild(image);

How do I get / see / extract the actual jpeg file so I can then upload it (it must be something like number.jpeg)

JDK6 / Javascript (no php please)

Any thoughts appreciated.

Regards Ralph

Answer 1

Create an image object and put the base64 as its source.

let image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);

var aFilePartss = [image];
var oMyBlob = new Blob(aFileParts, {type : 'image/png'});
// window.open(URL.createObjectURL(oMyBlob));

var fd = new FormData();
fd.append('data', oMyBlob);
$.ajax({
    type: 'POST',
    url: '/upload.php',
    data: fd,
}).done(function(data) {
    console.log(data);
});

Answer 2

Here is the basics you need to convert to blob and upload.

 const MOCK_DATA_URL = `data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+/PjjUmssAAAGASURBVHjatJaxTsMwEIbpIzDA6FaMMPYJkDKzVYU+QFeEGPIKfYU8AETkCYI6wANkZQwIKRNDB1hA0Jrf0rk6WXZ8BvWkb4kv99vn89kDrfVexBSYgVNwDA7AN+jAK3gEd+AlGMGIBFDgFvzouK3JV/lihQTOwLtOtw9wIRG5pJn91Tbgqk9kSk7GViADrTD4HCyZ0NQnomi51sb0fUyCMQEbp2WpU67IjfNjwcYyoUDhjJVcZBjYBy40j4wXgaobWoe8Z6Y80CJBwFpunepIzt2AUgFjtXXshNXjVmMh+K+zzp/CMs0CqeuzrxSRpbOKfdCkiMTS1VBQ41uxMyQR2qbrXiiwYN3ACh1FDmsdK2Eu4J6Tlo31dYVtCY88h5ELZIJJ+IRMzBHfyJINrigNkt5VsRiub9nXICdsYyVd2NcVvA3ScE5t2rb5JuEeyZnAhmLt9NK63vX1O5Pe8XaPSuGq1uTrfUgMEp9EJ+CQvr+BJ/AAKvAcCiAR+bf9CjAAluzmdX4AEIIAAAAASUVORK5CYII=` function takeSnapshotThenUpload() { //get datauri let blob = convertToBlob(MOCK_DATA_URL) return uploadFile(blob) } function convertToBlob(base64image) { // convert base64 to raw binary data held in a string var byteString = atob(base64image.split(',')[1]); // separate out the mime component var mimeString = base64image.split(',')[0].split(':')[1].split(';')[0]; // write the bytes of the string to an ArrayBuffer var ab = new ArrayBuffer(byteString.length); var dw = new DataView(ab); for (var i = 0; i < byteString.length; i++) { dw.setUint8(i, byteString.charCodeAt(i)); alert("arrived here"); // write the ArrayBuffer to a blob, and you're done return new Blob([ab], { type: mimeString }); } } function uploadFile(blob) { const formData = new FormData() formData.append('cancel.jpeg', blob) fetch('/saveImage', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { console.log(data) }) .catch(error => { console.error(error) }) }

 <button onclick="takeSnapshotThenUpload()">Take screenshot then upload</button>

Remember to fix your takeSnapshotThenUpload to something like:

 <script src="webcam.js"></script> <div id="my_camera" style="width:320px; height:240px;"></div> <div id="my_result"></div> <script language="JavaScript"> Webcam.attach( '#my_camera' ); function take_snapshot() { Webcam.snap( function(data_uri) { takeSnapshotThenUpload(data_uri) } ); } </script> <a href="javascript:void(take_snapshot())">Take Snapshot</a>

Answer 3

base64 to file (image/jpeg)

        async base64ToFile(base64){
            const res = await fetch(base64)
            const buf = await res.arrayBuffer()
            const file = new File([buf], "capture_camera.jpeg", {
                type: 'image/jpeg',
            })
            return file;
        },