js給圖片打馬賽克的方法示例

阿新 • • 發佈：2021-05-18

本文主要主要介紹了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,y,width,height);

JavaScript 語法 3：
剪下影象，並在畫布上定位被剪下的部分：

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,height);

ctx.putImageData()

putImageData() 方法將影象資料（從指定的 ImageData 物件）放回畫布上。

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

在這裡插入圖片描述

step-by-step

準備好我們的圖片，並新增上我們的方法

<body>
    <img src="./download.jpg">
    <button onclick="addCanvas()">生成Canvas</button>
    <button onclick="generateImg()">生成圖片</button>
</body>

在這裡插入圖片描述

接下來寫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',h程式設計客棧eight)
   
            ctx.drawImage(this,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,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.querySelectowww.cppcns.comr('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,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);
    }
}

//這裡為你提供了setXY和getXY兩個函式，如果你有興趣，可以去研究獲取的原理
function setXY(obj,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,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 name="viewport" content="width=device-width,initial-scale=1.0">
    <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,height);

                document.body.insertBefore(canvas,bt)

            }
        }

        function crea程式設計客棧teCanvasAndCtx(width,height) {
            let canvas = document.createElement('canvas')
            canvas.setAttribute('width',width)
            canvas.setAttribute('height',height)
            canvas.se程式設計客棧tAttribute('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,img.clientHeight);
            canvas.onmousemove = (e) => {
                let w = imgData.width; //1.獲取圖片寬高
                let h = imgData.height;

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

                //獲取滑鼠當前所在的畫素RGBA
                let color = getXY(imgData,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,color);
                    }
                }
                //更新canvas資料
                ctx.putImageData(imgData,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,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,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>

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

你也可以選擇完善一些過程，例如馬賽克位置打錯了，可以選擇將畫布清空然後重新開始~
或者做一些善後處理，匯出圖片後隱藏canvas畫布

到此這篇關於js給圖片打馬賽克的方法示例的文章就介紹到這了,更多相關js 圖片馬賽克內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！