javascript - How to determine whether an image is base64 in js

Question

Multiple img tags, the src of each tag is different,

Now we need to do different processing for images whose src is base64 encoded and non-base64 images,

How should javascript distinguish whether the image is base64?

Answer 1

BASE64 codes always start with the form data:image/xxx;base64,xxxxxx..., so just write a regular expression and test src

Answer 2

$('img').each((i,item)=>{
    let src = item.src
    if(src.indexOf('data:image/jpg;base64,')>-1){
        // base64 图片操作
    }else{
        //path 图片操作
    }
})

Answer 3

Are non-base64 images all URL addresses?

Answer 4

Just match according to the beginning of src

$('img').each((i,item)=>{
    let src = item.src
    if(src.indexOf('data:image')>-1){
        // base64 图片操作
    }else{
        //path 图片操作
    }
})

Answer 5

You need to use startWith, which is more efficient:

$('img').each((i,item)=>{
    let src = item.src
    if(src.startWith('data:image')){
        // base64 图片操作
    }else{
        //path 图片操作
    }
})

Answer 6

function validDataUrl(s) {
    return validDataUrl.regex.test(s);
}
validDataUrl.regex = /^\s*data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@\/?%\s]*?)\s*$/i;

module.exports = validDataUrl;