摘要:對像素點實現基本的處理操作獲取像素點數據獲取中的像素信息,開始復制的左上角位置的坐標。灰度處理像素取反減去對應的值,再賦值給原來的亮度調節原來的值隨機的加減一個相同的隨機數。
canvas對像素點實現基本的處理操作
// 獲取像素點數據 var canvas = document.getElementById("CanvasElt"); var ctx = canvas.getContext("2d"); // 獲取canvas中的像素信息, //x 開始復制的左上角位置的 x 坐標。 //y 開始復制的左上角位置的 y 坐標。 //width 將要復制的矩形區域的寬度。 //heigh將要復制的矩形區域的高度。 var canvasData = ctx.getImageData(x, y, canvas.width, canvas.height); // 寫入像素信息 ctx.putImageData(canvasData, 0, 0); 獲取到的canvasData對象包含下列成員,其中的data數組結構大概是這樣的,一行一行存,然后一個列點一個列點存,每個點占4個下標,分別是RGBA唄,則對于坐標(x,y)(這里的y是下方正向),RGBA分別是data[(ywidth+x)4],data[(ywidth+x)4+1],data[(ywidth+x)4+2],data[(ywidth+x)4+3]。 能夠獲取到像素點,就能對像素點進行操作,最簡單的就是灰度處理了,灰度處理有很多種方式最簡單的方法就是把每個相位的r,g,b相加取平均數,再分別賦給r,g,b。 //灰度處理 function gray() { var imageData = ctx1.getImageData(0, 0, canvas1.width, canvas1.height); for(var i = 0; i < imageData.data.length; i += 4) { var avg = (imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2]) / 3; imageData.data[i] = avg; // red imageData.data[i + 1] = avg; // green imageData.data[i + 2] = avg; // blue imageData.data[i + 3] = 255; //alpha } ctx1.putImageData(imageData, 0, 0); } 像素取反:255 減去對應rgb的值,再賦值給原來的rgb;亮度調節:原來的rgb值隨機的加減一個相同的隨機數。那么想得到對比度變化的圖片,或者模糊圖片呢? 卷積核: 圖片處理領域最常用的就是卷積核,所謂的矩陣的卷積,就是如下圖顯示的那樣,當計算紅色框中的數值的時候,分別先提取周圍綠框中8個數字,然后與施加的那個矩陣中對應位置相乘,然后把各個乘積加在一起,就得到了最終的值了。 ? 比如: (40 x 0)+(42 x 1)+(46 x 0)+ (46 x 0)+(50 x 0)+(55 x 0)+ (52 x 0)+(56 x 0)+(58 x 0)= 42 那怎么就能得到模糊的圖片呢?圖片的像素點和[1,1,1,1,1,1,1,1,1]的矩陣求卷積核,此時的像素點可能超過了255;所以再除以一個基數8;得到的圖片就是加了模糊濾鏡的圖片;對比度呢,就是1.提高白色畫面的亮度;2.讓黑色更黑,降低最低亮度;可以求[0,0,0,0,3,0,0,0,0]的卷積核,同樣的有可能超過255,再減去一個適合的基數150; 現在需要一個卷積核的函數: 函數第一個參數是 canvas上的 imageData 對象 第二個參數是傳入矩陣所對應的數組,如果是下面這樣的矩陣 a b c d e f g h i 則傳入第二個的參數應為 [a,b,c,d,e,f,g,h,i] 第三個參數是除數因子。 第四個參數就是偏移量。 function ConvolutionMatrix(input, m, divisor, offset) { var output =document.createElement("canvas").getContext("2d").createImageData(input); var w = input.width, h = input.height; var iD = input.data, oD = output.data; 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; } //模糊處理 function mohu(){ var imageData = ctx1.getImageData(0, 0, canvas1.width, canvas1.height); var m = [1,1,1,1,1,1,1,1,1]; var output = ConvolutionMatrix(imageData, m, 10,0); ctx1.putImageData(output,0,0); } //對比度處理 function level(){ var imageData = ctx1.getImageData(0, 0, canvas1.width, canvas1.height); var m = [0,0,0,0,3,0,0,0,0]; var output = ConvolutionMatrix(imageData, m, 1,-150); ctx1.putImageData(output,0,0); }圖片也可以有你想要的數據
既然圖片每個像素都是由RGBA四個元素構成,單純以圖片來說用getImageData解析出來的只是一大堆你不必需要知道的數據,那么我們是不是可以把特定的色值看成我們自己的數據呢?
比如:在一張圖片中,我們想把(r:255,g:255:b:255,a:255)白色像素找出來,可以通過getImageData來獲取圖片的數據,通過檢索每個像素的數據是不是對應的rgba,把它們提取出來,再根據圖片的寬度和高度,就可以計算出每個白色像素的位置信息,這些信息就是你想要提取的數據。
在上一步中,我們已經知道了圖片中特定元素獲取相關位置信息的操作,但是圖片是一個很普通的圖片的話,你就需要遍歷imageData中每個信息,有沒有更好的方式減少遍歷呢?
答案是:圖片默認為黑色(r:0,g:0,b:0,a:0)就可以了,但不一定只有一個答案,或許也會有其他好的方法,但原理應該是一樣的。
通過遍歷每個像素的r,如果r!=0再去遍歷這個像素的剩下的g,b,a,這一步比上一步剩下了無用的遍歷,這一步中最重要的就是背景最好是黑色,因為黑色是全零狀態,好計算。
除了上述兩步外,所用到的圖片太大,也會導致遍歷更多,而且我們只關心的是提取數據,而不關心他的大小,最終數據是我們想要的就行,那么我們可以把原圖可以按比例縮放幾倍,利用新的圖片獲取的數據最后在乘以相應的倍數,所得的就是我們想要的數據了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90294.html
摘要:有些時候在端上傳圖片會遇到這種情況,正向的圖片,上傳預覽時就被旋轉了。在使用或者其他軟件旋轉圖片時,圖片旋轉了,但不會改變,由于我們使用的圖片預覽器能夠預處理圖片,使其看起來與旋轉后一致,但上傳圖片時,瀏覽器并不會預處理。 有些時候在web端上傳圖片會遇到這種情況,正向的圖片,上傳預覽時就被旋轉了。 showImg(https://segmentfault.com/img/bVbhxd...
摘要:基于和的一款圖片格式轉換工具完善后會發布成由于本項目當前是,還有很多不足支出,希望大家能指正,共勉。中請求發送必須使用發送數據并且在啟動之前需要對做處理,使用做處理并且設置中的為這樣后端才能正常接收并解析請求中所攜帶的數據。 基于node-canvas 和 express 的一款圖片格式轉換工具,完善后會發布成npm 由于本項目當前是Version@0.0.1,還有很多不足支出,希望大...
摘要:對像素點實現基本的處理操作獲取像素點數據獲取中的像素信息,開始復制的左上角位置的坐標。灰度處理像素取反減去對應的值,再賦值給原來的亮度調節原來的值隨機的加減一個相同的隨機數。 canvas對像素點實現基本的處理操作 // 獲取像素點數據 var canvas = document.getElementById(CanvasElt); var ctx = canvas.get...
摘要:對像素點實現基本的處理操作獲取像素點數據獲取中的像素信息,開始復制的左上角位置的坐標。灰度處理像素取反減去對應的值,再賦值給原來的亮度調節原來的值隨機的加減一個相同的隨機數。 canvas對像素點實現基本的處理操作 // 獲取像素點數據 var canvas = document.getElementById(CanvasElt); var ctx = canvas.get...
閱讀 1058·2021-11-12 10:34
閱讀 985·2021-09-30 09:56
閱讀 668·2019-08-30 15:54
閱讀 2602·2019-08-30 11:14
閱讀 1465·2019-08-29 16:44
閱讀 3203·2019-08-29 16:35
閱讀 2489·2019-08-29 16:22
閱讀 2441·2019-08-29 15:39