Skip to content

Instantly share code, notes, and snippets.

@puppybits
Created January 5, 2012 14:18
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save puppybits/1565441 to your computer and use it in GitHub Desktop.
Save puppybits/1565441 to your computer and use it in GitHub Desktop.
Create data URI image from Terminal command
#!/bin/sh
# Examples:
# ./image64.sh myImage.png
# outputs: data:image/png;base64,xxxxx
# ./image64.sh myImage.png -img
# outputs: <img src="data:image/png;base64,xxxxx">
filename=$(basename $1)
xtype=${filename##*.}
append=""
if [ $xtype == gif ]; then
append="data:image/gif;base64,";
elif [ $xtype == jpeg ] || [ $xtype == jpg ]; then
append="data:image/jpeg;base64,";
elif [ $xtype == png ]; then
append="data:image/png;base64,";
elif [ $xtype == svg ]; then
append="data:svg+xml;base64,";
elif [ $xtype == ico ]; then
append="data:image/vnd.microsoft.icon;base64,";
fi
#Mathias Bynens - http://superuser.com/questions/120796/os-x-base64-encode-via-command-line
data=$(openssl base64 < $1 | tr -d '\n')
if [ "$#" -eq 2 ] && [ $2 == -img ]; then
data=\<img\ src\=\"$append$data\"\>
else
data=$append$data
fi
echo $data | pbcopy
echo "copied to clipboard"
@Blumed
Copy link

Blumed commented Mar 15, 2017

If you wrap the script in a function like bas64 no need to call the file.sh in your root. I don't think you need the empty append variable. Great little snippet @puppybits

bas64(){
  filename=$(basename $1)
  ext=${filename##*.}
  if [ $ext == gif ]; then
    append="data:image/gif;base64,";
  elif [ $ext == jpeg ] || [ $ext == jpg ]; then
    append="data:image/jpeg;base64,";
  elif [ $ext == png ]; then
    append="data:image/png;base64,";
    echo "this worked $1"
  elif [ $ext == svg ]; then
    append="data:image/svg+xml;base64,";
  elif [ $ext == ico ]; then
    append="data:image/vnd.microsoft.icon;base64,";
  fi

#Mathias Bynens - http://superuser.com/questions/120796/os-x-base64-encode-via-command-line
data=$(openssl base64 < $1 | tr -d '\n')

if [ "$#" -eq 2 ] && [ $2 == -img ]; then
	data=\<img\ src\=\"$append$data\"\>
else
	data=$append$data
fi

echo $data | pbcopy

echo "copied to clipboard"
}

@joubin
Copy link

joubin commented Nov 10, 2018

You can also remove the "shell escapes" via the following code

e.g. If the input is Desktop/Screen\ Shot\ 2018-11-10\ at\ 10.53.08\ AM.png

b64img(){
    # Remove escapes from the spaces
    FILE_PATH=$(echo $1 | tr -s " " "\\ ")

    filename=$(basename $FILE_PATH)
    ext=${filename##*.}
    if [ $ext == gif ]; then
        append="data:image/gif;base64,";
    elif [ $ext == jpeg ] || [ $ext == jpg ]; then
        append="data:image/jpeg;base64,";
    elif [ $ext == png ]; then
        append="data:image/png;base64,";
        echo "this worked {$FILE_PATH}"
    elif [ $ext == svg ]; then
        append="data:image/svg+xml;base64,";
    elif [ $ext == ico ]; then
        append="data:image/vnd.microsoft.icon;base64,";
    fi

    #Mathias Bynens - http://superuser.com/questions/120796/os-x-base64-encode-via-command-line
    data=$(openssl base64 < "$FILE_PATH" | tr -d '\n')

    if [ "$#" -eq 2 ] && [ $2 == -img ]; then
	    data=\<img\ src\=\"$append$data\"\>
    else
    	    data=$append$data
    fi
    echo $data | pbcopy
}

@francescmallafre
Copy link

@puppybits
@Blumed
@joubin

nice, nice, and nice 👌👌

@francescmallafre
Copy link

Worth mentioning, this bash function is setup to accept a second parameter, which adds the relevant string for it to be a valid DOM img src dom attribute.

b64img path_to_image.gif -img

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment