Подтвердить что ты не робот

Запись и сохранение изображения с высоким разрешением

Есть ли какие-либо продвинутые решения для захвата рисования руки (с планшета, сенсорного экрана или устройства, подобного iPad) на веб-сайте в JavaScript и хранения его на стороне сервера?

По существу, это был бы простой холст для рисования мыши со специальностью, согласно которой его разрешение (т.е. количество движений мыши, которое он ловит в секунду) должно быть очень высоким,, в противном случае круглые линии на чертеже станет "многоугольным" при быстром перемещении пера/мыши:

enter image description here

(если бы это было не так, решение inputDraw, предложенное @Gregory, было бы на 100% безупречным.)

Он также должен иметь высокий уровень графического качества, т.е. antialias penstroke. Ничего особенного здесь, кроме стиля MS Paint, ход 1x1 пикселей не будет обрезать его.

Я считаю, что это очень интересная вещь в целом, поскольку Tablet PC становятся, по крайней мере, более распространенными. (Не то, чтобы они привлекали внимание, которое я чувствую, которого они заслуживают).

Любые предложения приветствуются. Я бы предпочел решение с открытым исходным кодом, но я также открыт для таких проприетарных решений, как элементы управления ActiveX или Java-апплеты.

FF4, поддержка Chrome - необходимость; Рекомендуется Opera, поддержка IE8/9.

Обратите внимание, что большинство библиотек "canvas" и большинство ответов на другие вопросы, похожие на мои, относятся к рисунку с программным обеспечением на холст. Это не то, что я ищу. Я ищу что-то, что записывает фактические движения пера или мыши пользователя на определенную область.

Начни с щедрости из любопытства, изменилось ли что-то в течение времени, прошедшего с момента запроса этого вопроса.

4b9b3361

ОТВЕТЫ

Ответ 1

Я сомневаюсь, что вы получите что-то более высокое разрешение, чем дает событие "onmousemove", не создавая эффективную ассемблерную программу для встроенной системы, специально созданной для этой цели. Вы запускаете внутри ОС, вы играете по правилам ОС, а это значит, что вы ограничены частотой тайм-листов, которые вам предоставит ОС. (обычно около 100 в секунду, флюксируя в зависимости от нагрузки) Я не использовал планшет, который может преодолеть проблему "многоугольник", и я использовал некоторые высокопроизводительные планшеты. Photoshop преодолевает проблему с кубической интерполяцией.

То есть, если у вас нет особого планшета, который будет захватывать многие события движения и помещать их в очередь на некоторый внутренний буфер и отправлять целый пакет координат в то время, когда он отправляет данные в ОС. Я посмотрел на планшет api, хотя, и они дают только один набор координат за раз, поэтому, если это произойдет, вам понадобится специальное оборудование, а также собственный драйвер и пользовательский apis, которые могут обрабатывать пакеты из нескольких координаты.

Или вы могли бы просто использовать проклятый тег canvas, onmousemove, event.pageX | pageY some кубическая интерполяция, "toDataURI" api холста, отправьте результат на ваш php script, а затем просто скажите вы делали все эти другие причудливые вещи.

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

Ответ 2

в мире оеккаков есть несколько апплетов: Shi painter, Chibipaint или PaintBBS. Здесь у вас есть классы php для интеграции.

Рисунки, созданные этими апплетами, могут иметь неплохое качество. Если вы зарегистрируетесь в oekakicentral.com, вы можете увидеть все галереи, а на некоторых рисунках есть анимационная ссылка, которая показывает, как она была нарисована (это зависит от апплет), поэтому вы можете сравнить возможности апплетов. Некоторые из них с открытым исходным кодом.

Изменить: см. также this, сделанный в HTML 5.

Ответ 3

Посмотрите < InputDraw/ > : компонент Flash, который превращает рисование в SVG. Затем вы можете отправить сгенерированный SVG на свой сервер.

Это бесплатно для некоммерческого использования. Согласно их сайту, цена коммерческого использования 29 €. Это не открытый источник, хотя.

ИМХО это стоит посмотреть.

В качестве альтернативы вы реализуете что-то, основанное на svg-edit, которое является открытым исходным кодом и использует jQuery (демо). Если требуется поддержка Google Frame Plugin для поддержки IE6 +.

EDIT: я нашел svg-freehand-signature проект (демонстрационная версия), которая фиксирует вашу подпись и отправляет ее на сервер в качестве SVG, используя POST. Он распространяется как прямолинейный и автономный zip (работает из коробки с Safari и Firefox, вы можете объединить его с svgweb, что поддерживает SVG в Internet Explorer).

EDIT: я успешно объединил Cesar Oliveira canvaslol (просто посмотрите на источник страницы, чтобы увидеть, как это работает) с ExplorerCanvas, чтобы иметь что-то в IE. Вы также можете посмотреть эксперимент Anne van Kesteren Paintr.