スタートページ＞ Javascript＞ CANVAS

ＣＡＮＶＡＳピクセル領域の保存・読込

参照：canvas基本(1)

例１：特定図形のやり直し　実行

• ここまでに格子状の画面（背景）が表示されています。
  これをピクセルデータとして保存します。
• 赤直線を表示したのですが、それを消したいのです。
  ピクセルデータを画面表示して背景画面に戻します。
• 改めて青直線を表示します。

これを工夫すれば、アニメーションが作れるが、
あまりにも時間がかかるので、ごく小さな画面に限ります。

function rei1() {
    // CANVAS の設定
    var canvas = document.getElementById('canvas1');
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0,0, 200,200);
    // 背景（格子）の表示
    for (var i=0; i<=200; i=i+20) {
        ctx.beginPath();
        ctx.moveTo(i, 0);
        ctx.lineTo(i, 200);
        ctx.closePath();
        ctx.stroke();
    }
    for (var i=0; i<=200; i=i+20) {
        ctx.beginPath();
        ctx.moveTo(0, i);
        ctx.lineTo(200, i);
        ctx.closePath();
        ctx.stroke();
    }
    // ここまでの画像をピクセルimageDataに保存する
    var imageData = ctx.getImageData(0,0, 200,200);
    // 赤直線（消される図形）を表示する
    ctx.beginPath();
    ctx.moveTo(20, 20);
    ctx.lineTo(180, 100);
    ctx.closePath();
    ctx.strokeStyle = "red";
    ctx.lineWidth = 10;
    ctx.stroke();
    // ピクセルで保存した画像を復元する（赤線が消える）
    ctx.putImageData(imageData, 0, 0);
    // 青直線（新図形）を表示する
    ctx.beginPath();
    ctx.moveTo(40, 160);
    ctx.lineTo(160, 40);
    ctx.closePath();
    ctx.strokeStyle = "blue";
    ctx.lineWidth = 10;
    ctx.stroke();
}

例２：指定領域の保存・変更・読込　実行

• 全体が青、左上が赤の図形があります。これを「元図形」があります。
• 白で囲んだ領域を「色変更領域」とします。
• ここでは、色変更領域のピクセルを補色に変更して、元図形の上にかぶせます。

function rei2() {
    // CANVAS の設定
    var canvas = document.getElementById('canvas2');
    var ctx = canvas.getContext('2d');
    // 元図形の表示
    ctx.fillStyle = "blue";
    ctx.fillRect(0,0,200,200);
    ctx.fillStyle = "red";
    ctx.fillRect(0,0,100,100);
    // 色変更の領域をimageData に取得
    var imageData = ctx.getImageData(50,50, 100,100);
    // 色変更のためのワーク用配列
    var data = imageData.data;
    // 色の変更　　色の強さ逆転（補色）
    for (var i = 0; i < data.length; i += 4) {
        data[i]     = 255 - data[i];     // red
        data[i + 1] = 255 - data[i + 1]; // green
        data[i + 2] = 255 - data[i + 2]; // blue
    }
    // 色変更の領域を表示
    ctx.putImageData(imageData, 50, 50); // imageDataにすること
}

例３：写真の加工
　　ネガ　実行
　　グレースケール　実行
　　セピア　実行

function rei3(ptn) {
    // CANVAS の設定
    var canvas = document.getElementById('canvas3');
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0,0, 200,200);
    // 原画の読込み
    var img = new Image();
    img.src = 'image/200x200.jpg';
    // 読み込んだ後の処理
    img.onload = function() {
	ctx.drawImage(img, 0, 0);
        // 原画をピクセルデータ imageData に保存
        var imageData = ctx.getImageData(0,0, 200,200);
        // 各ピクセルの色の変更
	var data = imageData.data;
        if (ptn == "nega") { // ネガ
	    for (var i = 0; i < data.length; i += 4) {
		data[i]     = 255 - data[i];     // red
		data[i + 1] = 255 - data[i + 1]; // green
		data[i + 2] = 255 - data[i + 2]; // blue
	    }
        }
        else if (ptn == "gray") { // グレースケール
	    for (var i = 0; i < data.length; i += 4) {
		var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
		data[i]     = avg; // red
		data[i + 1] = avg; // green
		data[i + 2] = avg; // blue
	    }
        }
        else if (ptn == "sepia") { // セピア
	    for (var i = 0; i < data.length; i += 4) {
                var red = data[i], green = data[i + 1], blue = data[i + 2];
		data[i] = Math.min(Math.round(0.393 * red + 0.769 * green + 0.189 * blue), 255);
		data[i + 1] = Math.min(Math.round(0.349 * red + 0.686 * green + 0.168 * blue), 255);
		data[i + 2] = Math.min(Math.round(0.272 * red + 0.534 * green + 0.131 * blue), 255);
	    }
        }
        // ネガ画像の表示
	ctx.putImageData(imageData, 0, 0);
    }
}