您現在的位置是:電腦技術吧?>? 編程技術 ??>??什么是圖像處理,圖像處理實際應用??>??正文詳情

什么是圖像處理,圖像處理實際應用

俞云飛2019-11-06 10:21:28 人圍觀
簡介圖像處理工具HTML5中的canvas元素非常強大。使用getimagedata方法,可以直接對加載的圖像進行位圖操作但是直接操作位圖是很困難的如果采用卷積矩陣,可以通過幾圖像處理基本知識

HTML 5中的canvas元素是相當強大的,利用他的 getImageData 方法可以對載入的圖像直接進行位圖操作。

但是直接對位圖進行操作比較麻煩,如果利用卷積矩陣這個工具的話,可以通過幾個簡單的參數實現復雜的效果。

所謂的矩陣的卷積,就是如下圖顯示的那樣,當計算紅色框中的數值的時候,分別先提取周圍綠框中8個數字,然后與施加的那個矩陣中對應位置相乘,然后把各個乘積加在一起,就得到了最終的值了。

比如上圖中的42是這么來的: (40*0) (42*1) (46*0) (46*0) (50*0) (55*0) (52*0) (56*0) (58*0)= 42這就是卷積了。

然后,所謂的對圖像的卷積操作,就是指對圖像上的每一點的像素值,用這個矩陣進行運算,得到一個新的值。

比如下面這張圖

利用下面這個矩陣-6 -3 0-3 -1 30 3 6就立刻能夠得到浮雕效果。

然后為了使用更方便,通常還會給最終值除以一個系數以及加上一個偏移。

比如下面這個矩陣。

0 0 00 1 00 0 0這個矩陣(實際上這個矩陣本身不對圖像進行任何操作),然后設置系數為-1,偏移為255的話,就能實現反色效果了,真是相當的神奇。

為了簡化操作,我寫了個簡單的函數來對圖像數據進行操作。

函數第一個參數是 canvas上的 imageData 對象第二個參數是傳入矩陣所對應的數組,如果是下面這樣的矩陣a b cd e fg h i則傳入第二個的參數應為 [a,b,c,d,e,f,g,h,i]第三個參數是除數因子。

第四個參數就是偏移量。

// 計算卷積矩陣的函數function ConvolutionMatrix(input, matrix, divisor, offset){ // 創建一個輸出的 imageData 對象 var output = document.createElement(canvas) .getContext('2d').createImageData(input); var w = input.width, h = input.height; var iD = input.data, oD = output.data; var m = matrix; // 對除了邊緣的點之外的內部點的 RGB 進行操作,透明度在最后都設為 255 for (var y = 1; y h-1; y = 1) { for (var x = 1; x w-1; x = 1) { for (var c = 0; c 3; c = 1) { var i = (y*w x)*4 c; oD[i] = offset (m[0]*iD[i-w*4-4] m[1]*iD[i-w*4] m[2]*iD[i-w*4 4] m[3]*iD[i-4] m[4]*iD[i] m[5]*iD[i 4] m[6]*iD[i w*4-4] m[7]*iD[i w*4] m[8]*iD[i w*4 4]) / divisor; oD[(y*w x)*4 3] = 255; // 設置透明度 return output;我這里只寫了個3階的卷積矩陣。

如果覺得不夠high還可以自己實現一個5階的。

版權聲明:本文由 俞云飛 整理編輯。

原標題:圖像處理的八個步驟,FPGA圖像處理

轉載注明出處:http://www.dn9ww09s.icu/program/11271.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 現在筆記本電腦哪個牌子好,適合玩游戲的筆記本電腦

    現在筆記本電腦哪個牌子好,適合玩游戲的筆記本電腦 相關圖片筆記本電腦排行不得不說,筆記本電腦現在越來越好了在配置性能方面,很多已經超過了臺式機。而且,筆記本電腦攜帶方便,可以隨時隨地攜帶,性能好,使用方便。如果我買電腦,...

  • 如何提高性能,提高性能能力的方法

    如何提高性能,提高性能能力的方法 相關圖片怎么提高顯卡的性能利用cache技術實現預繪制,減少了canvs內容的重復繪制。當我們在畫布上繪制和更新時,我們總是保持一些不變的內容對于這些內容,我們應該提前繪制緩存,而不是...

  • 平板電腦與手機有什么區別,平板電腦手機

    平板電腦與手機有什么區別,平板電腦手機 相關圖片平板電腦有必要買嗎隨著網絡和技術的發展,出現了各種各樣的計算機、平板電腦、手機等。如今,手機的模式越來越類似于平板電腦,功能也越來越相似。所以,一些用戶問平板電腦...

  • 驍龍處理器排行2018,處理器性能排行榜

    驍龍處理器排行2018,處理器性能排行榜 相關圖片處理器排行榜目前這一代智能手機速度非常快,半年更新一次,一年更新一次,這種趨勢已經成為常態移動軟件的發展也日新月異。我們怎么能不被困住呢?我們相信這款手機首先必須...

  • 布局框架,網頁框架布局

    布局框架,網頁框架布局 相關圖片框架CSS框架的優點:1提高開發效率如果你是一個企業網站的前端開發,相信你大部分時間都在做類似網站的代碼工作一個定義良好的框架可以大大提高工作效率,避免一些常見的錯css布...

  • 新手怎么制作word表格,表格制作教程word

    新手怎么制作word表格,表格制作教程word 相關圖片wps表格怎么制作表格形式在我們的日常工作中是必不可少的。單詞形式很容易操作與excel不同,有許多非專業人員無法使用的函數來生成表單那么如何在word上快速構建合適的表單呢?現...

  • 中國古典風格裝修,中國古典

    中國古典風格裝修,中國古典 相關圖片中國古典風格家具特點本教程主要使用焰火制作中國古典文字的簽名讓我們一起學習渲染-材料中國傳統風格...

  • 筆記本電腦怎么連接wifi,筆記本電腦連接不上wifi

    筆記本電腦怎么連接wifi,筆記本電腦連接不上wifi 相關圖片筆記本wifi怎么打開不知不覺中,這個時代已經發展到了科技時代,筆記本電腦用戶數量急劇增加作為筆記本用戶,我們大多數人在使用筆記本時都會選擇使用wifi連接網絡,所以有些用戶...

  • ppt制作時鐘動畫,時鐘動畫

    ppt制作時鐘動畫,時鐘動畫 相關圖片max時鐘動畫讓我們看看效果圖。這是教程如何制作時鐘動態...

  • 為什么筆記本電腦關不了機怎么解決,筆記本電腦關不了機怎么解決

    為什么筆記本電腦關不了機怎么解決,筆記本電腦關不了機怎么解決 相關圖片筆記本電腦一直關機中現在是夏天,天氣開始又熱又干筆記本電腦長時間使用后,灰塵會沉積在里面。這時,干燥的天氣很可能會產生靜電,灰塵沉積在里面,導致筆記本電腦無法開機...

熱評文章

  • 筆記本硬盤壞了怎么修復,戴爾筆記本硬盤壞了怎么修復

    筆記本硬盤壞了怎么修復,戴爾筆記本硬盤壞了怎么修復 相關圖片筆記本硬盤壞了還能用嗎眾所周知,現在幾乎每個家庭都有電腦如果你是一個喜歡電腦的朋友,你可能對電腦了解很多,但大多數人并不那么了解。硬盤是最主要的硬件之一,有著長期...

  • body標簽的屬性,標簽body

    body標簽的屬性,標簽body 相關圖片text標簽及其屬性Bgcolor=text color background=background picture text=text color超鏈接文本顏色為了突出顯示超鏈接body width...

  • 筆記本電腦開機黑屏,筆記本電腦開機黑屏怎么辦

    筆記本電腦開機黑屏,筆記本電腦開機黑屏怎么辦 相關圖片筆記本電腦開機沒反應計算機最常見的故障之一是筆記本或臺式計算機。系統啟動后,進入桌面時不會顯示任何內容。只有鼠標才能顯示和移動黑屏或純藍屏。你怎么能在沒有任何回應...

  • 桌面進程被關掉,顯示桌面進程

    桌面進程被關掉,顯示桌面進程 相關圖片電腦桌面停止進程了怎么打開有時我們需要關閉一些系統認為無法關閉的進程,特別是在管理器模式下。當提示是一個關鍵過程時,程序窗口總是不顯示任何響應此時,最好的解決方案...

  • css邊框樣式,css的邊框標簽

    css邊框樣式,css的邊框標簽 相關圖片css內邊框線怎么設置今天,我完成了我的工作。我想到了一個新的css用戶,他幾天前讓我美化他的div邊框。最好編寫一個css教程來幫助更多的新css用戶學習如何使用css來美化網頁上css邊...

  • 哪個牌子的筆記本電腦好,現在筆記本電腦哪個牌子好

    哪個牌子的筆記本電腦好,現在筆記本電腦哪個牌子好 相關圖片筆記本電腦性價比據了解,90%以上的年輕人都有一臺或多臺筆記本,一臺好的筆記本不僅要注重品牌和外觀,還要注重性能和配置,才能成為一款令人滿意的產品。那么,什么樣的筆記...

  • 簡單的小制作,人物模型制作

    簡單的小制作,人物模型制作 相關圖片手工科技小制作簡單的首先,讓我們看看最終效果圖1移動硬盤的型號。這種方法類似于監視鼠標。注意從桌面返回的光線2制造表面像顯示器一樣,先畫出屏幕圖片,然后將其變形。第一...

  • 系統安裝找不到分區,安裝系統找不到引導分區

    系統安裝找不到分區,安裝系統找不到引導分區 相關圖片重裝系統無法創建新的分區計算機進入我們的生活,一些用戶會使用pe引導盤和pe引導盤來安裝系統。然而,當加載ISO安裝時,我們遇到了一種情況,我們無法創建新的分區或找到現有的...

  • 筆記本藍屏怎么解決,筆記本藍屏

    筆記本藍屏怎么解決,筆記本藍屏 相關圖片筆記本開機按了沒反應電腦藍屏,又稱藍屏死機這是Microsoft Windows系列操作系統強制顯示的屏幕圖像,以保護計算機中的數據文件在無法從系統錯誤中恢復時不受損壞。但現在我們筆記本...

  • 支付,支付寶推出刷臉支付

    支付,支付寶推出刷臉支付 相關圖片支付寶刷臉支付軟件現在HTML已經成為一個熱門話題,關于HTML5的各種應用、游戲和存儲也在如火如荼地進行著各大主流瀏覽器也開始支持HTML5標準,以打贏新一輪瀏覽器大戰請看:谷微信...

關注微信

变脸官网查询