Сохраните несколько <img>со всеми примененными css элементами из собственной DOM в файл jpg / png

Question

Я разработал проект на Laravel и Vue Js. На одной из частей этого сайта я создал приложение в Vue, которое позволяет пользователю перетаскивать тег <img> на другой тег <img>, оба из которых содержатся в DIV. Существует множество (и наиболее неподдерживаемых) CSS, применяемых к обоим изображениям, в качестве фильтров, 3dtransforation, mask, background-source ... Он работает плавно как в Chrome, так и в Firefox. Теперь я должен сохранить в jpg / png «результат» всех преобразований, примененных к этим двум изображениям, или, лучше сказать, HTML-код контейнера div должен быть преобразован в файл изображения и сохранен на сервере / отображается на странице после клика. Я не понимал, что это будет самая трудная часть ... Что бы я ни пытался до сих пор, это не сработало Я пытался использовать

1. Domtoimage -> Проблема с этой библиотекой javascript заключается в том, что я загружаю 1 изображение с сервера (локальное в настоящее время) и 1 изображение с диска S3 на AWS, и есть перекрестные проблемы совместимости.
2. Browsershot -> Проблема, с которой я столкнулся здесь, снова связана с наличием файлов на разных хранилищах, но здесь проблема на локальном хосте. Hww, пробуя оба изображения на S3, некоторые свойства CSS не отображаются (маска, прозрачность, преобразование)
3. HTML2CANVAS -> Снова обе проблемы: перекрестное происхождение и отсутствие рендеринга большинства необходимых CSS.

На данный момент я действительно больше не знаю, где искать решение. Кажется, что так просто установить css для двух элементов, которые работают, невозможно попросить java или сервер просто «распечатать» то, что вы видите, именно так, как вы это видите. Насчет "печати": я заметил (пытаясь найти обходной путь), что даже если при нажатии на печать страницы в предварительном просмотре некоторые CSS отсутствуют, хотя они хорошо видны на странице.

Буду окончательно благодарен, если у кого-нибудь есть предложения

Answer 1

Как я уже говорил в комментариях, здесь - это некоторые решения. Решение , включающее wkhtmltoimage на стороне сервера, выглядит следующим образом:

wkhtmltopdf и wkhtmltoimage - командная строка с открытым исходным кодом (LGPLv3) инструменты для рендеринга HTML в PDF и различных форматов изображений с использованием Qt Движок рендеринга WebKit

• Загрузите и установите wkhtmltopdf, который включает в себя wkhtmltoimage
• Отправьте от клиента все, что вам нужно (более подробно ниже)
• В бэкэнде создайте HTML-файл со всем, что вам нужно, вы можете включить css и javascript
• пробег wkhtmltoimage http://yourHtml.html yourdesiredImage.jpg
• У вас есть страница, на которой все отображается как браузер в yourdesiredImage.jpg

---

Поскольку вы должны отправить в бэкэнд некоторые виды поведения, которые пользователи выполняют с css, Вы можете использовать window.getComputedStyle(element) для хранения всех свойств, примененных к элементу, в объекте.

Вы должны отправить объект, созданный window.getComputedStyle(element), на сервер с помощью ajax и повторно применить правила .

Чтобы повторно применить эти стили, вы можете использовать что-то вроде:

var stylesComputed = {}//My object from frontend 

var source = document.getElementById("source");
var target = document.getElementById("target");


var copy = document.getElementById("copy");

copy.addEventListener("click", function(){
      var styles = "";
      for(let i = 0; i<stylesComputed.length-1; i++){
      styles += stylesComputed[i]+":"+stylesComputed[stylesComputed[i]]+"; ";
      }
      target.setAttribute("style", styles);

      document.getElementById("t2").innerHTML = "Target (copied)";
});

полный пример здесь: https://jsfiddle.net/5c9rhxbn/