Отправка картинки в SVG на email

[Dan_net]

Нужно при нажатии на кнопку отправить 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]

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]

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

[laimas]

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

[Dan_net]

Вот мой код за конвертацию в 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]

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

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

[Dan_net]

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

[laimas]

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

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

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

[Dan_net]

Как сохранить картинку на диск? Через

<input type="file">

мне не подходит.
У меня на сайте есть картинка в SVG, пользователь может поменять цвет этой картинки на самом сайте, а затем уже отредактированная картинка должна быть отправлена на email.

[laimas]

Как сохранить картинку на диск?

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

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

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