image to data url bookmarklet

credit: http://stackoverflow.com/questions/5420384/convert-an-image-into-binary-data-in-javascript

HTML

<p>
Use this bookmarklet to create data url from an image.  It assumes that you want the first image on the page, so open the image that you want in its own tab, then run this.  Drag this link to you bookmark bar to save it.

<br>
<br>
    <a href='javascript:(function(){var img=document.getElementsByTagName("img")[0];var canvas=document.createElement("canvas");canvas.width=img.width;canvas.height=img.height;var ctx=canvas.getContext("2d");ctx.drawImage(img,0,0);var dataURL=canvas.toDataURL("image/png");alert(dataURL);var textArea=document.createElement("textarea");textArea.innerHTML=dataURL;textArea.style.position="fixed";textArea.style.top="20px";textArea.style.left="20px";textArea.style.zIndex="99999";textArea.style.width=textArea.style.height="500px";document.body.appendChild(textArea)})();'>image to data url</a>
    
    <br/>
    <img src="https://scoutmvp-develop.s3.amazonaws.com/1/inventoryfile/246/original/signage-demo-4.jpg" width="100px"/>
    
    <textarea></textarea>
    
<br>
<br>
    credit:    <a href="http://stackoverflow.com/questions/5420384/convert-an-image-into-binary-data-in-javascript">http://stackoverflow.com/questions/5420384/convert-an-image-into-binary-data-in-javascript</a>
</p>

CSS

html, body {
    background: #333;
}
p {
    background: #fff;
    color: #111;
    border-radius: 10px;
    font-size: 1.3em;
    line-height: 1.3em;
    font-family: helvetica, arial, sans-serif;
    padding: 2em;
    margin: 2em auto;
    max-width: 500px;
    word-wrap: break-word;
}