Добрый день, уважаемые хаброжители!
На днях мы с командой в нашей студии столкнулись с очень трудной проблемой. Нам надо было конвертировать html2png, причем средствами PHP. Мне очень не хватало подобной статьи, поэтому и возникло большое желание поделиться этой информацией с обществом.
Первое, что мы начали делать – это обратились к image processiong в php. Вариантов было всего два – использовать Imagik или GD. Это два расширения для работы с изображениями в PHP. С Imagik, возможно, полноценно работать только на Linux. С GD – необходимые нам функции могли работать только на Windows. В случае с Imagik можно сделать вот таким образом, конвертировать html2pdf, а после этого pdf2png. Довольно таки, не удобно, согласитесь. А еще становилось не удобнее, когда после этого верстка выглядела примерно, как моя прическа по утрам или после суточного кодинга. В случае с GD, в этой библиотеки присутствуют две функции, которые беспощадно грабят скрин экрана вашего монитора или приложения — imagegrabwindow(), imagegrabscreen(), ну ясень пень, что они все это делают только на стороне сервера, если вы разрешите Apache взаимодействовать с Desktop. Все эти решения оказались не очень удобными для нашей задачи. На понимание того, что все эти расширения нам не подходят, для решения наших проблем было потрачено двое суток – мы начали искать другой путь решения проблемы.
И тогда, после этого, в момент печали и отчаянья, что мне никто не может помочь, а могут помочь, только фрилансеры, которым, я был готов отдать $80 за решение этой проблемы, а им была необходима предоплата в $40(Прям я им так быстро дал эту предоплату), мне помог мой знакомый PHP прогер Alexey Khaydukov. Он мне сказал, почему бы тебе не конвертировать canvas2png, там есть такая встроенная возможность. Хм… Почему бы и нет. Спасибо, Алексей. И начал искать решение. Оказывается оно было неоднократно у меня перед носом. Это очень просто, в canvas есть такая функция canvas.toDataURL(«image/png»); Где canvas – это ваш канвас. toDataURL(«image/png»); вобьет в URL вашу фотку, FireFox может даже это сделать для jpeg.
Как конвертировать canvas в png мы узнали, а если мы захотим html в canvas. А здесь у вас могут возникнуть трудности. Дело в том, что в canvas нет такой возможности, как прорисовка DOM. Для этого Open Source спешит на помощь. Вот по этой ссылке вы можете найти замечательную библиотеку js html2canvas, которая, как я понял, просто считывает DOM и рендерит(рисует) все это на канвасе средствами canvas.
Давайте опишу, немного, как это все делается. Сначала вам необходимо будет подключить библиотеку html2canvas.js. Которую, если вы еще не нашли, можете загрузить по этой прямой ссылке html2canvas.js. Использовать эту библиотеку вообще проще не куда. Для того, чтобы конвертировать html2canvas, достаточно вызвать одну функцию.
Где parameter – это id элемента, который надо отрисовать, а следующий параметр вызывает функцию, который рисует канвас, потом создает его, где надо. Объект mess – указывает id элемента на котором надо отрисовать все это дело. Ниже я приведу пример, как выполнить такие операции, конвертировать html2canvas, canvas2png и на выходе, загрузить картинку. Как этим потом пользоваться – зависит от вашей фантазии. Мы же смогли сделать генератор фейковых переписок в iPhone 5. Ну и конечно, считывание не идеально, вместо кнопок, лучше подставлять картинки, вместо сложных стилей, лучше будет тоже картинка.
Загрузить пример
Смотреть пример онлайн
Эта функция еще может отрисовывать на канвасе заданную область веб страницы, больше информации вы можете найти в документации библиотеки html2canvas.
Всем спасибо за внимание, надеюсь, моя статья будет кому-то полезной, мне такой недавно не хватало.
На днях мы с командой в нашей студии столкнулись с очень трудной проблемой. Нам надо было конвертировать html2png, причем средствами PHP. Мне очень не хватало подобной статьи, поэтому и возникло большое желание поделиться этой информацией с обществом.
Первое, что мы начали делать – это обратились к image processiong в php. Вариантов было всего два – использовать Imagik или GD. Это два расширения для работы с изображениями в PHP. С Imagik, возможно, полноценно работать только на Linux. С GD – необходимые нам функции могли работать только на Windows. В случае с Imagik можно сделать вот таким образом, конвертировать html2pdf, а после этого pdf2png. Довольно таки, не удобно, согласитесь. А еще становилось не удобнее, когда после этого верстка выглядела примерно, как моя прическа по утрам или после суточного кодинга. В случае с GD, в этой библиотеки присутствуют две функции, которые беспощадно грабят скрин экрана вашего монитора или приложения — imagegrabwindow(), imagegrabscreen(), ну ясень пень, что они все это делают только на стороне сервера, если вы разрешите Apache взаимодействовать с Desktop. Все эти решения оказались не очень удобными для нашей задачи. На понимание того, что все эти расширения нам не подходят, для решения наших проблем было потрачено двое суток – мы начали искать другой путь решения проблемы.
И тогда, после этого, в момент печали и отчаянья, что мне никто не может помочь, а могут помочь, только фрилансеры, которым, я был готов отдать $80 за решение этой проблемы, а им была необходима предоплата в $40(Прям я им так быстро дал эту предоплату), мне помог мой знакомый PHP прогер Alexey Khaydukov. Он мне сказал, почему бы тебе не конвертировать canvas2png, там есть такая встроенная возможность. Хм… Почему бы и нет. Спасибо, Алексей. И начал искать решение. Оказывается оно было неоднократно у меня перед носом. Это очень просто, в canvas есть такая функция canvas.toDataURL(«image/png»); Где canvas – это ваш канвас. toDataURL(«image/png»); вобьет в URL вашу фотку, FireFox может даже это сделать для jpeg.
Как конвертировать canvas в png мы узнали, а если мы захотим html в canvas. А здесь у вас могут возникнуть трудности. Дело в том, что в canvas нет такой возможности, как прорисовка DOM. Для этого Open Source спешит на помощь. Вот по этой ссылке вы можете найти замечательную библиотеку js html2canvas, которая, как я понял, просто считывает DOM и рендерит(рисует) все это на канвасе средствами canvas.
Давайте опишу, немного, как это все делается. Сначала вам необходимо будет подключить библиотеку html2canvas.js. Которую, если вы еще не нашли, можете загрузить по этой прямой ссылке html2canvas.js. Использовать эту библиотеку вообще проще не куда. Для того, чтобы конвертировать html2canvas, достаточно вызвать одну функцию.
html2canvas(parameter, {
onrendered: function(canvas) {
mess.appendChild(canvas);
}
});
Где parameter – это id элемента, который надо отрисовать, а следующий параметр вызывает функцию, который рисует канвас, потом создает его, где надо. Объект mess – указывает id элемента на котором надо отрисовать все это дело. Ниже я приведу пример, как выполнить такие операции, конвертировать html2canvas, canvas2png и на выходе, загрузить картинку. Как этим потом пользоваться – зависит от вашей фантазии. Мы же смогли сделать генератор фейковых переписок в iPhone 5. Ну и конечно, считывание не идеально, вместо кнопок, лучше подставлять картинки, вместо сложных стилей, лучше будет тоже картинка.
Загрузить пример
Смотреть пример онлайн
Эта функция еще может отрисовывать на канвасе заданную область веб страницы, больше информации вы можете найти в документации библиотеки html2canvas.
Всем спасибо за внимание, надеюсь, моя статья будет кому-то полезной, мне такой недавно не хватало.