九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
揭開QQ縮略圖與大圖不同背后的秘密(附簡單合成工具) | 小深刻的秋鼠

本文總瀏覽量次



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

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

或者你有沒有看過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

PS部分

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

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


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

2.白底顯示部分

對于白底顯示的圖片,我們就需要把高光(白色)部分(你也可以通過取樣顏色取圖片的高光點(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á)到這一步就完成了。

3.黑底顯示部分

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


選中后delete,再跟白底處理的一樣看一下黑底和白底的時候怎么顯示的
同樣的,它在白色背景的時候也是辣么驚悚?。?br>


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

跟上面一樣也是做好幾層調(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.github.io/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)擊閱讀原文訪問合成器

本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
js上傳圖片取色器插件
使用nodejs將html5 canvas base64編碼圖片保存為文件
canvas圖像處理匯總
手把手教你利用JS給圖片打馬賽克
自己動手做一個識別手寫數(shù)字的web應(yīng)用04
用canvas 實(shí)現(xiàn)個圖片三角化(LOW POLY)效果
更多類似文章 >>
生活服務(wù)
熱點(diǎn)新聞
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服