Обрезать содержимое документа и масштабировать обрезанную область до другого элемента div ⇐ Html

[Anonymous]

Моя цель — иметь возможность обрезать любую часть HTML-документа (изображение, белый фон) и иметь возможность масштабировать эту же обрезанную область до красного квадрата в нижней части скрипки. Это последний шаг в создании инструмента для обрезки (это всего лишь эксперимент с веб-инструментами), и сейчас мне нужен последний толчок. Кажется, я не могу решить эту проблему должным образом без использования существующих репозиториев. Я мог бы это сделать, но, в конце концов, в этом не было бы смысла пытаться. Любая помощь, идея? Не стесняйтесь редактировать скрипт

HTML






JavaScript

function getCursorPosition(e) {
e = e || window.event;
if (e) {
if (e.pageX || e.pageX == 0) return [e.pageX, e.pageY];
var dE = document.documentElement || {};
var dB = document.body || {};
if ((e.clientX || e.clientX == 0) && ((dB.scrollLeft || dB.scrollLeft == 0) || (dE.clientLeft || dE.clientLeft == 0))) return [e.clientX + (dE.scrollLeft || dB.scrollLeft || 0) - (dE.clientLeft || 0), e.clientY + (dE.scrollTop || dB.scrollTop || 0) - (dE.clientTop || 0)];
}
return null;
}

function mousedown(e) {
var mxy = getCursorPosition(e);
var box = document.getElementById("selection_box");
box.orig_x = mxy[0];
box.orig_y = mxy[1];
box.style.left = mxy[0] + "px";
box.style.top = mxy[1] + "px";
box.style.display = "block";
document.onmousemove = mousemove;
document.onmouseup = mouseup;
}

function mousemove(e) {
var mxy = getCursorPosition(e);
var box = document.getElementById("selection_box");
box.style.width = (mxy[0] - box.orig_x) + "px";
box.style.height = (mxy[1] - box.orig_y) + "px";
}

function mouseup(e) {
var mxy = getCursorPosition(e),
box = document.getElementById("selection_box"),
image_box = document.getElementById("image_box"),
selection = getSelection;
box.style.display = "none";
box.style.width = "0";
box.style.height = "0";
document.onmousemove = function () {};
document.onmouseup = function () {};
}

document.onmousedown = mousedown;


CSS

* {
-moz-user-select: none;
-webkit-user-select: none;
}
#selection_box {
-webkit-animation: blackwhite 3s infinite;
display: none;
position: absolute;
border: 1px dashed #000000;
background: transparent;
width: 0;
height: 0;
z-index: 1;
}
@-webkit-keyframes blackwhite {
40% {
border-color:white;
}
100% {
border-color:black;
}
}
#image_box {
position: absolute;
top: 75px;
width: 700px;
height: 370px;
}
#captured_box {
position: absolute;
top: 500px;
left: 100px;
width: 100px;
height: 100px;
background-color: red;
}


Подробнее здесь: https://stackoverflow.com/questions/186 ... nother-div