Skip to content

Instantly share code, notes, and snippets.

@cparker15
Created September 25, 2012 18:02
Show Gist options
  • Save cparker15/3783463 to your computer and use it in GitHub Desktop.
Save cparker15/3783463 to your computer and use it in GitHub Desktop.
Replace img src with data: URI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Data URI Image Replacement Example</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"> </script>
<script>
(function ($) {
$(function () {
var img = $('#replace-me'),
oldSrc,
newSrc = 'data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%15%00%00%00*%08%02%00%00%00%D3Y%87%B9%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%03%24iTXtXML%3Acom.adobe.xmp%00%00%00%00%00%3C%3Fxpacket%20begin%3D%22%EF%BB%BF%22%20id%3D%22W5M0MpCehiHzreSzNTczkc9d%22%3F%3E%20%3Cx%3Axmpmeta%20xmlns%3Ax%3D%22adobe%3Ans%3Ameta%2F%22%20x%3Axmptk%3D%22Adobe%20XMP%20Core%205.3-c011%2066.145661%2C%202012%2F02%2F06-14%3A56%3A27%20%20%20%20%20%20%20%20%22%3E%20%3Crdf%3ARDF%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%3E%20%3Crdf%3ADescription%20rdf%3Aabout%3D%22%22%20xmlns%3Axmp%3D%22http%3A%2F%2Fns.adobe.com%2Fxap%2F1.0%2F%22%20xmlns%3AxmpMM%3D%22http%3A%2F%2Fns.adobe.com%2Fxap%2F1.0%2Fmm%2F%22%20xmlns%3AstRef%3D%22http%3A%2F%2Fns.adobe.com%2Fxap%2F1.0%2FsType%2FResourceRef%23%22%20xmp%3ACreatorTool%3D%22Adobe%20Photoshop%20CS6%20(Macintosh)%22%20xmpMM%3AInstanceID%3D%22xmp.iid%3ACD511822FE8C11E1AF02C6324E452AC0%22%20xmpMM%3ADocumentID%3D%22xmp.did%3ACD511823FE8C11E1AF02C6324E452AC0%22%3E%20%3CxmpMM%3ADerivedFrom%20stRef%3AinstanceID%3D%22xmp.iid%3ACD511820FE8C11E1AF02C6324E452AC0%22%20stRef%3AdocumentID%3D%22xmp.did%3ACD511821FE8C11E1AF02C6324E452AC0%22%2F%3E%20%3C%2Frdf%3ADescription%3E%20%3C%2Frdf%3ARDF%3E%20%3C%2Fx%3Axmpmeta%3E%20%3C%3Fxpacket%20end%3D%22r%22%3F%3E%99%EF%10%A7%00%00%00%E0IDATx%DA%EC%94%E1%0A%830%0C%84k%8C%8A%EF%FFj%BE%89%E0%8Fv%BA%9D%06%14%BA6%A6%DB%9F%C1z%D0R%D0%EFJ%93%F6%9Ai%9A%88%A8m%5B%CC%CD!g%D0%F3%10%16%0C%B2%EB%BA%BE%EF1%C3%C2%99%B5m%DB%BA%AE%3B%0Fx%1CG%CCX%DBy%C0!%84k%FFa%18Jy%1C%961%E4%FC%103%BB%12%EDUs%DF%A9%F2%95%AF%FC%E7b%C4%90%24%09TD%0A%C2%8FC%DE%7By%CF%C5%F9%831%CF%F3%B2%2C%FF%9E%9F%E0K%9B%17%E7%A7%A5x%D1%3F%14UU%B7%C0W)%7B%F6%FE)%16%EFp%FA%FE%26-%92p%F6%FEG%169X%7B%3F%A7%85%02%DF%BC%3F%B1P%E0%1B%5E%60%BD%23t%DB*%DD%82%2C%ADR%2C%C8%D8%E7%9C%05%19%FB%9C%B3%20%23%9C%B3%B8x%A4%98%0E%9F%16%BF%94%9F%2F%01%06%002%0D%C6%8FB%E2jM%00%00%00%00IEND%AEB%60%82';
$('#replacer').click(function () {
oldSrc = img.attr('src');
img.attr('src', newSrc);
newSrc = oldSrc;
});
});
})(jQuery);
</script>
</head>
<body>
<img src="https://www.saltmoney.org/web_resources/themes/salt/images/global/check-box-sprite.png" id="replace-me" />
<div>
<p>Click the <em>Swap</em> button to switch between <tt>http:</tt> and <tt>data:</tt> URIs.</p>
<button id="replacer">Swap</button>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment