Мысли о скриншотах через JavaScript

[trilodi]

А как же быть с IE? Ведь вероятность появления ошибки (я про верстку в частности) в нем на много больше чем в других браузерах.

[jrip]

Ну это всего лишь мысли о возможности создания как таковых скриншотов таким образом :)
Сопутствующих проблем там много, начиная от того что JavaScript мог поломаться вообще весь и это не будет работать вообще, заканчивая тем что иногда даже в хроме скриншот не полностью соотвествует странице. Т.е. это все нужно допиливать.

[BACRHR]

Ну вроде на сайте написано
Browser compatibility
The script should work fine on the following browsers:

• Firefox 3.5+
• Google Chrome
• Newer versions of Opera
• >=IE9 (Older versions compatible with the use of flashcanvas)

[trilodi]

>=IE9 (Older versions compatible with the use of flashcanvas)
а как быть с <

[BACRHR]

как бы тоже написано use flashcanvas

[jrip]

Ну вроде через flashcanvas можно, сам я не пробовал сейчас нету таких браузеров под рукой.

[fleshy]

Закопать. Или FF

[fleshy]

FIX: или FF < 3.5 вы тоже поддерживаете?

[trilodi]

А людей исользующих ie<9 тоже закопать? я понимаю можно как то забить на 6 но на 7 и 8 еще немного рановато забивать

[jrip]

Ну все зависит от сферы применения, к примеру если пишется какая-нибудь интранет система для конкретной компании, то там обычно можно договорится о использовании только о новых браузерах. Причем заказчики в 99% случаев не против т.к. html5+css3 дают намного больше возможностей для красивостей и т.д.

[samdroid]

А если это для интранет системы более-менее крупной компании, то там IE7-IE8 очень даже корпоративный стандарт :(

[NightGhost]

Корпоративный стандарт устанавливает компания. Если для работы юзерам надо держать последний фф — то они будут его держать. Им по большому счету все-равно, какой у них там браузер открыт, лишь бы работало.

[jrip]

Да и на практике если со стороны разработчика сам разработчик или просто грамотный менеджер, а стороны заказчика вменяемый человек, то всегда можно объяснить что лучше и почему. На моей памяти всякие «корпоративные стандарты IE 5.5+» прописывались ничего не понимающими менеджерами тупо по шаблону.

[samdroid]

У нас сейчас клиент — довольно крупный банк, так там корпоративный стандарт IE7 и никуда не попрешь :( И под нас они ничего менять не будут, поскольку обновить 3-4 тыс компов — не реально, + безопасность запрещает ставить что-то еще.

[mavrin]

Пробовал эту библиотеку, но сделать совместимой ее с IE<9, так и не вышло(сохранять картинки), так как в flashcanvas не очень хорошо работает метод canvas.toDataURL. Но я думаю если повозиться, то можно было все-таки закостылить. Мне тогда повезло, заказчик согласился не делать функционал для IE<9.

[kirilloid]

А js-ный excanvas умеет toDataURL?

[mavrin]

Не понял вашего вопроса, но если вы спрашиваете про стандартный объект canvas, то да, есть метод toDataURL. Вот здесь developer.mozilla.org/en/DOM/HTMLCanvasElement, можно почитать какие есть методы.

[kirilloid]

[sarcasm]Ой, спасибо! Как же я без вас нашёл бы MDN?[sarcasm]
Я про альтернативу flashcanvas: code.google.com/p/explorercanvas/

[jrip]

Если посмотреть в пример разработчиков: html2canvas.hertzen.com/screenshots.html
То там будет ранняя версия этой штуки, там они пытаются использоваться flashcanvas.
Но судя по тому что в IE 8 оно не работает, нужно как минимум все допиливать.

[mavrin]

Я же говорю не понял вашего вопроса.) Да рассматривал вариант code.google.com/p/explorercanvas/. Но он не имеет этого метода, он вообщем делает прорисовку используя объект VML, который я как понимаю нельзя сохранить в картинку.

[mpetrunin]

Вот бы возможность сделать снимок экрана (пусть, с задержкой) любого окна на компьютере…

[Mithgol]

Вот эту конструкцию:

$(document).ready(function(){
…
});

можно значительно упростить:

$(function(){
…
});

Это экономит время при наборе кода и даже при чтении, хотя, казалось бы, .ready() красноречивее.

[trueneutral]

Да вы, батенька,
— во-первых, капитаните, поскольку любой человек, имевший дело с jquery, в курсе;
— во-вторых, ерничаете, поскольку конструкция нисколько не упрощается (тем более значительно);
— а в третьих, еще и неправы — ведь незнакомому с фреймворком человеку document.ready понятнее, чем какой-то значок доллара.

[youlose]

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

[trueneutral]

Ммм, по первому пункту не соглашусь. Знать и использовать — все же разные вещи, правильно? :) Автор ниже отписался, что написание через .ready — сугубо дело привычки.
По второму — лично мне тоже удобнее написать $(function() {}), но называть такой вид «значительным упрощением» некорректно, что я и указал.

[Doggy]

>> 3. ...(тем более можно написать комментарий для таких людей, это будет правильнее)…

Например такой? :)

// $(callback) = $(document).ready(callback)
$(function(){
…
});

[jrip]

На красивость и правильность кода я тут не претендую :)
Хотя как-то привык писать через .ready
Впрочем если быть совсем точным то и ".live('click'," тут совершенно ни к чему, можно через .bind

[egorinsk]

Только нафига тут jQuery?

[jrip]

В принципе можно и без него конечно, просто я его привык уже повсеместно использовать.

[jrip]

Я это к тому что сам бы даже не додумался что такое можно сделать, а вот разработчики html2canvas сильно крутые ребята :)

[mariofag]

Выполняй невыполнимое, допускай недопустимое,
ROW ROW FIGHT DA POWAH!

[zim32]

Как они это реализовали не пойму… Ребята мегамозги какие-то

[HeadFore]

Они используют очевидное решение в лоб: перебрать все элементы в DOM и отрисовать их на canvas.

[zim32]

Я то понимаю. Просто как? Ну нашел я DIV. Ну знаю я все его CSS. Например что у него background там картинка например и box-shadow. А дальше что? Я должен вытянуть картинку, отрисовать, потом тени отрисовать и т.д. Т.е. это по сути CSS => Canvas конвертер получается

[HeadFore]

Но ребята молодцы, безусловно, работы много проделано.

[shifty]

Посмотрите и на markup.io

[FFF]

У меня в Опере не заработало, показывает белый экран вместо скриншота. Хотя идея хорошая.

[shifty]

Да, «замаркапить» страницу в последней опере не получилось, но линки работают http://markup.io/v/gqfyyfnrzxxq

[kashey]

Не забываем что наличие в на странице любой картинки с другого origin и без особого разрешения — просто выключит этот скрипт.
В общем нельзя сканы чужих документов себе на сервер слать.

[Dmitry_f]

Вообще стандарт предусматривает значение element() в качестве css-значения фона (см. тут). Так что есть надежда, что когда-то делать скриншоты станет очень просто, но пока никто это значение не поддерживает.
Это бы позволило реализовать, к примеру, фотошоп в вебе: превьюхи каждого слоя.

[Alexufo]

Ютуб, любое сообщение об ошибке разработчикам не обходится без скриншотирования зоны с ошибкой.

[Alexufo]

ах. ссылка не простая. Я про это на ютубе:

клево сделано

[jrip]

Раньше не обращал внимания, надо будет поковырять.

[InteractiveTechnology]

Требуется один из следующих браузеров.
Google Chrome.
Firefox 3.5 или выше.
Internet Explorer 7 или выше (с Adobe Flash 9 или выше).

Опера не поддерживается или забыли написать

[TheShock]

setTimeout("makeIT()", 1000)

Ну зачем передавать строку, скажите? ЗАЧЕМ?

setTimeout(makeIT, 1000)

[jrip]

У себя я немного переписал html2canvas у меня там нормальные колбеки, а тут как пример показать, даже особо не задумывался. На самом деле на практике тут setTimeout вообще использовать нельзя, т.к. время отрисовки канваса бывает иногда очень большим.

[Severus]

Можно пример в студию?
Очень интересно посмотреть.

[jrip]

Пока как таковой пример стыдно показывать :) Я сейчас пытаюсь его допилить, т.к. конкретно в моих проектах оно делает не совсем правильные скриншоты. Но как допилю так скорее всего выложу в паблик.

[djem]

Пару лет назад, была необходимость создавать скриншоты при сообщении о багах для одной довольно навороченной «интранеты». В итоге сошлись на использовании Java апплета с new Robot ();

Полная кроссбраузерность. Но для обычных сайтов этот метод не подойдёт. Мало кто из посетителей решится отправить снимок всего экрана (не только браузера) куда-то.

[Suor]

Вообще-то, много кто, проблема в том, что многие не умеют делать скриншоты

[RomanNikitin]

Не всегда прокатит.
А если что-то куда-то поехало именно у клиента? Притом вдруг повлиять мог какой-нибудь неизвестный плагин в браузере.

В общем snapshot у вас-то как раз и так есть — исходники :) Проблемы же чаще всего из-за экзотического оборудования клиентов.

[UshkiNaMakushke]

а можно ли в html2canvas задавать координаты откуда делать скриншот?