Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Отправка картинки в SVG на email (https://javascript.ru/forum/events/73057-otpravka-kartinki-v-svg-na-email.html)

Dan_net 18.03.2018 16:16

Отправка картинки в SVG на email
 
Нужно при нажатии на кнопку отправить SVG файл в базу, а затем передать на почту.

<figure id="imapc" class="changeSide-1">
                            <object data="{{asset($product_slug->svg_url)}}" type="image/svg+xml" id="imap">
                                <p>К сожалению, вы используете устаревшую версию браузера, который не поддерживает интерактивную карту.</p>
                            </object>
                        </figure>

<form action="{{route('send-form')}}" method="post" enctype="multipart/form-data">
                                    {{ csrf_field() }}
                                    <input type="text" class="email" placeholder="Enter your email" name="email">
                                    <input type="text" class="hidden-form-front" name="product_front" value="">
                                    <input type="text" class="hidden-form-back" name="product_back" value="">
                                    <button class="send-button">Send</button>
                                </form>


$('.send-button').click(function (e) {
        var getFront = document.getElementById("imap").contentDocument.lastChild.outerHTML;
        var imgsrc = 'data:image/svg+xml;base64,' + btoa(getFront);
       
        $('.hidden-form-front').val(imgsrc);

    });



При этом коде, в базу приходит закодированный в base файл, но на почту приходит пустой img.
<img alt="">

laimas 18.03.2018 16:48

https://css-tricks.com/a-guide-on-svg-support-in-email/

Попробуйте так:

<embed type="image/svg+xml" src="data:image/svg+xml;base64,PHN2ZyB4bW......

не знаю на всех ли почтовых клиентах прокатит такое. И вообще, не ожидайте от почтовых клиентов и серверов такой поддержки как HTML.

Dan_net 18.03.2018 23:12

Спасибо, не получилось

laimas 19.03.2018 08:56

Конвертируйте в графический формат, ибо с почтовыми клиентами на моб. устройствах еще печальнее будет.

Dan_net 19.03.2018 12:21

Вот мой код за конвертацию в png

var getFront = document.getElementById("imap").contentDocument.lastChild.outerHTML;
        var imgsrc = 'data:image/svg+xml;base64,' + btoa(getFront);

        var canvas = document.querySelector("canvas"),
            context = canvas.getContext("2d");
        canvas.setAttribute('width', 526);
        canvas.setAttribute('height', 233);
var image = new Image;
        image.src = imgsrc;
        image.onload = function () {
            context.drawImage(image, 0, 0);
            var canvasdata = canvas.toDataURL("image/png");
            canvas.parentNode.removeChild(canvas);
            $('.hidden-form-front').val(canvasdata);
        };


Но теперь в базу ничего не приходит.

laimas 19.03.2018 12:39

Цитата:

Сообщение от Dan_net
Но теперь в базу ничего не приходит.

А что вы в нее записываете?

Dan_net 19.03.2018 15:10

ссылку в base64. Вот такого вида: data:image/png;base64,iVBORw0KGgoAAA...

laimas 19.03.2018 15:16

Цитата:

Сообщение от Dan_net
ссылку в base64. Вот такого вида: data:image/png;base64,iVBORw0KGgoAAA...

Зачем? И вообще откуда у клиента возникает этот SVG, от сервера так, а значит зачем же его туда сюда гонять? Можно на сервер отправлять "указатель" на выбранный SVG, сервер его конвертирует (imageMagick) и сохранит как картинку на диск, ну и отправит почтой (можно не как вложение, а внедренное в тело почтового отправления).

Если на сервере нечем конвертировать SVG, пусть будет клиентом, но получая это как base64, сохраняйте ее как картинку на диск, зачем забивать базу картинками?

Dan_net 19.03.2018 17:18

Как сохранить картинку на диск? Через
<input type="file">
мне не подходит.
У меня на сайте есть картинка в SVG, пользователь может поменять цвет этой картинки на самом сайте, а затем уже отредактированная картинка должна быть отправлена на email.

laimas 19.03.2018 17:29

Цитата:

Сообщение от Dan_net
Как сохранить картинку на диск?

Если приходит изображение как base64 и язык сервера РНР, то изображение, это

$img = base64_decode($_POST['product_front']);


Конечно и удостоверится нужно, что это изображение. Можно и не сохранять на диск, если SVG, это рабочий формат, а изображение только для отправки почтой, то $img и отправлять, без сохранения на диск.


Часовой пояс GMT +3, время: 19:39.