Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.11.2015, 15:38
Аспирант
Отправить личное сообщение для cyber_bober Посмотреть профиль Найти все сообщения от cyber_bober
 
Регистрация: 12.12.2012
Сообщений: 80

Сделать скриншот части страницы
Привет. Делаю генератор анонсов для соц сетей. В него подгружается фоновое изображение и текст поверх. Собрал сначала через canvas, но столкнулся с проблемой сглаживания шрифта.

Шрифт выглядит очень грубо(хотя подгружал даже векторный исходник) и нет возможности настроить letter-spacing для него.

Поэтому интересно, можно ли по клику сделать скриншот определенного блока и скачать его как jpg/png? Есть ведь сервисы, которые делают скриншоты страниц. Кто что знает об этом?

Спасибо.

UPD. Видел решения с участием сервер, хочется найти решение только на клиенте.

Последний раз редактировалось cyber_bober, 08.11.2015 в 15:43.
Ответить с цитированием
  #2 (permalink)  
Старый 08.11.2015, 18:01
Аватар для EmperioAf
Профессор
Отправить личное сообщение для EmperioAf Посмотреть профиль Найти все сообщения от EmperioAf
 
Регистрация: 15.01.2015
Сообщений: 622

http://blog.ircit.ru/post/javascript...oka-stranitsy/
Ответить с цитированием
  #3 (permalink)  
Старый 09.11.2015, 08:42
Аспирант
Отправить личное сообщение для cyber_bober Посмотреть профиль Найти все сообщения от cyber_bober
 
Регистрация: 12.12.2012
Сообщений: 80

EmperioAf,
спасибо
Ответить с цитированием
  #4 (permalink)  
Старый 09.11.2015, 08:46
Аспирант
Отправить личное сообщение для cyber_bober Посмотреть профиль Найти все сообщения от cyber_bober
 
Регистрация: 12.12.2012
Сообщений: 80

Я нашел решение, если вы наткнулись на эту тему, потому что столкнулись со схожей проблемой, то я сейчас опишу что для этого нужно:
подключаете три библиотеки
html2canvas.js - переводит область в canvas
canvas-to-blob.js - переводит canvas в блоб
FileSaver.js - скачивает

function exportimage(){
      html2canvas($('#image'), {
      onrendered: function (canvas) {
      canvas.toBlob(function(blob) {
      saveAs(blob ,"image.png");
      }, "image/png");
      var img = canvas.toDataURL('image/png').replace("image/png", "image/octet-stream");
      window.location.href = img;    
      }
      });
      }
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подскажите, как сделать правильно отрисовку без перезагрузки всей страницы yiooxir Angular.js 1 24.12.2013 18:30
Как сделать все содержимое страницы не активным son313 jQuery 9 10.07.2013 16:58
как сделать что бы при открытии страницы сразу открылось большое фото oksanaweb Общие вопросы Javascript 1 05.06.2013 02:17
Обновление страницы AndreyS AJAX и COMET 6 16.05.2011 15:55
Как сделать так, чтобы JS при нажатии на кнопку не выполняла запрос со страницы. JSProgrammer Элементы интерфейса 3 18.05.2010 20:18