任意の画像のトリミングをしたいと考えています。
このときに、トリミングする始点(sx,sy)を任意の画像をクリックした座標に設定したいです。
プログラムでは、xとyをグローバル変数で宣言して、後で、event.xとevent.yをそれぞれx,yに代入して、それを始点にするように組んだのですが、(0,0)からの画像が表示されてしまいます。代入できていないようですが、何が原因なのでしょうか。
よろしくお願いします。
※訂正します
クリックしたところから始まる範囲の画像をトリミングすることはできますか?
もしくは、画像は表示できなくても良いので、その範囲の階調値を取得することはできますか?
元の画像は、モノクロ画像です。
</script>(function (){ var element = document.getElementById("aaa"); function MouseDownFunc(e){ 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);// マウスのボタンを押すと実行されるイベント }})(); onload = function() { draw();}; function draw() { var canvas = document.getElementById('c1'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); /* Imageオブジェクトを生成 */ var img = new Image(); img.src = "/sub/map.jpg?" + new Date().getTime(); /* 画像が読み込まれるのを待ってから処理を続行 */ img.onload = function() { ctx.drawImage(img, x, y, 500, 400, 80, 60, 400, 300);}}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。