Скрин прикрепить к письму html2canvas
 

Добрые форумчане, может поможете разобраться в проблеме)
На странице есть скрипт, который делает скрин. Выглядит так:

<script language='javascript'>
        function downimg(){
            html2canvas($('#downimg'), {
                onrendered: function (canvas) {
                    var img = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
                    canvas.toBlob(function(blob) {
                    saveAs(blob ,"laminar.jpeg");
                    }, "image/jpeg");

                }
            });
        }
</script>

И есть кнопка "сохранить":

<button type="button" id="save" class="3d-button" onClick="downimg()">Сохранить</button>

При клике картинка сохраняется на компьютер. А сейчас есть задача,сформированную картинку прикреплять к письму (там есть еще одна кнопка "отправить"). Можете подсказать как?

Этим занимается сервер.

вместо saveAs отправлять блоб на сервер.

вообще, непонятно, зачем в коде используется и toDataURL, и toBlob.
надо что-то одно. И если это будет toBlob, то нужен полифил, не во всех браузерах оное реализовано.

:blink: мне все равно непонятно как надо написать((( я начинающий товарисч

а как отправлять на сервер? типа такого: xhr.send(downimg); ?

сделала так:

<script language='javascript'>
function saveimg(){  

 var xhr = new XMLHttpRequest();
  xhr.open('POST', '', true);
  xhr.onload = function(e) { /*...*/ };
  
      html2canvas($('#saveimg'), {
      onrendered: function (canvas) {
      canvas.toBlob(function(blob) {
      xhr.send(blob ,"laminar.jpeg");
      }, "image/jpg");
      }
      });
      }
</script>

понимаю, что хрень наверное, ну и не работает она естественно

никто не подскажет?

А что сейчас происходит по этой кнопке?
Полуавтоматизированный вариант (при условии, что у посетителя на компьютере есть почтовая программа):

<a href="mailto:admin@javascript.ru?subject=screenshot&body=Вложите файл скриншота laminar.jpeg в письмо">ОТПРАВИТЬ письмо</a>

через эту кнопку открывается форма с полями, после заполнения которой идет кнопка "отправить для рассчета" - отправка сформированного письма с помощью системы управления сайтом netcat функцией CMIMEMail, туда добавляются указанные пользователем в форме поля, а я еще хотела прикрепить эту сформированную картинку, знаний не хватает катострофически :(
Можно тут посмотреть, чтоб понятнее было www.laminar.ru/test

Heny,
1. Форма для письма имеет поле "Вы можете приложить файл до 5 Мб" - вот туда и можно вкладывать файл скриншота. Однако автоматизировать процесс без предварительного сохранения пользователем в файл на диск и последующего открытия файла в форме ввода у Вас навряд ли получится. Если дело принципа, то надо будет в эту форму добавить hidden-поле, в которое вкладывать бинарную матрицу скриншота, а при приёме на сервере содержимое этого поля сохранять в виде jpg-файла. Но (если это PHP), то не забудьте, что по-умолчанию там стоит ограничение post_max_size и upload_max_filesize, поэтому большой файл, созданный на Full HD дисплее вложить не получится (надо менять настройки сервера).

2. Я предлагаю Вам другой путь (более по-взрослому). Изображение (из которого делается скриншот) - это не просто слепок экрана, а изображение, которое полностью подконтрольно вашей программе. Оно формируется на основании установленных пользователем параметров).
Если Вы будете передавать готовый файл, то как минимум возникнет проблема плохого вида в случаях, когда картинка формировалась на маленьком экране, а просматирваться будет на большом (и наоборот).
Поэтому надо передавать не сам файл, а параметры формирования изображения. Сделать это можно в скрытых полях формы. Затем, из полученных данных Ваша программа должна полностью сформировать изображение на основании этих параметров.
Как вариант можно передавать не сами параметры, а готовую URL-ссылку, типа такого:
http://www.laminar.ru/create_picture/?p1=111&p2=222......
В таком случае у Вас еще появится дополнительный сервис: сформированную ссылку посетитель может послать своим друзьям/родственникам для рассмотрения. И изображение будет сформировано индивидуально для каждого разрешения экрана.

3. Не нашел кнопки закрытия форму. Надеюсь, потому что это тест. Иначе невозможно раздражает.

Получите результат работы canvas, и если изображение большого размера, то можно в формате jpeg, но если не очень, то лучше по умолчанию - png, так как jpeg плох тем, что при каждом сохранении в этом формате он будет сжиматься повторно, то есть качество при каждом сохранении ухудшается.

var data = canvas.toDataURL('image/png')

где canvas, это ссылка на объект canvas.

Далее, если форма отправляется обычным способом, то можно поместить data в скрытое поле textarea с именем downimg, если же асинхронно, то значит xhr.send(downimg=data);

На сервере это надо преобразовать в изображение:

if($img = explode('base64,/', $_POST['downimg'])[1] AND $img = imagecreatefromstring(base64_decode($img))) {
    //здесь сохранение изображения из ресурса $img средствами GD, а как это сделать зависит от того как передается изображение в CMIMEMail
}

Спасибо всем большое, теперь попробую в этом разобраться :victory: