Question

我有多个IMG分层叠在一起（位置：绝对;顶部：0;左：0;），我需要将所有这些图层保存为一个实体图像。我怎样才能做到这一点？客户的后端是Coldfusion。

谢谢，伙计们！

Answer 1

假设您有多个透明的PNG / GIF（我在美国地图上使用着色状态完成此操作），这很容易。主要使用imageCopy（）和imagePaste（）以及图像对象。

<!--- below assumes 600x400 images --->
<cfquery name="election">
    select state from electionResults where winner='Obama'
</cfquery>

<cfimage source='#expandPath('/imgs/us.png')#" name="usMap">

<cfloop query="election">
    <cfimage source="#expandPath('/imgs/#state#-blue.png')#" name="state">
    <cfset img = imageCopy(state, 1,1,600,400)>
    <cfset imagePaste(usMap,img,1,1)>

</cfloop>

<cfimage action="write" source="#usMap#" destination="#expandPath('/imgs/us-obama.png')#"
    overwrite="yes">

<img src="/imgs/us-obama.png">

（未经测试而写，但看起来正确）

Answer 2

如果要使用JavaScript，则需要使用画布。

添加图片：How to add image to canvas
保存图片：Capture HTML Canvas as gif/jpg/png/pdf?

如果要在后端执行此操作，则需要使用某些图像库，例如imagecfc

如何将多个IMAG保存在一个图像上？

2 个答案: