Javascript - 從 base64 圖像獲取擴展名

Question

我有一個從服務返回的 base64 編碼圖像，它看起來像這樣：

/9j/4AAQSkZJRgABAQEASABIAAD/4Yp2aHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/Pgo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA0LjEtYzAzNiA0Ni4yNzcwOTIsIEZyaSBGZWIgMjMgMjAwNyAxNDoxNjoxOCAgICAgICAgIj4KICAgPHJkZjpSREYgeG1.... etc

如何檢測/檢查圖像擴展名？

Answer 1

有點晚了，但似乎這個問題被誤解了。 他只有圖像的 base64 內容，而不是完整的數據 URI。

我在這里為遇到此任務的任何人寫的，您可以閱讀內容content.charAt(0)的第一個字符。 如果第一個字符是，則按 base64 圖像內容：

'/' : jpg

“我”：png

'R' : gif

'U' : webp

所以對於你的情況，它是'jpg'。

Answer 2

只是在用繩子調整。 可能這會有所幫助。

base64Data.substring("data:image/".length, base64Data.indexOf(";base64"))

Answer 3

您也可以使用函數鏈來完成。

const type = base64Data.split(';')[0].split('/')[1];

Answer 4

對於String （您可以從圖像中解析出來），您可以執行以下操作：

// Create Base64 Object
var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}

// Define the string, also meaning that you need to know the file extension
var encoded = "Base64 encoded image returned from your service";

// Decode the string
var decoded = Base64.decode(encoded);
console.log(decoded);

// if the file extension is unknown
var extension = undefined;
// do something like this
var lowerCase = decoded.toLowerCase();
if (lowerCase.indexOf("png") !== -1) extension = "png"
else if (lowerCase.indexOf("jpg") !== -1 || lowerCase.indexOf("jpeg") !== -1)
    extension = "jpg"
else extension = "tiff";

// and then to display the image
var img = document.createElement("img");
img.src = decoded;

// alternatively, you can do this
img.src = "data:image/" + extension + ";base64," + encoded;

為了完成，這里是來源，我希望這會有所幫助！

Answer 5

這個適用於任何擴展類型：pdf、mp3、png、...。

base64.substring(base64.indexOf('/') + 1, base64.indexOf(';base64'));

Answer 6

順便說一下，您提供了無效的 Base64 字符串。 base64 編碼圖像字符串的正確語法是這樣的

"data:image/png;base64,abcdefghijklmnopqrstuvwxyz0123456789......"

您可以解析該字符串並從中獲取信息

const base64str = {profilepic:"data:image/png;base64,abcdefghijklmnopqrstuvwxyz0123456789"};
let mimeType = base64str.profilepic.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)[0];

你可以在這里看到演示

如果您只想獲得擴展，您可以使用以下代碼來獲得該擴展。 使用正則表達式解析 base64 字符串並獲取擴展名。

const body2 = {profilepic:"data:image/png;base64,abcdefghijklmnopqrstuvwxyz0123456789"};
let mimeType2 = body2.profilepic.match(/[^:/]\w+(?=;|,)/)[0];

在此處查看在線工作演示

Answer 7

有點晚了，但您可以使用 Node.JS 中的file-type模塊來完成：

npm 安裝文件類型

var fileType = require("file-type");

var base64string = "/9j/4AAQSkZJRgABAQEASABIAAD/4Yp2aHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/Pgo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA0LjEtYzAzNiA0Ni4yNzcwOTIsIEZyaSBGZWIgMjMgMjAwNyAxNDoxNjoxOCAgICAgICAgIj4KICAgPHJkZjpSREYgeG1";
var base64string_buffer = Buffer.from(base64string, "base64");

(async ()=>{

    var result = await fileType.fromBuffer(base64string_buffer);
    console.log(result);
    //Returns  { ext: 'jpg', mime: 'image/jpeg' }

})();

根據file-type的 npm 頁面，它用於獲取可以在返回的緩沖區項中找到的幻數。 例如，jpeg 以ff d8開頭，pdf 以25 50 44 46等開頭。

作為參考，這里是base64string_buffer.toString('hex').match(/../g).join(' ')的一個片段：

ff d8 ff e0 00 10 4a 46 49 46 00 01 01 01 00 48 00 48 00 00 ff e1 8a 76 68 74 74 70 .....

Answer 8

這個非常適合我。 它將以“image/png”格式返回文件類型

    function base64MimeType(encoded) {
      var result = null;
    
      if (typeof encoded !== 'string') {
        return result;
      }
    
      var mime = encoded.match(/data:([a-zA-Z0-9]+\/[a-zA-Z0-9-.+]+).*,.*/);
    
      if (mime && mime.length) {
        result = mime[1];
      }
    
      return result;
    }

Answer 9

使用我的js函數！ 它可以檢查JPG，PNG，BMP等。

 /** * @author PiaoZhenJia */ function base64FileHeaderMapper(fileBase64) { let fileHeader = new Map(); //get the first 3 char of base64 fileHeader.set("/9j", "JPG") fileHeader.set("iVB", "PNG") fileHeader.set("Qk0", "BMP") fileHeader.set("SUk", "TIFF") fileHeader.set("JVB", "PDF") fileHeader.set("UEs", "OFD") let res = "" fileHeader.forEach((v, k) => { if (k == fileBase64.substr(0, 3)) { res = v } }) //if file is not supported if (res == "") { res = "unknown file" } //return map value return res; }