У меня есть 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, как предварительный просмотр дизайна.
Поэтому мои вопросы:
Я отвечу на ваш вопрос о переносе того, что у вас есть на холст. Я написал сообщение здесь .
То, что вы делаете, читает изображения и их позицию 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; }
Вы можете рисовать изображения из div на холсте с помощью метода drawImage()
, после чего вы можете получить полученное изображение с toDataURL()
base64 с использованием toDataURL()
.
Я бы использовал библиотеку GD в php для создания нового изображения. Вы можете использовать встроенный стиль div для определения местоположения, необходимого для нового изображения. Вам нужно потратить некоторое время на чтение документации GD, с которой я связан, во-первых, это может быть немного запутанным, если вы раньше не использовали GD, но он может обеспечить большую гибкость при работе с изображениями на php.