本文總瀏覽量次
不知道你是否看過在QQ中看到這樣的圖片,沒點(diǎn)開時是一張圖,點(diǎn)開后瞬間變成另外一張如果沒見過的話請看下圖,如果想要那張圖的話訪問下面第二個地址
效果圖地址:http://7xp9v5.com1.z0.glb.clouddn.com/change.png
(你可以保存到手機(jī)發(fā)到QQ玩玩)
其實(shí)原理不是很復(fù)雜,有人覺得是兩幀的gif,其實(shí)不然,背后的秘密是png格式的圖片,它背景是透明的,然而在QQ或貼吧某些地方,當(dāng)它是小圖時,背景是白色的,當(dāng)你點(diǎn)擊打開后,背景是黑色,你只要控制這張png在白色背景和黑色背景下顯示不同的圖像就可以了,如果你還不懂,我分PS
和程序
方面分別講制作方法。
先睹為快!合成器訪問地址:https://bupt-hjm.github.io/fun-photo-combine/
github地址:https://github.com/BUPT-HJM/fun-photo-combine
這里略去了去色的步驟(圖像->調(diào)整->去色),注意這個步驟是必須的,因?yàn)檫@里圖片是黑白,所以這個步驟沒有用到。
準(zhǔn)備好兩張圖片,并在下方間好兩個背景測試圖層,方便看效果
對于白底顯示的圖片,我們就需要把高光(白色)部分(你也可以通過取樣顏色取圖片的高光點(diǎn))去掉,以保證在背景為黑色的時候,看不出來這個照片
顏色容差和范圍自己來選擇,選到合適的范圍,對于這張圖你也可以選跟我一樣的,顏色容差42,色彩范圍249,然后點(diǎn)擊確定
按delete刪除
然后將白色背景點(diǎn)亮看一下效果
把黑色背景點(diǎn)亮看一下效果
我們要的效果是在黑色背景的時候不會顯示它的,該怎么做呢?
點(diǎn)擊下圖紅色框框部分,調(diào)整該圖層的亮度和對比度
然后做幾層應(yīng)用到那個圖層上,在那個調(diào)整圖層和那個白底圖層之間按住alt就可以把那個調(diào)整圖層只應(yīng)用到那個圖層上(萬分重要),最后做成的效果就是原來那個驚悚的女的消失在黑夜中
最后把那個圖層透明度調(diào)整成50%就可以了
你可以點(diǎn)亮白底和黑底圖層測試一下,是不是白底圖層點(diǎn)亮?xí)r顯示,黑底圖層看到的是全部黑色,如果達(dá)到這一步就完成了。
黑底其實(shí)和白底的處理過程是大概相同的。我們就需要把黑色部分(你也可以通過取樣顏色取圖片的黑色)去掉,以保證在背景為白色的時候,看不出來這個照片
則就是色彩范圍選擇的時候?qū)㈩伾某扇宇伾缓笕『谏?,如下這樣
選中后delete,再跟白底處理的一樣看一下黑底和白底的時候怎么顯示的
同樣的,它在白色背景的時候也是辣么驚悚?。?br>
還是一樣的做亮度對比度處理
跟上面一樣也是做好幾層調(diào)整圖層應(yīng)用到該圖層上,直到基本看不見那個黑人
最后調(diào)整下透明度為50%就行
我們可以做一下圖層合并處理(注意:黑底顯示圖片必須在白底顯示圖片的圖層下方),將除了背景圖以外的圖層全合并起來,然后我們分別點(diǎn)亮看看效果
當(dāng)白色背景點(diǎn)亮?xí)r
當(dāng)黑色背景點(diǎn)亮?xí)r
是不是很神奇?
如果還不懂可以直接問我hhh
原理搞懂了,做一個合成器難度也不會很大了,不過在圖像處理上還是需要一些小算法,比如去色和調(diào)高亮度這些。
合成器訪問地址:https://bupt-hjm.github.io/fun-photo-combine/
github地址:https://github.com/BUPT-HJM/fun-photo-combine
這個合成器我是用兩個canvas來做的,一個上傳圖片顯示的canvas,一個背景canvas,絕對定位到同一地方,實(shí)現(xiàn)類似PS圖層的效果。
我們需要將上傳圖片的ImageData拿出來做處理。
1.去色
其實(shí)去色并不難,我從網(wǎng)上找到的算法,就是將r,g,b全部設(shè)為圖像的亮度就好了
亮度公式:0.299 red + 0.587 green + 0.114 * blue
2.色彩范圍處理
對于白底所要展示的圖片,我們需要將高光部分去掉,我們可以對每個像素點(diǎn)做亮度的判斷然后根據(jù)亮度來做透明度的處理就可以實(shí)現(xiàn)效果。
|
|
由于沒有后臺,移動端有些無法直接保存生成的圖片
PC端可以直接右鍵保存或者點(diǎn)擊下載圖片
移動端可以嘗試點(diǎn)擊下載圖片或者生成圖片后長按保存
|
|
謝謝閱讀~
歡迎上https://github.com/BUPT-HJM/fun-photo-combine給個小star哈哈哈
然后我最近開了個公眾號,歡迎關(guān)注~推送技術(shù)相關(guān)或隨筆等等hh
歡迎關(guān)注
可自由轉(zhuǎn)載、引用,但需署名作者且注明文章出處。
點(diǎn)擊閱讀原文訪問合成器
聯(lián)系客服