Как сделать, чтобы скриншот экрана сохранялся в папке или отправлялся на почту?

Question

[Дмитрий]

Здравствуйте. Получается сделать, чтобы скрин отображался в боксе. Но как сделать, чтобы он сохранялся в папке или отправлялся на почту?

<a href="javascript:getScreenshot()"> Отправить</a>
<div id="box1"></div>

function getScreenshot() {
    html2canvas(document.body, {
      onrendered: function(canvas) {
      $('#box1').html("");
			$('#box1').append(canvas);    
      }
    });
}

#box1 {
  width:400px;
  height:300px;
  border-style: solid;
  border-width: 2px;
}
canvas {
    max-width: 100%;
    max-height: 100%;
}

Answer 1

[#алгоптимизируй #отботизируй]

Нужен сервис, куда отправлять base64 содержимого картинки,который сделает все остальное, прав не хватить на остальное я думаю.... ну или плагин свой ...подписался.

Сервисом может быть бэкенд вашего сайта.

Comments

[Дмитрий]

Спасибо за ответ. А можете расписать более подробно ( для тех, кто в танке ). Или может ссылку на статью, где можно подробнее почитать. Честно, мало что понял из того, что Вы сказали. Но разобраться очень хочу.

[#алгоптимизируй #отботизируй]

Для начала расскажите, на чем работает сервисная часть сайта и можно ли ее менять? Php ,python Дмитрий:

[Дмитрий]

С Sharp: Сервисной части нет. Объясню, чего хочу добиться.
Есть landing page, в котором присутствует ссылка "Получить скидку". При нажатии на нее всплывает окно, в котором находится барабан с процентной скидкой ( вот пример: studiosamurai.ru ). Посетитель крутит барабан ( Якубовичу привет ) , затем вводит email и при нажатии на кнопку отправить делается скрин и отправляется на почту ну или сохраняется в папку. Это нужно для того, чтобы понимать какой % скидки предназначен тому или иному клиенту. Может я сильно заморачиваюсь?

[#алгоптимизируй #отботизируй]

Дмитрий: Честно говоря ничего не понял Где код-то выполняется? В консоли разработчика что ли? Или код внутри страницы?

[Дмитрий]

С Sharp: Внутри страницы

[#алгоптимизируй #отботизируй]

Дмитрий: Значит есть сайт,который можно редактировать. Так сервисная часть какая-то есть ? Неужели там чистый текст только.

[Дмитрий]

Сайт написан на html и css С Sharp:

[#алгоптимизируй #отботизируй]

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

[Дмитрий]

Спасибо большое. Буду пробовать С Sharp:

[Spaceoddity]

а нельзя сразу взять размер скидки?))) скриншот-то зачем - этот размер же как-то генерируется. или эта приблуда вообще не ваша и написана на непонятной технологии?

Answer 2

[xmoonlight]

Генерить свои фин. убытки (даже в маркетинговых целях) без сервера на стороне клиента - это верх безумства!
Генерите ТОЛЬКО на сервере, анимируете (как и сейчас сделано), после остановки барабана - число должно показываться то, которое ЗАРАНЕЕ js получил с сервера через ajax и класть в серверную сессию.
Отправка почты с картинкой - тоже через сервер.
Картинку - можно сделать непосредственно на сервере или забрать как base64 строку в hidden-поле формы.
--------------------
Без сервера вообще (когда речь не про деньги))) ):
1. Гугл-формы для отправки почты и различных данных
2. Сохранение файла с картинкой локально: FileSaver.js
3. Можно поиграться с протоколом mailto:

Comments

[#алгоптимизируй #отботизируй]

генерация факта бонуса только на сервере, чтобы без подделок со стороны клиента. Если это только привлечение клиентов - то не важно.

[xmoonlight]

С Sharp: +100500

[#алгоптимизируй #отботизируй]

с mailto можно не играть,там хтмл не получится добавить, плюс не всегда настроена почта + не слать же письмо счастья самому себе)
Но я могу ошибаться..,

[xmoonlight]

С Sharp: в этом-то и прикол: можно сделать генерацию темы (промо-код) и текста письма на отправку.
А на странице написать: "Если Ваше письмо придёт с корпоративной почты - скидку умножим на x2!"
И мелким текстом: "Отправкой письма, я подтверждаю своё согласие на периодическое получение маркетинговых рассылок и спец.предложений на свой почтовый электронный адрес."
))))

[#алгоптимизируй #отботизируй]

xmoonlight: =)
В чем специализируетесь?

[xmoonlight]

С Sharp: аналитика бизнес-процессов

[#алгоптимизируй #отботизируй]

xmoonlight: =)