index.html
<!DOCTYPE html>
<html>
<body>
<div id="body_div">
<img id="source" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi92IoL49pecj_nJMSR_OEiKp3QGNtv6afe5WwgPbu8GZWJ6LWexqEpT-YPr8JD3OxL4nDeZVfej8X0dxPTx2J-SsdeyBcSdrEeBQHqXgpn0ROLaD3oIXWzSZgWyMER-LxKcf4QDRLPPso/s1600/icon.png" draggable="false">
<div id="canvas_div2">
</div>
<br>
X座標移動中：<input type="text" id="moveX" />
Y座標移動中：<input type="text" id="moveY" />
<br>
X座標ここから：<input type="text" id="fromX" />
Y座標ここから：<input type="text" id="fromY" />
<br>
X座標ここまで：<input type="text" id="toX" />
Y座標ここまで：<input type="text" id="toY" />
<br>
切り取る幅：<input type="text" id="cutX" />
切り取る高さ：<input type="text" id="cutY" />
</div>
<script>
/************************************
elem
************************************/
function elem(id){
return document.getElementById(id);
}
/************************************
グローバル変数
************************************/
var canvas_div2 = elem("canvas_div2");
var fromX = elem("fromX");
var fromY = elem("fromY");
var moveX = elem("moveX");
var moveY = elem("moveY");
var toX = elem("toX");
var toY = elem("toY");
var cutX = elem("cutX");
var cutY = elem("cutY");
/************************************
イベント
************************************/
document.onmousedown = on_mousedown;
document.onmouseup = on_mouseup;
document.onmousemove = on_mousemove;
/************************************
on_mousemove
************************************/
function on_mousemove(e){
//座標を取得する
var X = e.pageX; //X座標
var Y = e.pageY; //Y座標
//座標を表示する
moveX.value = X;
moveY.value = Y;
};
/************************************
on_mousedown
************************************/
function on_mousedown(e){
//座標を取得する
var X = e.pageX; //X座標
var Y = e.pageY; //Y座標
//座標を表示する
fromX.value = X;
fromY.value = Y;
};
/************************************
on_mouseup
************************************/
function on_mouseup(e){
//座標を取得する
var X = e.pageX; //X座標
var Y = e.pageY; //Y座標
//座標を表示する
toX.value = X;
toY.value = Y;
get_trimed();
}
/************************************
get_trimed
************************************/
function get_trimed(){
var X1 = parseInt(fromX.value);
var Y1 = parseInt(fromY.value);
var X2 = parseInt(toX.value);
var Y2 = parseInt(toY.value);
//逆向きからの選択に対応
var X = nomalize_position(X1, X2);
X1 = X[0];
X2 = X[1];
//逆向きからの選択に対応
var Y = nomalize_position(Y1, Y2);
Y1 = Y[0];
Y2 = Y[1];
//範囲を取得する
var X3 = Math.abs(X2 - X1);
var Y3 = Math.abs(Y2 - Y1);
//座標を表示する
cutX.value = X3;
cutY.value = Y3;
//描画する
draw_image(X1, Y1, X3, Y3);
}
/************************************
nomalize_position
上から下、左から右に選択すれば問題ないが
下から上や右から左に選択すると
起点よりも終点の方が小さくなり
範囲が正しく取得できないので
起点が終点よりも大きい場合は両者を入れ替えて
逆向きからの選択に対応する
************************************/
function nomalize_position(A, B){
if(A > B){
var A0 = A;
A = B;
B = A0;
}
var result = [A, B];
return result;
}
/************************************
draw_image
************************************/
function draw_image(X1, Y1, X3, Y3) {
var source = elem('source');
remove_child("canvas_div2");
var canvas = create_canvas();
var context = canvas.getContext('2d');
canvas.style.width = X3;
canvas.style.width = Y3;
context.drawImage(source, X1, Y1, X3, Y3, 0, 0, X3, Y3);
}
/************************************
create_canvas
************************************/
function create_canvas(){
var canvas = document.createElement("canvas");
canvas.setAttribute("id", "image_canvas");
canvas_div2.appendChild(canvas);
return canvas;
}
/************************************
remove_child
************************************/
function remove_child(id) {
var elem = document.getElementById(id);
for (var i = elem.childNodes.length - 1; i >= 0; i--) {
elem.removeChild(elem.childNodes[i]);
}
}
</script>
</body>
</html>
|
