將 base64 圖像轉換為 jpeg

Question

努力將使用網絡攝像頭捕獲的 base64 圖像轉換為 jpeg 以進行上傳。

以下捕獲/顯示照片有效（請注意，我使用的是 webcam.min.js（返回 base64）而不是 webcam.js（返回 jpeg 但依賴於 Flash）-

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

我嘗試了以下方法，可能會將base 64image 轉換為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});
    }

這沒有任何作用，除了停止 jsp

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

如何獲取/查看/提取實際的 jpeg 文件，以便我可以上傳它（它必須類似於 number.jpeg）

JDK6 / Javascript（請不要 php）

任何想法表示贊賞。

問候拉爾夫

Answer 1

創建一個圖像對象並將 base64 作為其源。

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

這是轉換為 blob 和上傳所需的基礎知識。

 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>

請記住將您的takeSnapshotThenUpload修復為以下內容：

 <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 到文件（圖像/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;
        },