canvas内をトリミング

canvasに描画したイメージで、クリックした座標からトリミングして、別のcanvasに描画しようと思います。
いろいろ試したのですが、なかなか上手く作動しないです。何か良い方法などがあれば教えてください。
参考になるURLなどがあれば記載してください。
以下に、現在のプログラムを記載しておきます。

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE HTML> <html> <head> <title>sub</title> <script>

"use strict";
function run() {
//"c1"から要素を取得する
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
//Imageオブジェクトを生成
var img = new Image();
//元になる画像
img.src = "/sub/first.jpg";
//画像が読み込まれるのを待ってから処理を続行
img.onload = function() {
//img.srcの指定座標を表示
ctx.drawImage(img, 0,0);
// 元になる画像を取得
var input = ctx.getImageData(0, 0, img.width, img.height);
// 出力先の画像の入れ物
var output = ctx.createImageData(img.width, img.height);
// 元画像を白黒化して出力先画像へ入れる
var inputData = input.data;
var outputData = output.data;
for (var y = 0; y < canvas.height; y += 1) {
for (var x = 0; x < canvas.width; x += 1) {
var i = (y* canvas.width + x)*4;
var p = (inputData[i] + inputData[i+1] + inputData[i+2])/3;
outputData[i] = p;
outputData[i+1] = p;
outputData[i+2] = p;
outputData[i + 3] = inputData[i+3]; // alpha
}
}
// 操作後にイメージを描画する
ctx.putImageData(output, 0, 0);
}
onclick = function() {
draw();};
function draw() {
//"c1"から要素を取得する
var canvas = document.getElementById('c2');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx1 = canvas.getContext('2d');
//Imageオブジェクトを生成
var img = new Image();
//元になる画像
img.src = "output";
//画像が読み込まれるのを待ってから処理を続行
img.onload = function() {
//img.srcの指定座標を表示
ctx1.drawImage(img, x, y, 500, 300, 80, 60, 300, 200);}}
}

(function (){
//elementをid="c1"に設定
var element = document.getElementById("c1");
//マウスを押すたびに実行される関数
function MouseDownFunc(event){
    //右ボタンのみ反応
    if(event.button == 0){
	console.log(event.x,event.y);
	x=event.x;
	y=event.y;
}}
// イベントリスナーに対応している
if(element.addEventListener){
    // マウスのボタンを押すと実行されるイベント
	element.addEventListener("mousedown" , MouseDownFunc);
// アタッチイベントに対応している
}else if(element.attachEvent){
    // マウスのボタンを押すと実行されるイベント
	element.attachEvent("onmousedown" , MouseDownFunc);
}})();

</script> </head> <body onload="run()"> <canvas id="c1" width="1200" height="1000"></canvas> </body> </html>

行動規範の内容に同意します

回答1件

まず head タグ内の script タグで document.getElementById("c1") がありますがそのコードが実行されるタイミングでは c1 が作られていないのでエラーが出ているはずです
即時関数も run の中にいれればよいです

次に

javascript
1//右ボタンのみ反応 
2if(event.button == 0){

とありますが event.button が 0 は右じゃなくて左クリックです

また strict モードにしているので

javascript
1x=event.x; 
2y=event.y;

でグローバルに x, y は定義できずエラーです
strict モードが良いなら先にグローバルに x と y を定義しておくか window.x = で代入します

あと出力先の c2 の canvas タグが抜けていますね

これだけ直すととりあえずそれっぽい画像が表示されるようになりました
F12 で表示される開発者ツールでエラーが見れるのでひとつずつエラーを解消していくと良いと思います

補足として event.x や event.y は Firefox では使えません
clientX や clientY にしたほうが良いと思います
ですが用途を考えると clientX 系より offsetX 系の方が良いかもです
offset だと canvas の左上からの座標になります

投稿2016/03/18 18:04