javascript - 使用javascript在图像上放置项目后如何拍摄最终结果？

Question

我正在做一个项目，我需要开发一个系统，人们可以通过从给定的符号和图像列表中选择并选择背景来创建自己的设计。我已经完成了有关拖放等的所有部分。但我坚持在单个图像中预览最终结果。我目前假设我需要获取拖放容器（或画布）中元素的位置并将其传递给 php 脚本（我可以使用 PHP），然后使用创建新图像PHP的图像库。但这对我来说真的很笨拙和令人沮丧。所以我来这里是为了听取专家的意见和建议。

所以我的问题是——“关于 php 或 js 有没有其他方法可以用来获得我想要的结果？”

提前致谢。

Answer 1

You sir, are right on target. Some optimization suggestions though are to pass the dimensions as a JSON object, this way you get an array in PHP and you can have multiple objects as well as supplying each images source url.

There are plenty of libraries to handle the actual generation. Some to consider are here http://php.net/manual/en/refs.utilspec.image.php Theres plenty of tutorials available on the subject. I can tell you, you will be using the function imagecopymerge() from GD, and it will make this a breeze. More on this topic here... Merge two images in php

Good luck and enjoy, feel free to comment with more questions.

Answer 2

If you have a canvas you can just get the content of the canvas as a image (in whatever extension you want) in base64 using canvas.toDataUrl(); as in this question:

Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)

Then you can either send it to your server using AJAX or a form submit action (using a hidden field). In the server you can get the image as base64 and decode it into a file to save on the filesystem or just store it using a blob type on a database.