還是這個美女,長這樣
然後進行乙個浮雕操作
一瞬間,生動活躍的人物就變成了石板雕刻,還帶上了一點質感.如何實現這種浮雕質感呢?放在畫布裡,也就是對畫素的操作,關鍵就在怎麼操作了.
先這樣:把每個畫素的通道和相鄰畫素的通道值進行差值運算,
再這樣:得到結果加上中性灰的值(128),
然後再這樣:當前畫素把以上運算得到結果進行一次按權的平均運算(就是實現灰度時候的按權整數法),把所得值賦值給各個通道.具體點就是這樣
1.獲取畫布上影象的畫素資訊
2.遍歷每乙個畫素
3.把相鄰畫素的同個通道進行差值運算,再加上中性灰的色值
4.把結果通道的值進行求和並按權平均作為最終通道的值
5.把處理後的畫素資訊放回畫布
注意:浮雕分凸面和凹面型,這裡實現的是凹面型,凸面型要在3的基礎上進行反相操作(取它的補數)
and then…
function
filter
(context)
filter.prototype.constructor = filter;
filter.prototype.
relief
=function
(startx, starty, w, h)
// 3.把相鄰畫素的同個通道進行差值運算,再加上中性灰的色值
let r = math.
abs(imgdata.data[i]
- imgdata.data[j]
+128),
g = math.
abs(imgdata.data[i+1]
- imgdata.data[j+1]
+128),
b = math.
abs(imgdata.data[i+2]
- imgdata.data[j+2]
+128);
// 4.把結果通道的值進行求和並按權平均作為最終通道的值
let val =
parseint
(r*0.3
+ g*
0.59
+ b*
0.11);
imgdata.data[i]
= val;
imgdata.data[i +1]
= val;
imgdata.data[i +2]
= val;
}// 5.把處理後的畫素資訊放回畫布
this
.context.
clearrect
(startx, starty, w, h)
;this
.context.
putimagedata
(imgdata, startx, starty)
;}
總結一下:影象浮雕主要是對影象相鄰畫素的同款通道進行差值運算,再加上128(凸面的浮雕還要取它們各自的補數),接著對所有通道求和並按權平均,得到的值重新賦值給當前每個通道.
the end~
4 浮雕效果
浮雕 雕刻演算法實質是很簡單地，即 對影象的每乙個點進行卷積處理。假設原影象為x,處理後的影象為y 浮雕演算法核kernel矩陣定義為 1 0,0 0,0,0 0,0,1 那麼，對於座標為 i,j 點，浮雕效果圖的演算法為y i,j x i 1,j 1 x i 1,j 1 128。當然，x,y的取值...
css浮雕效果
浮雕效果 感覺這個效果用在網頁上應該蠻讚的，於是就學習了一下 浮雕效果需要用到伸縮盒的知識 flex flex在chrome是完全支援的，要加 webkit 字首，其他的瀏覽器有的支援有的不支援，自己去查css手冊，今天主要想講一下怎麼製作出浮雕效果 先附上 1 div class title 2 ...
canvas 實現簽名效果
用canvas和svg都可以實現，而且跨平台能力也很好。兩者各有自己擅長的領域，基於以上，以下是用canvas實現的移動端簽字功能。從建立 設定 監聽繪製 重繪 儲存等進行處理。html結構 清除p 儲存p div css樣式 html,body canvas canvas canvas clear...