diff options
| author | Julie Lala <jules@okfoc.us> | 2013-12-10 00:47:36 -0500 |
|---|---|---|
| committer | Julie Lala <jules@okfoc.us> | 2013-12-10 00:47:36 -0500 |
| commit | 037a0ae8072217f7821549bbdfe030e73289330d (patch) | |
| tree | b2e20cff097a44e08cd8e6609e7d5a00b732d88c /threshold.html | |
dither stuff
Diffstat (limited to 'threshold.html')
| -rw-r--r-- | threshold.html | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/threshold.html b/threshold.html new file mode 100644 index 0000000..f3cdc76 --- /dev/null +++ b/threshold.html @@ -0,0 +1,46 @@ +<!doctype html> +<html> +<head> +<title>Threshold</title> +</head> +<body> +<div> +threshold <input type="range" min="0" max="1" step="0.01" value="0.5" id="threshold"> +</div> +<div id="images"></div> +</body> +<script type="text/javascript" src="canvasquery.js"></script> +<script type="text/javascript" src="canvasquery.dither.js"></script> +<script type="text/javascript"> +var urls = ["abyss.png","building.png","gradient.jpg"] +var imgs = [] +var complete = 0 +urls.forEach(function(src){ + var img = new Image () + img.onload = ready + img.src = src + imgs.push(img) + if (img.complete) ready() +}) +function ready(){ + complete += 1 + if (complete < imgs.length) return; + document.getElementById("threshold").onchange = build + build() +} +function build(){ + document.getElementById("images").innerHTML = "" + imgs.forEach(dither) +} +function dither(img){ + var w = img.naturalWidth, h = img.naturalHeight; + var cc = cq(w, h) + var thresh = parseFloat(document.getElementById("threshold").value) + console.log(thresh) + cc.drawImage(img, 0, 0, w, h); + cc.threshold( thresh ) + cc.appendTo("#images") +} +</script> +</html> + |