1

I have multiple IMGs layered on top of each other (position:absolute;top:0;left:0;), and I need to save all those layers as one solid image. How can I do this? The client's backend is Coldfusion.

Thanks, guys!

user1807782
  • 451
  • 1
  • 4
  • 17

2 Answers2

4

Pretty easy assuming you have multiple transparent PNGs/GIFs (I've done this with coloring states on a US map). Primarily you use imageCopy() and imagePaste() along with image objects.

<!--- 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">

(written without testing, but looks right)

Billy Cravens
  • 1,643
  • 10
  • 15
2

You will need to use canvas if you are going to do it with JavaScript.

If you are going to do it on the back end, you will need to do it with some image library such as imagecfc

Community
  • 1
  • 1
epascarello
  • 204,599
  • 20
  • 195
  • 236
  • My understanding is that the need is to create a single file on the backend, not layer multiple images in the client. – Billy Cravens Nov 08 '12 at 01:21
  • No need for imagecfc - CF8 onwards has the [cfimage](http://cfdocs.org/cfimage) tag and a bunch of [image-related functions](http://cfdocs.org/image-functions) ... details of which can be seen on the answer Billy just added. – Peter Boughton Nov 08 '12 at 01:22
  • @BillyCravens You are assuming a lot with the question that lacks details. :) – epascarello Nov 08 '12 at 01:55
  • @PeterBoughton Been like years since I coded coldfusion, when will it ever die. – epascarello Nov 08 '12 at 01:56
  • 1
    The question said "need to save all those layers as one solid image" - saving a file is different from rendering layers in the DOM. Also, if the user needed a client side solution, I would think they wouldn't have mentioned the server-side language used. – Billy Cravens Nov 08 '12 at 05:42