本文總瀏覽量次

不知道你是否看過在QQ中看到這樣的圖片，沒點(diǎn)開時(shí)是一張圖，點(diǎn)開后瞬間變成另外一張如果沒見過的話請看下圖，如果想要那張圖的話訪問下面第二個地址

效果圖地址：http://7xp9v5.com1.z0.glb./change.png
（你可以保存到手機(jī)發(fā)到QQ玩玩）

或者你有沒有看過QQ空間有段時(shí)間刷屏了很多的
小圖時(shí)

大圖時(shí)

你肯定覺得很神奇，然而這是如何做到的呢？

原理

其實(shí)原理不是很復(fù)雜，有人覺得是兩幀的gif，其實(shí)不然，背后的秘密是png格式的圖片，它背景是透明的，然而在QQ或貼吧某些地方，當(dāng)它是小圖時(shí)，背景是白色的，當(dāng)你點(diǎn)擊打開后，背景是黑色，你只要控制這張png在白色背景和黑色背景下顯示不同的圖像就可以了，如果你還不懂,我分PS和程序方面分別講制作方法。

先睹為快！合成器訪問地址：https://bupt-hjm./fun-photo-combine/
github地址：https://github.com/BUPT-HJM/fun-photo-combine

PS部分

1.先準(zhǔn)備好兩張圖片

這里略去了去色的步驟（圖像->調(diào)整->去色），注意這個步驟是必須的，因?yàn)檫@里圖片是黑白，所以這個步驟沒有用到。

準(zhǔn)備好兩張圖片，并在下方間好兩個背景測試圖層，方便看效果

2.白底顯示部分

對于白底顯示的圖片，我們就需要把高光（白色）部分（你也可以通過取樣顏色取圖片的高光點(diǎn)）去掉，以保證在背景為黑色的時(shí)候，看不出來這個照片

顏色容差和范圍自己來選擇，選到合適的范圍，對于這張圖你也可以選跟我一樣的，顏色容差42，色彩范圍249，然后點(diǎn)擊確定

按delete刪除

然后將白色背景點(diǎn)亮看一下效果

把黑色背景點(diǎn)亮看一下效果


我們要的效果是在黑色背景的時(shí)候不會顯示它的，該怎么做呢？
點(diǎn)擊下圖紅色框框部分，調(diào)整該圖層的亮度和對比度


然后做幾層應(yīng)用到那個圖層上，在那個調(diào)整圖層和那個白底圖層之間按住alt就可以把那個調(diào)整圖層只應(yīng)用到那個圖層上（萬分重要），最后做成的效果就是原來那個驚悚的女的消失在黑夜中


最后把那個圖層透明度調(diào)整成50%就可以了
你可以點(diǎn)亮白底和黑底圖層測試一下，是不是白底圖層點(diǎn)亮?xí)r顯示，黑底圖層看到的是全部黑色，如果達(dá)到這一步就完成了。

3.黑底顯示部分

黑底其實(shí)和白底的處理過程是大概相同的。我們就需要把黑色部分（你也可以通過取樣顏色取圖片的黑色）去掉，以保證在背景為白色的時(shí)候，看不出來這個照片
則就是色彩范圍選擇的時(shí)候?qū)㈩伾某扇宇伾?，然后取黑色，如下這樣

選中后delete，再跟白底處理的一樣看一下黑底和白底的時(shí)候怎么顯示的
同樣的，它在白色背景的時(shí)候也是辣么驚悚??！


還是一樣的做亮度對比度處理

跟上面一樣也是做好幾層調(diào)整圖層應(yīng)用到該圖層上，直到基本看不見那個黑人

最后調(diào)整下透明度為50%就行

4.效果展示

我們可以做一下圖層合并處理（注意:黑底顯示圖片必須在白底顯示圖片的圖層下方），將除了背景圖以外的圖層全合并起來，然后我們分別點(diǎn)亮看看效果
當(dāng)白色背景點(diǎn)亮?xí)r

當(dāng)黑色背景點(diǎn)亮?xí)r

是不是很神奇？

如果還不懂可以直接問我hhh

canvas合成器

原理搞懂了，做一個合成器難度也不會很大了，不過在圖像處理上還是需要一些小算法，比如去色和調(diào)高亮度這些。

合成器訪問地址：https://bupt-hjm./fun-photo-combine/
github地址：https://github.com/BUPT-HJM/fun-photo-combine

類似PS圖層

這個合成器我是用兩個canvas來做的，一個上傳圖片顯示的canvas，一個背景canvas，絕對定位到同一地方，實(shí)現(xiàn)類似PS圖層的效果。

ImageData

我們需要將上傳圖片的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)效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

//白底呈現(xiàn)的圖片處理
function processing(canvas) {
    var ctx = canvas.getContext("2d");
    var imgData = ctx.createImageData(canvas.width, canvas.height);
    var arr = imgData.data;
    for (var i = 0, len = data.length; i < len; i += 4) {
        var red = data[i],
            green = data[i + 1],
            blue = data[i + 2],
            alpha = data[i + 3],
            y = 0.299 * red + 0.587 * green + 0.114 * blue; //亮度
        var k = 130;
        arr[i] = y;
        arr[i + 1] = y;
        arr[i + 2] = y;
        arr[i + 3] = alpha * (k - y) / 255;
        if (y > k) {
            arr[i + 3] = 0;
        }
    }
    return imgData;
}
//黑底呈現(xiàn)的圖片處理
function processingBlack(canvas) {
    var ctx = canvas.getContext("2d");
    var imgData = ctx.createImageData(canvas.width, canvas.height);
    var arr = imgData.data;
    for (var i = 0, len = data.length; i < len; i += 4) {
        var red = data[i],
            green = data[i + 1],
            blue = data[i + 2],
            alpha = data[i + 3],
            y = 0.299 * red + 0.587 * green + 0.114 * blue; //亮度
        y = y * 4.5;
        var k = 100;
        arr[i] = y;
        arr[i + 1] = y;
        arr[i + 2] = y;
        arr[i + 3] = alpha * y / 255 * 0.08;
        if (y < 150) {
            arr[i + 3] = 0;
        }
    }
    return imgData;
}

圖像保存

由于沒有后臺，移動端有些無法直接保存生成的圖片

PC端可以直接右鍵保存或者點(diǎn)擊下載圖片
移動端可以嘗試點(diǎn)擊下載圖片或者生成圖片后長按保存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//下載圖片
function saveImg() {
    var imgUrl = canvas_img.toDataURL("image/png").replace("image/png", "image/octet-stream");
    var a = document.createElement('a');
    a.download = "fun.png";//指明以產(chǎn)生后綴
    a.href = canvas_img.toDataURL();
    a.click();
}
//生成圖片
function createImg() {
    imgBox.innerHTML = "";
    var img = document.createElement("img");
    img.src = canvas_img.toDataURL("image/png");
    imgBox.appendChild(img);
}

最后

謝謝閱讀~
歡迎上https://github.com/BUPT-HJM/fun-photo-combine給個小star哈哈哈
然后我最近開了個公眾號，歡迎關(guān)注~推送技術(shù)相關(guān)或隨筆等等hh
歡迎關(guān)注

可自由轉(zhuǎn)載、引用，但需署名作者且注明文章出處。

點(diǎn)擊閱讀原文訪問合成器