захватить изображение с помощью мышиных мыши с экрана

Question

Я много искал, но не смог найти правильного решения для моего требования. Мне нужна функциональность на моем веб-сайте, где пользователь может выбрать любую область в браузере или в любом месте на рабочем столе и преобразовать выбранную область в изображение. Я знаю, что это можно сделать в форме окна, там у вас есть возможность отслеживать движения мыши и захватывать изображение с экрана. Я знаю, что если я захочу эту функциональность в сети, мне придется получать корнаты по javascript, и тогда, возможно, сделаю ajax запрос к веб-сервису и получу мое изображение.

Прежде всего, я не могу найти правильный путь в javascript, который даст мне координаты mousedown и mouseup.

Я видел в jquery Dragable и изменяемый размер div. Я хочу что-то вроде того, чтобы пользователь мог выбрать область, которая должна быть преобразована в изображение. Я даже могу получить положение мыши Origal, текущее положение мыши и размер div, используя jquery dragable и reszable div.

и во-вторых, я хочу получить совет о том, как мне выбрать выделенную область как изображение.

Пожалуйста, помогите мне.

Answer 1

Невозможно с JavaScript.Веб-страницы (намеренно!) Не способны ни отслеживать движения мыши за пределами окна браузера, ни считывать изображение с рабочего стола пользователя.

Answer 2

Во-первых, чтобы преобразовать вашу страницу в изображение, есть очень классная библиотека, которая может это сделать.Используйте холст и визуализируйте на нем полную страницу, прочитав ее

Получите код и посмотрите примеры здесь.

http://html2canvas.hertzen.com/

Как только вы получитеНа странице на холсте вы можете преобразовать ее в png и получить часть, выбрав ее.

Смотрите этот пример!http://hertzen.com/experiments/jsfeedback/examples/dusky/index.html

Нажмите на отзыв, затем выберите область на странице, затем нажмите на предварительный просмотр!Это очень близко к тому, что вы просите, но вместо этого сделайте красный прямоугольник, вы обрежете эту часть изображения.

больше примеров, таких как последний: http://hertzen.com/experiments/jsfeedback/

Забудьте захватывать что-либо за пределамибраузер.

Answer 3

Вы можете использовать clientX и clientY события, чтобы получить координаты мыши.Например:

http://jsfiddle.net/yN3S5/1/

HTML:

<p id="x" ></p>
<p id="y" ></p>

JavaScript:

document.onmousemove=function(e){
    x=document.getElementById('x');
    y=document.getElementById('y');
    x.innerHTML=e.clientX;
    y.innerHTML=e.clientY;
}

Answer 4

Вы имеете в виду нечто похожее на: http://www.screenr.com/record?