jQuery slider dynamically changing image
I am trying to use the jQuery UI slider to dynamically change the RGB values of an image. The issue that I am running into is that the slider will not slide when it is attached to my function that should change the values.
Here is my code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/base/jquery.ui.all.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="../js/ui/jquery.ui.core.js"></script>
<script src="../js/ui/jquery.ui.widget.js"></script>
<script src="../js/ui/jquery.ui.mouse.js"></script>
<script src="../js/ui/jquery.ui.slider.js"></script>>
<style>
#red, #green, #blue {
float: left;
clear: left;
width: 300px;
margin: 10px;
}
#red .ui-slider-range { background: #ef2929; }
#red .ui-slider-handle { border-color: #ef2929; }
#green .ui-slider-range { background: #8ae234; }
#green .ui-slider-handle { border-color: #8ae234; }
#blue .ui-slider-range { background: #729fcf; }
#blue .ui-slider-handle { border-color: #729fcf; }
#demo-frame > div.demo { padding: 10px !important; };
</style>
<script>
function redSwitch() {
var canvas = document.createElement('canvas');
var ctx = canvas.getctx('2d');
var photo = new Image();
photo.src = $('#pic').attr('src');
canvas.width = photo.width;
canvas.height = photo.height;
ctx.drawImage(photo, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
var val = $('#red').slider("value");
for(var y=0; y<imgPixels.height; y++)
{
for(var x=0; x<img开发者_如何学CPixels.width; x++)
{
var i = (y * 4) * imgPixels.width + x * 4;
if(imgPixels.data[i]+val > 255)
{
imgPixels.data[i] = 255;
}
else
{
imgPixels.data[i] = imgPixels.data[i]+val;
}
}
}
}
$(function() {
$( "#red").slider({
orientation: "horizontal",
range: "max",
min:-255,
max: 255,
value: 0,
slide: redSwitch,
change: redSwitch
});
$( "#green").slider({
orientation: "horizontal",
range: "max",
min:-255,
max: 255,
value: 0,
});
$( "#blue").slider({
orientation: "horizontal",
range: "max",
min:-255,
max: 255,
value: 0,
});
});
</script>
</head>
<body>
<img id="pic" src="../../images/pictures/adam/pic01.jpg" />
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
So far it should only change the red values. Once I get that working the others will be easy to finish.
I found this site that manages to do it, at least from my understanding. The only issue is that the guy uses PHP to handle a lot of the image manipulation instead of Javascript/jQuery. http://tympanus.net/codrops/2009/09/06/dynamically-changing-style-with-jquery/
Thanks for any help!
var ctx = canvas.getctx('2d');
should be
var ctx = canvas.getContext('2d');
加载中,请稍侯......
精彩评论