javascriptのcanvasについて
先日こちらで質問させて頂き、頂いた回答をもとに
javascriptのcanvasについて勉強を続けていて、
canvasを2つ重ねたカラーシミュレーションのようなものを作りたいと考えています。
先日教えて頂いた内容をもとに
下記のような記述で2枚目のcanvasの画像を入れ替えることや、
色を変更することは出来ました。
ただ、「進む」ボタンや「戻る」ボタンを押したときに
色がもとの色に戻ってしまうので、色は固定されたまま（この記述でいうと茶色や赤）で
画像を入れ替える方法がわからずにいます。
なにか良い方法はないでしょうか。
<style type="text/css">
.canvas001 {
position: absolute;
top:100px;
left:0px;
}
.canvas002{
position: absolute;
top:100px;
left:0px;
}
</style>
<script>
onload = function() {
image1();
image2();
image3();};
function image1() {
var cnvs = document.getElementById('canvas1');
var ctx = cnvs.getContext('2d');
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = "face.png";
};
function image2() {
var cnvs = document.getElementById('canvas2');
var ctx = cnvs.getContext('2d');
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = "hair1.png";
};
var src = [
'hair1.png',
'hair2.png',
'hair3.png'
];
var currentIndex = 0;
var currentImage;
function hair(){
var img = currentImage = new Image();
img.onload = function() {
if(currentImage === img){
var cnvs = document.getElementById('canvas2');
var ctx = cnvs.getContext('2d');
ctx.clearRect(0, 0, cnvs.offsetWidth, cnvs.offsetHeight);
ctx.drawImage(img, 0, 0);
}
};
img.src = src[currentIndex];
}
window.back = function(){
currentIndex = (currentIndex - 1 + src.length) % src.length;
hair();
}
window.foward = function(){
currentIndex = (currentIndex + 1) % src.length;
hair();
}
function black(){
var ctx = document.getElementById("canvas2").getContext("2d");
var imagedata = ctx.getImageData(0,0,300,300);
var idata = imagedata.data;
var num = idata.length;
var pix = num / 4;
for ( var i = 0 ; i < pix ; i++ ){
var r = idata[ i*4 ];
var g = idata[ i*4 + 1 ];
var b = idata[ i*4 + 2 ];
idata[ i*4 ] = 35;
idata[ i*4 + 1 ] = 24;
idata[ i*4 + 2 ] = 21;
}
ctx.putImageData(imagedata,0,0);
}
function brown(){
var ctx = document.getElementById("canvas2").getContext("2d");
var imagedata = ctx.getImageData(0,0,300,300);
var idata = imagedata.data;
var num = idata.length;
var pix = num / 4;
for ( var i = 0 ; i < pix ; i++ ){
var r = idata[ i*4 ];
var g = idata[ i*4 + 1 ];
var b = idata[ i*4 + 2 ];
idata[ i*4 ] = 140;
idata[ i*4 + 1 ] = 96;
idata[ i*4 + 2 ] = 37;
}
ctx.putImageData(imagedata,0,0);
}
function red(){
var ctx = document.getElementById("canvas2").getContext("2d");
var imagedata = ctx.getImageData(0,0,300,300);
var idata = imagedata.data;
var num = idata.length;
var pix = num / 4;
for ( var i = 0 ; i < pix ; i++ ){
var r = idata[ i*4 ];
var g = idata[ i*4 + 1 ];
var b = idata[ i*4 + 2 ];
idata[ i*4 ] = 182 ;
idata[ i*4 + 1 ] = 0;
idata[ i*4 + 2 ] = 5;
}
ctx.putImageData(imagedata,0,0);
}
</script>
<body>
<div>
<div class="canvas001"><canvas id="canvas1" height="300"></canvas></div>
<div class="canvas002"><canvas id="canvas2" height="300"></canvas></div>
</div>
<div>
<form><div>
<INPUT TYPE=button NAME="submit" VALUE="戻る" onClick="back()">
<INPUT TYPE=button NAME="submit" VALUE="進む" onClick="foward()">
</div></form>
</div>
<img src="btn_black.png" onclick="black()" >
<img src="btn_brown.png" onclick="brown()" >
<img src="btn_red.png" onclick="red()" >
</body>
お礼
ご回答ありがとうございます。ajaxやjavaは無知なもので、大変申し訳ありません。パラメータをperlにどのように飛ばしたらよいでしょうか。具体的な記述などがお分かりであればご教授いただけるとありがたいです。params:{の中にnameと送信する文字列を指定するような感じですが、まったく動作しないです。ちなみに、perl側でwhile(read($fileName, $buffer, 1024))の部分の$filenameに受け取ったパラメータを格納したい感じです。例えば、ファイル名としてcanvas.pngみたいなものをパラメータとして受け取って、canvas.pngが飛んで来たらアップロードするみたいなイメージです。よろしくお願いいたします。