Skip to content

Instantly share code, notes, and snippets.

@danieltroger

danieltroger/script.js

Created June 10, 2016 16:57
Show Gist options
  • Save danieltroger/e74979848bddafa148668e3ee58942bb to your computer and use it in GitHub Desktop.
Save danieltroger/e74979848bddafa148668e3ee58942bb to your computer and use it in GitHub Desktop.
Download ZIP
some image manipulation page for `homepage` with two sliders and I don't get what their effect really is
Raw
script.js
<?php
function page()
{
?>
<head>
<?php
hsheets();
?>
</head>
<body><?php bsheets(); ?>
<img style="display: none;" src="<?php echo dataurl("../sn.jpg"); ?>" style="display:none;">
<canvas>
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.querySelector("canvas"),
img = document.querySelector("img"),
ctx = c.getContext("2d");
c.width = img.width;
c.height = img.height;
ctx.drawImage(img,0,0);
var image = ctx.getImageData(0, 0, 1280, 720),
imageData = image.data;
length = imageData.length;
/*for(var i=0; i < length; i+=4){
var x = (+(imageData[i+1]*2)+imageData[i+2])/4;
imageData[i] = x;
imageData[i+1] = x;
imageData[i+2] = x;
}
image.data = imageData;
ctx.putImageData(image, 0, 0);*/
var origData = imageData.slice();
function con(x)
{
window.val = parseInt($("#s"+x)[0].value);
for(var i=0; i < length; i+=4){
var t1 = origData[i];
imageData[i] = fc(t1,x);
imageData[i+1] = fc(origData[i+1],x);
imageData[i+2] = fc(origData[i+2],x);
}
image.data = imageData;
ctx.putImageData(image, 0, 0);
}
function fc(x,y)
{
return y == 1 ? x+(val-255) : x*((val/500)+0.2);
}
$(window).on("load",function(){
$("#s1").on("mousemove",function(){con(1)});
$("#s2").on("mousemove",function(){con(2)});
});
</script>
<br />
<input type="range" id="s1" style="width: 90%;" min="0" max="510" step="1" />
<br />
<input type="range" id="s2" style="width: 90%;" min="0" max="2000" step="1" />
</body>
<?php
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment