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.

  • 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 '15 at 6:53
  • @Marcel - Clientside. – dwjohnston Nov 25 '15 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 '15 at 6:42
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.

  • 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 '16 at 21:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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