Q

如何將多個IMG作爲一個圖像保存在彼此的頂部？

2012-11-08 49 views 1 likes

1

我有多個IMG層疊在一起（位置：絕對;頂部：0;左：0;），我需要將所有這些圖層保存爲一個實體圖像。我怎樣才能做到這一點？客戶的後端是Coldfusion。如何將多個IMG作爲一個圖像保存在彼此的頂部？

謝謝，夥計們！

2012-11-08 user1807782

+2

把它們寫在畫布中相同的順序，然後從畫布抓取圖像。 –

A

回答

2

如果你打算用JavaScript來做，你將需要使用畫布。

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

如果你要做到這一點在後端，則需要使用一些圖像庫如imagecfc

做

2012-11-08 00:50:31 epascarello

+0

我的理解是，需要在後端創建單個文件，而不是在客戶端中創建多個圖像。 –

+0

不需要imagecfc - CF8向前有[cfimage]（http://cfdocs.org/cfimage）標記和一堆[圖像相關函數]（http://cfdocs.org/image-functions）..比利剛剛補充說，其中的細節可以在答案中看到。 –

+0

@BillyCravens你假設很多缺乏細節的問題。 :) – epascarello

4

很簡單，假設你有多個透明的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">

（書面未經測試，但看起來右）

2012-11-08 01:20:25

相關問題