<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;
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.pageX;
selection.y = e.pageY;
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.pageX - selection.x > 0) {
selection.drags.style.left = selection.x;
selection.drags.style.width = e.pageX - selection.x;
} else {
selection.drags.style.left = e.pageX;
selection.drags.style.width = selection.x - e.pageX;
}
if (e.pageY - selection.y > 0) {
selection.drags.style.height = e.pageY - selection.y;
selection.drags.style.top = selection.y;
} else {
selection.drags.style.top = e.pageY;
selection.drags.style.height = selection.y - e.pageY;
}
}
}
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');
img = new Image();
img.src = "http://www.parkhotelbrasilia.com/sites/default/files/lavorazione_vetro_murano.jpg";
img.onload = function () {
document.getElementById("cnv").width = img.width;
document.getElementById("cnv").height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
}
}
</script>
</head>
<body onselectstart='return false'>
<canvas id=cnv width=300 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>
как вариант
Маленький эффект
P.S. код говнецо, но я не гнался за производительностью