如何检测数据URL

时间:2018-01-26 05:18:12

标签: javascript base64 data-url

我正在开发一个角度4应用程序。我有一个base64编码的图像。我用node.js将它保存在文件系统中。

 if (body.profilepic != "") {
            let base64Data = body.profilepic.split(';base64,').pop();

            fs.writeFile("out.png", base64Data, 'base64', function(err) {
                if (!err) {
                    console.log("saved file")
                }
            });
        }

问题是我无法检测到我保存的图像的文件类型。现在它只保存pngs。

如何检测我收到的图片字符串的文件类型?

我得到的base64编码字符串是这样的:

data:image/png;base64,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

6 个答案:

答案 0 :(得分:5)

您不需要正则表达式或任何花哨的东西。

dataUrl具有非常可预测的格式,我们知道mime将会在一开始。因此,最好停在“:”和“;”的第一个出现处。

dataUrl = "data:image/png;base64,abcdefghijklm.."
dataUrl.substring(dataUrl.indexOf(":")+1, dataUrl.indexOf(";"))  // => image/png

答案 1 :(得分:1)

从完整的base64内容中提取内容(MIME)类型。



mix
  .js('resources/assets/js/app.js', 'public/js')
  .extract([
    'lodash', 'jquery', 'vue', 'query-string',
    'datatables.net', 'datatables.net-buttons', 'datatables.net-bs4', 'datatables.net-buttons-bs4', 'datatables.net-buttons/js/buttons.html5.js',
    'select2', 'axios', 'moment', 'popper.js', 'bootstrap', 'vue-chartjs', 'v-tooltip', 'moment/locale/es', 'vue-moment',
    'jszip/dist/jszip', 'pdfmake/build/pdfmake.js', 'pdfmake/build/vfs_fonts.js', 'sweetalert', 'vue-strap', 'vue-strap/dist/vue-strap-lang',
    'moment-array-dates', 'vue-toast', 'randomcolor', 'url', 'google-maps'
  ])
  .sass('resources/assets/sass/app.scss', 'public/css')
  .copy('node_modules/font-awesome/fonts', 'public/fonts/vendor/font-awesome');

if (mix.inProduction()) {
  mix.version();
}




答案 2 :(得分:0)

您可以使用RegExp /[^:]\w+\/[\w-+\d.]+(?=;|,)/来匹配前面带有:的一个或多个单词字符,然后是/,后跟字符集中的一个或多个单词字符包括-字符来处理application/octet-stream+来处理image/svg+xml\d来处理application/x-7z-compressed.来处理application/vnd.apple.mpegurl来处理; 1}}后跟,base64字符,以处理data URL

中未包含的const body = {profilepic:"data:image/png;base64,abcdefghijklmnopqrstuvwxyz0123456789"}; let mimeType = body.profilepic.match(/[^:]\w+\/[\w-+\d.]+(?=;|,)/)[0]; console.log(mimeType);

{{1}}

答案 3 :(得分:0)

const obj = /data:(.*);base64,(.*)/.exec('data:image/png;base64,iVBORw0KGgoAAAANSkJggg==');

console.log('Content Type: ' + obj[1]);
console.log('Base64 data: ' + obj[2]);

或来自IMG标签:

const obj = /<img.*src="data:(.*);base64,(.*?)"/.exec('<img src="data:image/png;base64,iVBORw0KGgoAAAANSkJggg==" />');

console.log('Content Type: ' + obj[1]);
console.log('Base64 data: ' + obj[2]);

答案 4 :(得分:-1)

如果您想获得像(image / png),(image / jpg)这样的Mime类型,请使用此

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

online Demo here

=========================================

如果您只想获取它的类型,例如(png,jpg)等

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

online Demo here

答案 5 :(得分:-3)

substringindexOf

一起使用
var ex = string.substring("data:image/".length, string.indexOf(";base64"))

Demo