Лучший способ конвертировать div в изображение? используя php, javascript или jquery

У меня есть div, содержащий такие изображения:

<div id="Created_Design">
  <img src="images/image1.png" style="position: absolute; left: 8px; top: 172px;">
  <img src="images/image2.png" style="position: absolute; left: 20px; top: 144px">
</div>

Я хочу экспортировать этот div для создания образа, создающего нечто вроде генератора проекта. До сих пор то, что я сделал, - это создать новый дизайн в новом окне, используя window.open, как предварительный просмотр дизайна.

Итак, мои вопросы:

Можно ли преобразовать этот div и сохранить его непосредственно как изображение?
Я думал экспортировать это на холст, чтобы сохранить его как изображение. Как я могу экспортировать это на холст?
Есть ли другой способ сделать это?

Ответ 1

Я отвечу на ваш вопрос о переносе того, что у вас есть на холст. Я написал сообщение здесь.

Что вы делаете, читайте изображения и их позицию css, сверху и слева. Затем скопируйте его в холст.

(код с головы, может быть ошибкой)

// Loop over images and call the method for each image node
$('#Created_Design').children(function() {
    drawImage(this.src, this.style.left, this.style.top);
});

function drawImage(src, x, y) {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.onload = function() {
    ctx.drawImage(img, x, y);
  };
  img.src = src;
}

Ответ 2

Вы можете рисовать изображения из div на холсте с помощью метода drawImage(), после чего вы можете получить полученное изображение с кодировкой base64 с использованием метода toDataURL().

Ответ 3

Я бы использовал php GD для создания нового изображения. Вы можете использовать стиль div inline, чтобы определить расположение, необходимое для нового изображения. Вам нужно будет потратить некоторое время на чтение документации GD, с которой я связан, во-первых, это может быть немного запутанным, если вы раньше не использовали GD, но он может обеспечить большую гибкость при работе с изображениями на php.