Javascript - 从 base64 图像获取扩展名
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27886677/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript - get extension from base64 image
提问by itsme
I have a base64 encoded image returned from a service and it looks like this:
我有一个从服务返回的 base64 编码图像，它看起来像这样：
/9j/4AAQSkZJRgABAQEASABIAAD/4Yp2aHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/Pgo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA0LjEtYzAzNiA0Ni4yNzcwOTIsIEZyaSBGZWIgMjMgMjAwNyAxNDoxNjoxOCAgICAgICAgIj4KICAgPHJkZjpSREYgeG1.... etc
How can i detect / check the image extension?
如何检测/检查图像扩展名？
采纳答案by Tim Visser
For a String(which you can parse out of an image) you can do this:
对于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;
For completion's sake here's the sourceand I hope this helps!
为了完成，这里是来源，我希望这会有所帮助！
回答by Up209d
A bit late but it seem the question was misunderstood. He just only had the base64 content of the image, not the full data URI.
有点晚了，但似乎这个问题被误解了。他只有图像的 base64 内容，而不是完整的数据 URI。
I wrote here for anyone who encounters with this quest, you can read the first character of content content.charAt(0). By base64 image content if the first char is:
我在这里写给任何遇到此任务的人，您可以阅读内容的第一个字符content.charAt(0)。如果第一个字符是，则按 base64 图像内容：
'/' : jpg
'/' : jpg
'i' : png
“我”：png
'R' : gif
'R' : gif
'U' : webp
'U' : webp
So for your case, it is 'jpg'.
所以对于你的情况，它是'jpg'。
回答by Saptarshi
Was just tweaking with the string. May be this could help.
只是在用绳子调整。可能这会有所帮助。
base64Data.substring("data:image/".length, base64Data.indexOf(";base64"))
回答by Miguel Coder
Just a little error on the second split. But this is what i expected. Thanks you !
只是第二个小错误split。但这正是我所期望的。谢谢 ！
const type = base64Data.split(';')[0].split('/')[1];
回答by Pedro Benevides
This one will work for any extension type: pdf, mp3, png, ....
这个适用于任何扩展类型：pdf、mp3、png、...。
base64.substring(base64.indexOf('/') + 1, base64.indexOf(';base64'));
base64.substring(base64.indexOf('/') + 1, base64.indexOf(';base64'));
回答by Muhammad Tahir
By the way you provided invalid Base64 string. correct syntax of base64 encoded image string is like this
顺便说一下，您提供了无效的 Base64 字符串。base64 编码图像字符串的正确语法是这样的
"data:image/png;base64,abcdefghijklmnopqrstuvwxyz0123456789......"
You can parse that string and can get the information out of it
您可以解析该字符串并从中获取信息
const base64str = {profilepic:"data:image/png;base64,abcdefghijklmnopqrstuvwxyz0123456789"};
let mimeType = base64str.profilepic.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)[0];
and if you want to get only extensions you can use following code to get that one. using regex to parse base64 string and get the extension.
如果您只想获得扩展，您可以使用以下代码来获得该扩展。使用正则表达式解析 base64 字符串并获取扩展名。
const body2 = {profilepic:"data:image/png;base64,abcdefghijklmnopqrstuvwxyz0123456789"};
let mimeType2 = body2.profilepic.match(/[^:/]\w+(?=;|,)/)[0];
