JavaScript and Canvas Playing : Generate Random Noise and Download The Image From The Canvas With New HTML5 Download Attribute + Demo

Generate some random noise (color or black&white) over canvas,
then, get the image, or download it using the new HTML5 “download”-attribute, or as a generic resource.

<style type="text/css">
.random-gen-canvas-white {
    width: 300px;
    height: 300px;
    background-color: rgba(255, 255, 255, .8);
    outline: 1px solid rgba(0, 0, 0, .3);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, .2);
    margin-bottom: 10px;
}
.btn {
    width: 90%;
    height: 50px;
    margin: 2px 2px 2px 2px;
}
.btn-bnw {} .btn-color {} .btn-download {} .btn-clear {}
</style>
<canvas id="canvasWhite" class="random-gen-canvas-white" width="300" height="300"></canvas>
<script type="text/javascript">
function canvas_genRandomBNW() {
    var canvas = document.getElementById("canvasWhite"),
        ctx = canvas.getContext('2d'),
        i, ii = 1200;
    for (var i = 0; i < ii; i += 1) {
        ctx.fillStyle = (~~(Math.random() * 2)) === 1 ? "rgba(255,255,255,.9)" : "rgba(0,0,0,.9)";
        ctx.fillRect(~~(Math.random() * 300), //x
            ~~(Math.random() * 300), //y
            1, 1);
    }
    return true;
}

function canvas_genRandomCOLOR() {
    var canvas = document.getElementById("canvasWhite"),
        ctx = canvas.getContext('2d'),
        i, ii = 1200,
        r, g, b, a;
    for (var i = 0; i < ii; i += 1) {
        r = (~~(Math.random() * 256)); //red
        g = (~~(Math.random() * 256)); //green
        b = (~~(Math.random() * 256)); //blue
        a = "." + (30 + (~~(Math.random() * 71)))
            .toString(); //alpha transparency from .30 to .90
        ctx.fillStyle = "rgba(" + r + "," + g + "," + b + "," + a + ")";
        ctx.fillRect(~~(Math.random() * 300), //x
            ~~(Math.random() * 300), //y
            1, 1);
    }
    return true;
}

function canvas_getImage() {
    var canvas = document.getElementById("canvasWhite"),
        a = document.createElement("a");
    a.setAttribute("target", "_blank");
    a.setAttribute("type", "image/png");
    a.setAttribute("href", canvas.toDataURL("image/png"));
    document.getElementsByTagName("body")[0].appendChild(a);
    a.click(true);
}

function canvas_download_using_html5_download_attribute() {
    var canvas = document.getElementById("canvasWhite"),
        a = document.createElement("a");
    a.setAttribute("type", "image/png");
    a.setAttribute("href", canvas.toDataURL("image/png"));
    a.setAttribute("download", "random_image_" + (99999999 + ~~(Math.random() * 999999))
        .toString(13) + ".png");
    document.getElementsByTagName("body")[0].appendChild(a);
    a.click(true);
}

function canvas_download_forcing_by_using_octetstream_mimetype() {
    var canvas = document.getElementById("canvasWhite"),
        a = document.createElement("a");
    a.setAttribute("type", "image/png");
    a.setAttribute("href", canvas.toDataURL("image/png")
        .replace('data:image/png;', 'data:application/octet-stream;'));
    a.setAttribute("download", "random_image_" + (99999999 + ~~(Math.random() * 999999))
        .toString(13) + ".png");
    document.getElementsByTagName("body")[0].appendChild(a);
    a.click(true);
}

function canvas_clear() {
    var canvas = document.getElementById("canvasWhite");
    canvas.width = canvas.width;
}
</script>
<button class="btn btn-bnw" onclick="javascript:canvas_genRandomBNW();" type="button">Add Black&amp;White Noise!</button>
<button class="btn btn-color" onclick="javascript:window.canvas_genRandomCOLOR();" type="button">Add Color Noise!</button>
<button class="btn btn-getImage" onclick="javascript:window.canvas_getImage();" type="button">Open Image In New Tab!</button>
<button class="btn btn-download" onclick="javascript:window.canvas_download_using_html5_download_attribute();" type="button">Download Image! (HTML5-download attribute)</button>
<button class="btn btn-download" onclick="javascript:window.canvas_download_forcing_by_using_octetstream_mimetype();" type="button">Download Image! (as octet-stream mimetype)</button>
<button class="btn btn-clear" onclick="javascript:window.canvas_clear();" type="button">Clear</button>

here is the same code wrapped in PRE tag so WordPress will actually run it as a sample (nice and easy!)
















September 15th, 2016 - edit:

Some Log2 patterns
*plus a little trick to get a "better random" by reversing the digits.

<!doctype html>
<html dir="ltr" lang="en-US">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta http-equiv="Content-Type"    content="text/html;charset=UTF-8"/>
  <meta name="viewport"              content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  <style type="text/css" media="all">
    html{ 
      background: none lightblue;
    }
  </style>
</head>
<body>
<style type="text/css">
.random-gen-canvas-white {
    width: 300px;
    height: 300px;
    background-color: rgba(255, 255, 255, .8);
    outline: 1px solid rgba(0, 0, 0, .3);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, .2);
    margin-bottom: 10px;
}
.btn {
    width: 90%;
    height: 50px;
    margin: 2px 2px 2px 2px;
}
.btn-bnw {} .btn-color {} .btn-download {} .btn-clear {}
</style>
<canvas id="canvasWhite" class="random-gen-canvas-white" width="300" height="300"></canvas>
<script type="text/javascript">

function getRandom(modulo){
var number = Math.random();
number = String(number).substr(2,8).split('').reverse().join('');
number = Number(number);
number = Math.log2(1+1/number) / Math.log2(number);
number = String(number).replace(/[\,\.\-e]/gi,"");
number = Number(number);

return "undefined" === typeof modulo ? number : number % modulo;
}

function canvas_genRandomBNW() {
    var canvas = document.getElementById("canvasWhite"),
        ctx = canvas.getContext('2d'),
        i, ii = 1200;
setTimeout(function(){
    for (var i = 0; i < ii; i += 1) {
        ctx.fillStyle = getRandom(2) === 1 ? "rgba(255,255,255,.9)" : "rgba(0,0,0,.9)";
        ctx.fillRect(getRandom(300), //x
                     getRandom(300), //y
            1, 1);
    }
},20);
    return true;
}

function canvas_genRandomCOLOR() {
    var canvas = document.getElementById("canvasWhite"),
        ctx = canvas.getContext('2d'),
        i, ii = 1200,
        r, g, b, a;
setTimeout(function(){
    for (var i = 0; i < ii; i += 1) {
        r = getRandom(256); //red
        g = getRandom(256); //green
        b = getRandom(256); //blue
        a = "." + (30 + getRandom(71))
            .toString(); //alpha transparency from .30 to .90
        ctx.fillStyle = "rgba(" + r + "," + g + "," + b + "," + a + ")";
        ctx.fillRect(getRandom(300), //x
                     getRandom(300), //y
                     1, 1);
    }
},20);
    return true;
}

function canvas_getImage() {
    var canvas = document.getElementById("canvasWhite"),
        a = document.createElement("a");
    a.setAttribute("target", "_blank");
    a.setAttribute("type", "image/png");
    a.setAttribute("href", canvas.toDataURL("image/png"));
    document.getElementsByTagName("body")[0].appendChild(a);
    a.click(true);
}

function canvas_download_using_html5_download_attribute() {
    var canvas = document.getElementById("canvasWhite"),
        a = document.createElement("a");
    a.setAttribute("type", "image/png");
    a.setAttribute("href", canvas.toDataURL("image/png"));
    a.setAttribute("download", "random_image_" + getRandom(99999).toString(13) + ".png");
    document.getElementsByTagName("body")[0].appendChild(a);
    a.click(true);
}

function canvas_download_forcing_by_using_octetstream_mimetype() {
    var canvas = document.getElementById("canvasWhite"),
        a = document.createElement("a");
    a.setAttribute("type", "image/png");
    a.setAttribute("href", canvas.toDataURL("image/png")
        .replace('data:image/png;', 'data:application/octet-stream;'));
    a.setAttribute("download", "random_image_" + getRandom(99999).toString(13) + ".png");
    document.getElementsByTagName("body")[0].appendChild(a);
    a.click(true);
}

function canvas_clear() {
    var canvas = document.getElementById("canvasWhite");
    canvas.width = canvas.width;
}
</script>
<button class="btn btn-bnw" onclick="javascript:canvas_genRandomBNW();" type="button">Add Black&amp;White Noise!</button>
<button class="btn btn-color" onclick="javascript:window.canvas_genRandomCOLOR();" type="button">Add Color Noise!</button>
<button class="btn btn-getImage" onclick="javascript:window.canvas_getImage();" type="button">Open Image In New Tab!</button>
<button class="btn btn-download" onclick="javascript:window.canvas_download_using_html5_download_attribute();" type="button">Download Image! (HTML5-download attribute)</button>
<button class="btn btn-download" onclick="javascript:window.canvas_download_forcing_by_using_octetstream_mimetype();" type="button">Download Image! (as octet-stream mimetype)</button>
<button class="btn btn-clear" onclick="javascript:window.canvas_clear();" type="button">Clear</button></body>
</html>

here are some fun variations to base-formula and graphic-outputs,
which shows some white (empty) areas due to log's nature,
same goes for the color randomness, which seems to create a lovely-distribution maps :]

  • Math.log2(1+1/number) / Math.log2(number);
    icompile-eladkarako-com_eq_1-png
  • Math.log2(number);
    icompile-eladkarako-com_eq_2-png
  • Math.log2(number) + Math.log2(number);
    icompile-eladkarako-com_eq_3-png
  • Math.log10(number) * Math.log10(number);
    icompile-eladkarako-com_eq_4-png
  • Math.log10(number) % Math.log2(number);
    icompile-eladkarako-com_eq_5-png

try the next version yourself (also, you can right click it to see the source-code, or paste it in bin.eladkarako.com for quick variations fun :] )

Leave a Reply