JS實現馬賽克圖片效果
整體邏輯:獲取oldImg圖片的畫素資訊,以5*5為單位,在5*5單位中取到一個隨機畫素並賦值給5*5中的所有畫素點,加以迴圈,以實現馬賽克效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: grey;
text-align: center;
}
#myCanvas {
background-color: rgba(250, 0, 0, 0.3);
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="400"></canvas>
</body>
<script type="text/javascript">
window.onload = function() {
var myCanvas = document.getElementById('myCanvas');
var painting = myCanvas.getContext('2d');
//生成一個圖片節點
var imgNode = new Image();
imgNode.src = '1.jpg';
//呼叫函式
drawImg(imgNode);
function drawImg(imgNode) {
//圖片載入後執行馬賽克實現語句:5個一組取到隨機畫素賦給新圖裡的五個一組
imgNode.onload = function() {
painting.drawImage(imgNode, 0, 0, 250, 400);
var size = 5;
//獲取老圖所有畫素點
var oldImg = painting.getImageData(0, 0, 250, 400)
//建立新影像素物件
var newImg = painting.createImageData(250, 400)
for(var i = 0; i < oldImg.width; i++) {
for(var j = 0; j < oldImg.height; j++) {
//從5*5中獲取單個畫素資訊
var color = getPxInfo(oldImg, Math.floor(i * size + Math.random() * size), Math.floor(j * size + Math.random() * size))
//寫入單個畫素資訊
for(var a = 0; a < size; a++) {
for(var b = 0; b < size; b++) {
// (a,b)
setPxInfo(newImg, i * size + a, j * size + b, color);
}
}
}
}
painting.putImageData(newImg, 250, 0)
}
}
//讀取單個畫素資訊
function getPxInfo(imgDate, x, y) {
var colorArr = [];
var width = imgDate.width;
colorArr[0] = imgDate.data[(width * y + x) * 4 + 0]
colorArr[1] = imgDate.data[(width * y + x) * 4 + 1]
colorArr[2] = imgDate.data[(width * y + x) * 4 + 2]
colorArr[3] = imgDate.data[(width * y + x) * 4 + 3]
return colorArr;
}
//寫入單個畫素資訊
function setPxInfo(imgDate, x, y, colors) {
//(x,y) 之前有多少個畫素點 == width*y + x
var width = imgDate.width;
imgDate.data[(width * y + x) * 4 + 0] = colors[0];
imgDate.data[(width * y + x) * 4 + 1] = colors[1];
imgDate.data[(width * y + x) * 4 + 2] = colors[2];
imgDate.data[(width * y + x) * 4 + 3] = colors[3];
}
}
</script>
</html>
相關文章
- canvas實現圖片馬賽克Canvas
- 馬賽克效果的JS圖片切換程式碼JS
- three.js 將圖片馬賽克化JS
- js拖動實現左右圖片對比效果JS
- JS實現 類似圖片3D效果JS3D
- 破解圖片馬賽克
- 圖片模糊效果實現(RenderScript)
- JS實現有點炫的圖片展示效果-圖片解體和組合JS
- js滑鼠移動實現圖片立體滾動效果JS
- PHP實現水印效果(文字、圖片)PHP
- 滑鼠放在圖片實現高亮效果
- JS實現動態瀑布流及放大切換圖片效果(js案例)JS
- asp.net+js方式實現的幻燈圖片效果展示ASP.NETJS
- (H5)canvas實現裁剪圖片和馬賽克功能,以及又拍雲上傳圖片H5Canvas
- css實現文字和圖片居中效果CSS
- 實現背景圖片的全屏拉伸效果
- canvas實現的圖片放大鏡效果Canvas
- 強大好用的圖片編輯效果實現,支援塗鴉、編輯、馬賽克,可撤銷和恢復
- 短視訊app原始碼,實現原生js圖片預覽效果APP原始碼JS
- JS互動 點選WKWebView中的圖片實現預覽效果JSWebView
- 巧用 CSS 把圖片馬賽克化CSS
- opencv-圖片馬賽克處理OpenCV
- javascript實現滑鼠懸浮圖片實現抖動效果JavaScript
- 實現圖片染色效果的三種方式
- jQuery實現圖片尺寸自適應效果jQuery
- 滑鼠懸浮圖片實現翻轉效果
- 滑鼠懸浮圖片實現縮放效果
- 圖片懶載入js實現JS
- Android 載入網路圖片 以及實現圓角圖片效果Android
- 原生JS實現輪播圖的效果JS
- 圖片放大鏡效果實現過程詳解
- css實現圖片灰度效果程式碼例項CSS
- 點選按鈕實現圖片切換效果
- 分享 用CSS實現無圖片圓角效果CSS
- 用js(hover )+css實現下拉框效果(有效果圖)JSCSS
- 使用CSS的clip-path實現圖片剪下效果CSS
- 滑鼠懸浮實現圖片動畫上下切換效果動畫
- HTML CSS 實現滑鼠懸停時圖片拉近效果HTMLCSS