0
jQuery UIスライダを使用して画像のRGB値を動的に変更しようとしています。私が実行している問題は、値を変更する必要のある関数にスライダが接続されてもスライダがスライドしないということです。ここでjQueryスライダ動的に画像を変更する
は、これまでの私のコードです：
<!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<imgPixels.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>
これまでのところ、それが唯一の赤の値を変更する必要があります。私はそれが働くようになると、他の人は仕上げが簡単になります。
少なくとも私の理解から、このサイトはそれを管理していました。唯一の問題は、Javascript/jQueryの代わりにPHPを使用して多くの画像操作を処理することです。 http://tympanus.net/codrops/2009/09/06/dynamically-changing-style-with-jquery/
ありがとうございました！