Single Pixel dataURL Generator

by bitstarr

HTML

<h1>Single Pixel dataURL Generator</h1>
<br/><br/>

1.Enter Color HEX<br/>
<input type="text" id="hex" value="#f11"><br/><br/>
<input type="button" value="2. Click Generate" onclick="generateHex()"><br/><br/>
3.See Generated dataURI<br/>
<input type="text" id="output" size="120"><br/><br/>
4.See working image<br/>
<img id="image" src="" width=100 height=100>

CSS

img{border:1px solid black;width:100px;height:100px;}
h1{font-size: 200%;}

JavaScript

function encodeHex(s) {
    s = s.substring(1, 7);
    if (s.length < 6) {
        s = s[0] + s[0] + s[1] + s[1] + s[2] + s[2];
    }
    return encodeRGB(
    parseInt(s[0] + s[1], 16), parseInt(s[2] + s[3], 16), parseInt(s[4] + s[5], 16));
}

function encodeRGB(r, g, b) {
    return encode_triplet(0, r, g) + encode_triplet(b, 255, 255);
}

function encode_triplet(e1, e2, e3) {
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    enc1 = e1 >> 2;
    enc2 = ((e1 & 3) << 4) | (e2 >> 4);
    enc3 = ((e2 & 15) << 2) | (e3 >> 6);
    enc4 = e3 & 63;
    return keyStr.charAt(enc1) + keyStr.charAt(enc2) + keyStr.charAt(enc3) + keyStr.charAt(enc4);
}


function generatePixel(color) {
    return "data:image/gif;base64,R0lGODlhAQABAPAA" + color + "/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==";
}

// scripts are loaded in a closure in jsFiddle
// so make function global
window["generateHex"] = function generateHex() {
    var image = document.getElementById("image");
    var hexInput = document.getElementById("hex");
    var dataOutput = document.getElementById("output");
    var hex = hexInput.value;
    var color = encodeHex(hex);
    var data = generatePixel(color);
    dataOutput.value = data;
    image.src = data;
}

generateHex();