6

In HTML, I can use a data URI to display image to avoid requiring an HTTP request to fetch image resources. This can be useful for displaying icons.

For example:

<img width="128" height="128" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFBAcH7+/vgYODwMHBFBcXoaKiYmRkQ0VFIyYmU1VV0NDQMzY24ODgsLGxcnR0kZKS////c4YKVAAAABF0Uk5T/////////////////////wAlrZliAAAEMElEQVR42uya6ZLbIAyAuU/b5P2fttltpg1GgCQ73ekM+pmMrc8CCR2Ixw+LWAALYAEsgAWwABbAAvivAaR+yvYTAMkqn8UfCd4V/c8AthKNgMSr9HkAWbIYSDjSRwGSE1PJ9mMA2guUBPsRgA2pnoqABJCHIIlP9wLoIKii7gQ4BEPydheAzIIlZr8HIBnBlXIHwM7XL4S7DmD7vuYPpeyulIr5AoFg6Q/HLms3KZ5JMAbQ4OaCA760mUMgqPtvFOXAYK34ALLVbyz9vLBsgPZlh5xuKttQm8QEUM2bUFmPbLizZAFo0nuG5AcLINCDStd5NQNA8fU/rXfaCIEOsF3R/3RgtC/2ANwl/c0qGEkEOBkg09PtgjSBwBjAcKqfiDOBwBhgZ+h/yIAygUAYIPKKrjqQGApAfQgYyQM4LYIlAFhWfjtZyEgAqNAD1wDnlZRoAHmPAc4msGiAvbcDZHHeq65PSvv1d+qZIKIBXCcGqtfejLAxy+tvL2FHMGiAAMcANz6YHZSBVK9KSAAJY78fj34cejNc1BUkgAZXoI4Ndhw6LLidHBJAga8qY6e2ncNLjO0GAjhw3eI4sJ7ylz+/Z/DXMYAHn/EdDXD+AP8ucQAZtFocA/QsoGapIQAAL1utwY/zjwDvaAaA6oTVMo66CgbYrwBUawAcUAccvvXsWMEDvHVqoGLrvZGzdyxzDeBvzRXg8jxCvaE7AZ7R5qtN7UsvQdDA3/pWgKuJIWMTxlsBkG4YZuGbIpxA5GfhmyLVebwxDqOLE6H518yO4/0iwLTCFJOc1N24ByMSYEO2FshbQLGS0nQJIEwbNdO0/LiiP4mpR4lZaWiuADALEzmqqPboO3Wudl7JQapc8MVp7m/D78zHA9FBqtbT6ixq45bn1Qe/vkmdT0Qb2o1WGyBTGhSiW5//DRBvISqpALmaYzcoTo8evZPqa2SiVAyw1yZUl0pg+oy6EybH44mM6hcLTKf+fRHSYIZpSi8I9k81gWqVVy6senO0yjksstUqcMOKo/Y4CCHq0bRnowKk4dxF2lOllk+Nm7N+erO6mRc3XqRV9E87Ze/Vfv6+s/5Bp60L0EysCAlyM23bOROTxuEctmHYDEwia2TzaC6MZFRuIJvnDG9oBY3tEcsA3HUYDtsEZSmfRphM7jZHHeILfMP9FW00Tf0srRW07fT7phC8pjt4y2hW3PHG97GcPF/uDg7Q02kn+wKDeR7G+ltKfSATp63iwSXASJyHjnn1eeESCaasQpS/KTD1oy50YepvGTnqA66mwjUAivnE8hMAHhvRCAF9wxPdAqHcZzMKP2kj9GBsuF898UqnRVxqDIo2ZyR2odIx3o6R3NKht8H00bk6ZpxlDFlZfTi5V/eavw8Gy2ylXGgESv2SS628dbt+ASyABbAAFsACWAAL4JcAAwD1fxiuqPBX0wAAAABJRU5ErkJggg==" />

Will display:

smiley icon

What I'd like to do is dynamically overlay some text on top of this. For example:

smiley icon with hello caption over it

Is there a javascript library that will allow me to do this? Ideally, it will allow me to modify .pngs.

3
  • 1
    Interesting question. Should the change happen on the client side, after page load, or on the server side (with node.js, probably?) or somewhere in between?
    – Marcel
    Nov 25, 2015 at 6:53
  • @Marcel - Clientside.
    – dwjohnston
    Nov 25, 2015 at 20:51
  • Ok, how about like this? stackoverflow.com/questions/8708945/… It would require a slight change in how the page is built, though.
    – Marcel
    Nov 26, 2015 at 6:42

1 Answer 1

1

You can do this with some simple javascript that adds text after each image. I have created a jsFiddle for you:

https://jsfiddle.net/suterma/7npbxxkg/5/

However, positioning of the text is a bit difficult, and, the image is not physically altered. So, when a user right-clicks to download/view the image, the text is gone.

1
  • 2
    Unfortunately this is an HTML/Div based solution. The data URI I'm using is actually passed into a JS library I'm using to be drawn on an HTML canvas, so I need to modify the URI itself.
    – dwjohnston
    Jan 18, 2016 at 21:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.