手把手教你利用js給圖檔打馬賽克

效果示範

Canvas 簡介

這個 HTML 元素是為了用戶端矢量圖形而設計的。它自己沒有行為，但卻把一個繪圖 API 展現給用戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。

HTML5 标簽用于繪制圖像（通過腳本，通常是 JavaScript）

不過，元素本身并沒有繪制能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實際的繪圖任務

getContext() 方法可傳回一個對象，該對象提供了用于在畫布上繪圖的方法和屬性

本手冊提供完整的 getContext("2d") 對象屬性和方法，可用于在畫布上繪制文本、線條、矩形、圓形等等

标記和 SVG 以及 VML 之間的差異：

标記和 SVG 以及 VML 之間的一個重要的不同是，有一個基于 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。

這兩種方式在功能上是等同的，任何一種都可以用另一種來模拟。從表面上看，它們很不相同，可是，每一種都有強項和弱點。例如，SVG 繪圖很容易編輯，隻要從其描述中移除元素就行。

要從同一圖形的一個标記中移除元素，往往需要擦掉繪圖重新繪制它。

知識點簡介

利用 js 建立圖檔

let img = new Image()
//可以給圖檔一個連結
img.src = 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=826495019,1749283937&fm=26&gp=0.jpg'
//或者本地已有圖檔的路徑
//img.src = './download.jpg'

//添加到HTML中
document.body.appendChild(img)
複制代碼

canvas.getContext("2d")

文法：參數 contextID 指定了您想要在畫布上繪制的類型。目前唯一的合法值是 "2d"，它指定了二維繪圖，并且導緻這個方法傳回一個環境對象，該對象導出一個二維繪圖 API

let ctx = Canvas.getContext(contextID)複制代碼

ctx.drawImage()

JavaScript 文法 1：

在畫布上定位圖像：

context.drawImage(img,x,y);複制代碼

JavaScript 文法 2：

在畫布上定位圖像，并規定圖像的寬度和高度：

context.drawImage(img,x,y,width,height);複制代碼

JavaScript 文法 3：

剪切圖像，并在畫布上定位被剪切的部分：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);複制代碼

ctx.getImageData()

JavaScript 文法 getImageData() 方法傳回 ImageData 對象，該對象拷貝了畫布指定矩形的像素資料。

對于 ImageData 對象中的每個像素，都存在着四方面的資訊，即 RGBA 值：R - 紅色 (0-255) G - 綠色 (0-255) B - 藍色 (0-255) A - alpha 通道 (0-255; 0 是透明的，255 是完全可見的) color/alpha 以數組形式存在，并存儲于 ImageData 對象的 data 屬性中

var imgData=context.getImageData(x,y,width,height);複制代碼

ctx.putImageData()

putImageData() 方法将圖像資料（從指定的 ImageData 對象）放回畫布上。

接下來跟着我一步一步做完這個小功能叭~

step-by-step

準備好我們的圖檔，并添加上我們的方法

let img = new Image()
//可以給圖檔一個連結
img.src = 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=826495019,1749283937&fm=26&gp=0.jpg'
//或者本地已有圖檔的路徑
//img.src = './download.jpg'

//添加到HTML中
document.body.appendChild(img)
複制代碼

接下來寫

addCanvas

方法

function addCanvas() {
  let bt = document.querySelector('button')

        let img = new Image(); //1.準備指派複制一份圖檔
        img.src = './download.jpg'; 
        img.onload = function() { //2.待圖檔加載完成
            let width = this.width
            let height = this.height

   let canvas = document.createElement('canvas') //3.建立畫布
   let ctx = canvas.getContext("2d");  //4.獲得該畫布的内容
         canvas.setAttribute('width', width)  //5.為了統一，設定畫布的寬高為圖檔的寬高
         canvas.setAttribute('height', height)

            ctx.drawImage(this, 0, 0, width, height);  //5.在畫布上繪制該圖檔

            document.body.insertBefore(canvas, bt) //5.把canvas插入到按鈕前面

        }
    }

複制代碼

成功在畫布上得到圖檔：

嗯，我們已經成功走出了成功的一小步，接下來是幹什麼呢？....... 嗯，我們需要利用原生的

onmouseup

和

onmousedown

事件，代表我們按下滑鼠這個過程，那麼這兩個事件添加到哪呢？

沒錯，既然我們要在 canvas 上進行馬賽克操作，那我們必然要給 canvas 元素添加這兩個事件

考慮到我們建立 canvas 的過程複雜了一點，我們做一個子產品封裝吧！

function addCanvas() {
        let bt = document.querySelector('button')

        let img = new Image();
        img.src = './download.jpg'; //這裡放自己的圖檔
        img.onload = function() {
            let width = this.width
            let height = this.height

            let {
                canvas,
                ctx
            } = createCanvasAndCtx(width, height)  //對象解構接收canvas和ctx

            ctx.drawImage(this, 0, 0, width, height);

            document.body.insertBefore(canvas, bt)

        }
    }

    function createCanvasAndCtx(width, height) {
        let canvas = document.createElement('canvas')
        canvas.setAttribute('width', width)
        canvas.setAttribute('height', height)
        canvas.setAttribute('onmouseout', 'end()') //修補滑鼠不在canvas上離開的更新檔
        canvas.setAttribute('onmousedown', 'start()')  //添加滑鼠按下
        canvas.setAttribute('onmouseup', 'end()') //添加滑鼠彈起
        let ctx = canvas.getContext("2d");
        return {
            canvas,
            ctx
        }
    }

 function start() {
            let canvas = document.querySelector('canvas')
            canvas.onmousemove = () => {
                console.log('你按下了并移動了滑鼠')
            }
        }

        function end() {
            let canvas = document.querySelector('canvas')
            canvas.onmousemove = null
        }
複制代碼

測試一下我們的

start()

和

end()

是否生效了

嗯，目前來看，我們的代碼依然如我們所願的正常工作

接下來的挑戰更加嚴峻，我們需要去擷取像素和處理像素，讓我們再重寫 start() 函數

function start() {
    let img = document.querySelector('img')
    let canvas = document.querySelector('canvas')
    let ctx = canvas.getContext("2d");
    imgData = ctx.getImageData(0, 0, img.clientWidth, img.clientHeight);
    canvas.onmousemove = (e) => {
        let w = imgData.width; //1.擷取圖檔寬高
        let h = imgData.height;

        //馬賽克的程度，數字越大越模糊
        let num = 10;

        //擷取滑鼠目前所在的像素RGBA
        let color = getXY(imgData, e.offsetX, e.offsetY);

        for (let k = 0; k < num; k++) {
for (let l = 0; l < num; l++) {
                //設定imgData上坐标為(e.offsetX + l, e.offsetY + k)的的顔色
                setXY(imgData, e.offsetX + l, e.offsetY + k, color);
            }
        }
        //更新canvas資料
        ctx.putImageData(imgData, 0, 0);
    }
}

//這裡為你提供了setXY和getXY兩個函數，如果你有興趣，可以去研究擷取的原理
function setXY(obj, x, y, color) {
    var w = obj.width;
    var h = obj.height;
    var d = obj.data;
    obj.data[4 * (y * w + x)] = color[0];
    obj.data[4 * (y * w + x) + 1] = color[1];
    obj.data[4 * (y * w + x) + 2] = color[2];
    obj.data[4 * (y * w + x) + 3] = color[3];
}

function getXY(obj, x, y) {
    var w = obj.width;
    var h = obj.height;
    var d = obj.data;
    var color = [];
    color[0] = obj.data[4 * (y * w + x)];
    color[1] = obj.data[4 * (y * w + x) + 1];
    color[2] = obj.data[4 * (y * w + x) + 2];
    color[3] = obj.data[4 * (y * w + x) + 3];
    return color;
}
複制代碼

嗯，我們離成功不遠拉，最後一步就是生成圖檔

好在 canavs 給我們提供了直接的方法，可以直接将畫布導出為 Base64 編碼的圖檔：

function generateImg() {
    let canvas = document.querySelector('canvas')
    var newImg = new Image();
    newImg.src = canvas.toDataURL("image/png");
    document.body.insertBefore(newImg, canvas)
}
複制代碼

最終效果：

是不是無比輕松呢~，來看看你手寫的代碼是否和下面一樣叭：

完整代碼

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta >
<title>Document</title>
</head>

<body>

<body>
<img src="./download.jpg">
<button onclick="addCanvas()">生成Canvas</button>
<button onclick="generateImg()">生成圖檔</button>
</body>
<script>
function addCanvas() {
let bt = document.querySelector('button')

let img = new Image();
img.src = './download.jpg'; //這裡放自己的圖檔
img.onload = function() {
let width = this.width
let height = this.height

let {
canvas,
ctx
                } = createCanvasAndCtx(width, height)

ctx.drawImage(this, 0, 0, width, height);

document.body.insertBefore(canvas, bt)

            }
        }

function createCanvasAndCtx(width, height) {
let canvas = document.createElement('canvas')
canvas.setAttribute('width', width)
canvas.setAttribute('height', height)
canvas.setAttribute('onmouseout', 'end()')
canvas.setAttribute('onmousedown', 'start()')
canvas.setAttribute('onmouseup', 'end()')
let ctx = canvas.getContext("2d");
return {
canvas,
ctx
            }
        }

function start() {
let img = document.querySelector('img')
let canvas = document.querySelector('canvas')
let ctx = canvas.getContext("2d");
imgData = ctx.getImageData(0, 0, img.clientWidth, img.clientHeight);
canvas.onmousemove = (e) => {
let w = imgData.width; //1.擷取圖檔寬高
let h = imgData.height;

//馬賽克的程度，數字越大越模糊
let num = 10;

//擷取滑鼠目前所在的像素RGBA
let color = getXY(imgData, e.offsetX, e.offsetY);

for (let k = 0; k < num; k++) {
for (let l = 0; l < num; l++) {
//設定imgData上坐标為(e.offsetX + l, e.offsetY + k)的的顔色
setXY(imgData, e.offsetX + l, e.offsetY + k, color);
                    }
                }
//更新canvas資料
ctx.putImageData(imgData, 0, 0);
            }
        }

function generateImg() {
let canvas = document.querySelector('canvas')
var newImg = new Image();
newImg.src = canvas.toDataURL("image/png");
document.body.insertBefore(newImg, canvas)
        }

function setXY(obj, x, y, color) {
var w = obj.width;
var h = obj.height;
var d = obj.data;
obj.data[4 * (y * w + x)] = color[0];
obj.data[4 * (y * w + x) + 1] = color[1];
obj.data[4 * (y * w + x) + 2] = color[2];
obj.data[4 * (y * w + x) + 3] = color[3];
        }

function getXY(obj, x, y) {
var w = obj.width;
var h = obj.height;
var d = obj.data;
var color = [];
color[0] = obj.data[4 * (y * w + x)];
color[1] = obj.data[4 * (y * w + x) + 1];
color[2] = obj.data[4 * (y * w + x) + 2];
color[3] = obj.data[4 * (y * w + x) + 3];
return color;
        }

function end() {
let canvas = document.querySelector('canvas')
canvas.onmousemove = null
        }
</script>
</body>

</html>
複制代碼

當然，你可以做更多創作，比如上面打的馬賽克是正方形的，你可以利用你的數學知識讓其變為圓形，以圓心為滑鼠中心擴散

手把手教你利用js給圖檔打馬賽克

效果示範

Canvas 簡介

知識點簡介

step-by-step

完整代碼

繼續閱讀

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

403 Forbidden，You don't have permission to access / on this server.Forbidden

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

詳解STM32單片機的堆棧

JS生成uuid的四種方法

layui多任務上傳添加進度條