<head>
<meta endcoding="windows-1751" />
<style type="text/css">
body {
margin:0px;
padding:0px;
}
.sel {
position:absolute;
background-color:rgba(0, 30, 150, 0.3);
border:1px solid rgba(30, 150, 0, 0.4);
}
</style>
<script type="text/javascript">
var ctx2;
var img1=new Image();
img1.onload=function(){ var ctx = document.getElementById("cnv").getContext('2d');
ctx.drawImage(img1,0,0,400,300);
};
img1.src='http://javascript.ru/files/u20687/7.jpg';
function selection(elem, drags) {
if ((typeof elem != "object") || (typeof drags != "object") || (((drags + "") != "[object HTMLDivElement]") && ((drags + "") != "[object]"))) {
console.log('selection error');
return;
};
drags.style.display = "none";
elem.onmousedown = function (e) {
drags.style.display = "block";
var e = e || window.event;
selection.x = e.clientX;
selection.y = e.clientY;
drags.style.left = selection.x;
drags.style.top = selection.y;
selection.drags = drags;
selection.e = e;
elem.onmousemove = function (e) {
var e = e || window.event;
if (e.clientX - selection.x > 0) {
selection.drags.style.left = selection.x;
selection.drags.style.width = e.clientX - selection.x;
} else {
selection.drags.style.left = e.clientX;
selection.drags.style.width = selection.x - e.clientX;
}
if (e.clientY - selection.y > 0) {
selection.drags.style.height = e.clientY - selection.y;
selection.drags.style.top = selection.y;
} else {
selection.drags.style.top = e.clientY;
selection.drags.style.height = selection.y - e.clientY;
}
}
}
elem.onmouseup = function () {
var cnv2 = document.getElementById("cnv2");
cnv2.setAttribute('width', drags.offsetWidth);
cnv2.setAttribute('height', drags.offsetHeight);
ctx2.drawImage(document.getElementById("cnv"), drags.offsetLeft, drags.offsetTop, drags.offsetWidth, drags.offsetHeight, 0, 0, drags.offsetWidth, drags.offsetHeight);
drags.style.display = "none";
elem.onmousemove = function () {};
drags.style.width = 0;
drags.style.height = 0;
};
};
window.onload = function () {
var sel = document.getElementById("sel");
selection(document, sel);
var ctx = document.getElementById("cnv").getContext('2d');
ctx2 = document.getElementById("cnv2").getContext('2d');
}
</script>
</head>
<body onselectstart='return false'>
<canvas id=cnv width=400 height=140 style='border:1px solid black'></canvas>
<canvas id=cnv2 width=100 height=120 style='border:1px solid black'></canvas>
<div id="sel" class="sel"></div>
</body>