Imagemagick creating a blank PNG

November 07, 2014 02:07

You can create a transparent PNG with Imagemagick fairly easily.

Robs-MacBook-Pro:lcf roblacey$ convert -size 200x100 xc:none transparent.png

Suppose you wanted to base64 the output to embed it in HTML

Robs-MacBook-Pro:lcf roblacey$ convert -size 200x100 xc:none png:fd:1 | base64 -i - -o -
iVBORw0KGgoAAAANSUhEUgAAAMgAAABkAQAAAADr/UKmAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAnRSTlMAAHaTzTgAAAACYktHRAAB3YoTpAAAABlJREFUSMftwYEAAAAAw6D5Ux/gClUBAMAbCigAAUr66mAAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTQtMTEtMDdUMDI6MDE6NDcrMDA6MDCn12GlAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTExLTA3VDAyOjAxOjQ3KzAwOjAw1orZGQAAAABJRU5ErkJggg==

Of course when I do this in HTML…..

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkAQAAAADr/UKmAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAnRSTlMAAHaTzTgAAAACYktHRAAB3YoTpAAAABlJREFUSMftwYEAAAAAw6D5Ux/gClUBAMAbCigAAUr66mAAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTQtMTEtMDdUMDI6MDE6NDcrMDA6MDCn12GlAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTExLTA3VDAyOjAxOjQ3KzAwOjAw1orZGQAAAABJRU5ErkJggg==">

The image is transparent and therefore you can’t see it.

This one is mildly more interesting, maybe.

Robs-MacBook-Pro:lcf roblacey$ convert -size 200x100 xc:"#000000" png:fd:1 | base64 -i - -o -
iVBORw0KGgoAAAANSUhEUgAAAMgAAABkAQAAAADr/UKmAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAnRSTlMAAHaTzTgAAAACYktHRAAB3YoTpAAAABlJREFUSMftwYEAAAAAw6D5Ux/gClUBAMAbCigAAUr66mAAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTQtMTEtMDdUMDI6MDE6NDcrMDA6MDCn12GlAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTExLTA3VDAyOjAxOjQ3KzAwOjAw1orZGQAAAABJRU5ErkJggg==

Wait for it…….

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkAQAAAADr/UKmAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAd2KE6QAAAAZSURBVEjH7cGBAAAAAMOg+VMf4ApVAQDAGwooAAFK+upgAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE0LTExLTA3VDAyOjEwOjM1KzAwOjAwFMHNawAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0xMS0wN1QwMjoxMDozNSswMDowMGWcddcAAAAASUVORK5CYII=">

…worth waiting for.