canva實踐小例項 馬賽克效果

前面給大家帶來了操作畫素的api，此時此刻，我覺得應該配以小例項來進行進一步的說明和演示，以便給大家帶來更寬廣的視野和靈感，你們看了我的那麼多的文章，應該是懂我的風格，廢話不多說，進入正題：

大家看看這張圖，這就是馬賽克的效果，整個圖就是一顆顆很大的畫素點構成的，當然這裡說的畫素點指的不是一畫素，而是乙個畫素點可能是由幾個畫素或者是十幾個畫素構成的，畫素點越大，影象就約模糊，畫素點越小，越清晰，什麼，你對上圖無感？好吧，我們看一下現實生活中你見過的馬賽克：

看，左邊的大美女，打上馬賽克，立馬變神秘了，那馬賽克糾結是乙個什麼原理呢？

對比上圖的左右兩個臉，右邊的臉雖然看不清，但還是能看清輪廓的，而且右邊的馬賽克部分畫素點非常大，而左邊的呢，幾乎看不到畫素點，那麼左邊的是不是就不是由畫素點構成的呢？我們把圖放大n倍來看看：

上圖是截圖的馬賽克的一部分，放大後可以清除的看到，影象是由乙個個畫素點構成的，可以發現，馬賽克的畫素顆粒也是由許多的畫素點構成的，只是這些顆粒的顏色是乙個的，縮小就感覺是乙個大的畫素顆粒，而偏不的則是乙個個小的畫素點，各自顏色不一樣，才形象非常細膩的影象，由此可見，要想做馬賽克效果，只需要將乙個區域內的畫素的的顏色用裡面乙個隨機的顏色替代，就會使得影象模糊，這樣縮小了看就是馬賽克效果了，而且這個區域也大，影象越模糊，越小，則影象越清晰！

知道了馬賽克的原理，那麼我們就可以通過操作畫素來製作馬賽克效果了，怎麼做呢？比如將一整張圖做成馬賽克效果，那麼，如果我們將這張圖等分成n份，且每乙份隨機在這個區域裡找乙個畫素點的顏色，然後將這個區域的顏色都設為這個顏色，全部操作完，馬賽克就做完了，哈哈，挺抽象的，那老規矩，跟著我一步一步的做吧：

首先我們在畫布上引進來一張圖，然後我們建乙個函式，用於繪製馬賽克（其目的我再說一般，一是必須加裝完成，才能進行畫素操作，二是結構更清晰，便於理解）

此函式用於後面的畫素操作

我們將畫布的大小設為的2倍，右邊用於顯示馬賽克的圖

function

draw(obj)

一模一樣雙胞胎，哈哈，接下來就是醉關鍵的地方了，就是如何將乙個區域的畫素點用乙個顏色替代，我們畫乙個圖來示意一下：

看看上圖，圖畫的很粗糙哈（俗話說圖糙理不糙），比如說是100*100畫素的圖，那麼原來是由1*1畫素的點構成的，現在我們等分成10份，乙份的畫素點就是10*10，那麼這份的畫素點在裡面隨機設定乙個顏色，然後同理操作所有的，就成了乙個只顯示10分之一影象的馬賽克了

這裡引用我們原來寫的獲取某一點的顏色的函式和設定某一點的顏色的函式，可以作為通用方法：

function

getxy(obj,x,y)
function
setxy(obj,x,y,color)

//

建立乙個新的imagedata物件
var newimg =ctx.createimagedata(obj.width,obj.height);
//馬賽克的程度，數字越大越模糊
var num = 5;
//等分畫布
var stepw = w/num;
var steph = h/num;
//這裡是迴圈畫布的畫素點

為了顯得好看一點，我們只是取了乙個比較小的值，現在五分之一的畫素點，如果是十分之一，得到是就是這樣的，值在num的地方修改：

具體效果看這裡——canvas馬賽克效果

這是整張圖做成馬賽克，能不能跟上面的美女一樣，做成區域性的馬賽克呢？其實也很簡單，我們起初獲取的是整張圖的畫素，現在我們只獲取區域性我們想要的部分的畫素就可以了：

是不是跟剛開始的那個美女很像了，可能有的同學注意到，我有時候建立了乙個新的imagedata物件，有的時候沒有，那到底什麼時候需要建立新的imagedata物件，什麼時候不需要呢？原則上說，如果你操作的畫素不在原圖上，則需要新建立乙個imagedata物件，但是也不是絕對的，你在原圖上操作畫素，也是可以建立乙個新的imagedata物件的，具體還是看需要！

上面的區域性馬賽克效果看這裡——canvas區域性馬賽克效果

今天就講到這裡，後面要是有時間，在給幾個例子給大家學習一下！

OpenCV 馬賽克效果

馬賽克的原理，即將對應需馬賽克處理區域內的畫素，按小方塊劃分，將每一塊小方塊內不同顏色的畫素使用同一顏色進行替代。如下 import cv2 import numpy as np img cv2.imread test.png 1 imginfo img.shape height imginfo 0...

WPF水滴馬賽克效果

什麼是馬賽克 mask 先來看一下程式的執行結果 要實現這個效果，我們是通過的clip屬性。的cilp屬性 用於確定剪輯區域大小的幾何圖形。乙個典型的例子如下 使用的 是msdn上的 使用了clip屬性之後 compositiontarget 是乙個類，表示正在其上繪製您的應用程式的顯示圖面。wpf...

shader馬賽克效果實現

原理 畫素化實際上與馬賽克的生成一樣，我們可以通過對圖形uv值進行放大，然後擷取整數部分，在縮放回原來大小，此時uv的精度丟失了，形成了馬賽克的效果。例如 兩個點p1 0.1,0 p2 0.12,0 先同時放大10倍獲得，點為p1 1.0,0 p2 1.2,0 此時我們只取點的整數部分得到p1 1,...