js給圖片打馬賽克的方法示例
本文主要主要介紹了js給圖片打馬賽克的方法示例，分享給大家，具體如下：
效果演示
Canvas簡介
這個 HTML 元素是為了客戶端矢量圖形而設(shè)計的。它自己沒有行為，但卻把一個繪圖 API 展現(xiàn)給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。
HTML5 標簽用于繪制圖像（通過腳本，通常是 JavaScript）
不過， 元素本身并沒有繪制能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實際的繪圖任務(wù)
getContext() 方法可返回一個對象，該對象提供了用于在畫布上繪圖的方法和屬性
本手冊提供完整的 getContext(“2d”) 對象屬性和方法，可用于在畫布上繪制文本、線條、矩形、圓形等等
標記和 SVG 以及 VML 之間的差異：
標記和 SVG 以及 VML 之間的一個重要的不同是， 有一個基于 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。
這兩種方式在功能上是等同的，任何一種都可以用另一種來模擬。從表面上看，它們很不相同，可是，每一種都有強項和弱點。例如，SVG 繪圖很容易編輯，只要從其描述中移除元素就行。
要從同一圖形的一個 標記中移除元素，往往需要擦掉繪圖重新繪制它。
知識點簡介
利用js創(chuàng)建圖片
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”)
語法：
參數(shù) contextID 指定了您想要在畫布上繪制的類型。當前唯一的合法值是 “2d”，它指定了二維繪圖，并且導致這個方法返回一個環(huán)境對象，該對象導出一個二維繪圖 API
let ctx = Canvas.getContext(contextID)
ctx.drawImage()
JavaScript 語法 1：
在畫布上定位圖像：
context.drawImage(img,x,y);
JavaScript 語法 2：
在畫布上定位圖像，并規(guī)定圖像的寬度和高度：
context.drawImage(img,x,y,width,height);
JavaScript 語法 3：
剪切圖像，并在畫布上定位被剪切的部分：
JavaScript 語法
getImageData() 方法返回 ImageData 對象，該對象拷貝了畫布指定矩形的像素數(shù)據(jù)。
對于 ImageData 對象中的每個像素，都存在著四方面的信息，即 RGBA 值：
R - 紅色 (0-255)
G - 綠色 (0-255)
B - 藍色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可見的)
color/alpha 以數(shù)組形式存在，并存儲于 ImageData 對象的 data 屬性中
var imgData=context.getImageData(x,y,width,height);
ctx.putImageData()
putImageData() 方法將圖像數(shù)據(jù)（從指定的 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.準備賦值復(fù)制一份圖片
img.src = './download.jpg';
img.onload = function() { //2.待圖片加載完成
let width = this.width
let height = this.height
let canvas = document.createElement('canvas') //3.創(chuàng)建畫布
let ctx = canvas.getContext("2d"); //4.獲得該畫布的內(nèi)容
canvas.setAttribute('width', width) //5.為了統(tǒng)一，設(shè)置畫布的寬高為圖片的寬高
canvas.setAttribute('height', height)
ctx.drawImage(this, 0, 0, width, height); //5.在畫布上繪制該圖片
document.body.insertBefore(canvas, bt) //5.把canvas插入到按鈕前面
}
}
成功在畫布上得到圖片：
嗯，我們已經(jīng)成功走出了成功的一小步，接下來是干什么呢？…嗯，我們需要利用原生的onmouseup和onmousedown事件，代表我們按下鼠標這個過程，那么這兩個事件添加到哪呢？
沒錯，既然我們要在canvas上進行馬賽克操作，那我們必然要給canvas元素添加這兩個事件
考慮到我們創(chuàng)建canvas的過程復(fù)雜了一點，我們做一個模塊封裝吧！
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) //對象解構(gòu)接收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()是否生效了
嗯，目前來看，我們的代碼依然如我們所愿的正常工作
接下來的挑戰(zhàn)更加嚴峻，我們需要去獲取像素和處理像素，讓我們再重寫start()函數(shù)
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;
//馬賽克的程度，數(shù)字越大越模糊
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++) {
//設(shè)置imgData上坐標為(e.offsetX + l, e.offsetY + k)的的顏色
setXY(imgData, e.offsetX + l, e.offsetY + k, color);
}
}
//更新canvas數(shù)據(jù)
ctx.putImageData(imgData, 0, 0);
}
}
//這里為你提供了setXY和getXY兩個函數(shù)，如果你有興趣，可以去研究獲取的原理
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 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, 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;
//馬賽克的程度，數(shù)字越大越模糊
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++) {
//設(shè)置imgData上坐標為(e.offsetX + l, e.offsetY + k)的的顏色
setXY(imgData, e.offsetX + l, e.offsetY + k, color);
}
}
//更新canvas數(shù)據(jù)
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>
當然，你可以做更多創(chuàng)作，比如上面打的馬賽克是正方形的，你可以利用你的數(shù)學知識讓其變?yōu)閳A形，以圓心為鼠標中心擴散
你也可以選擇完善一些過程，例如馬賽克位置打錯了，可以選擇將畫布清空然后重新開始~
或者做一些善后處理，導出圖片后隱藏canvas畫布
到此這篇關(guān)于js給圖片打馬賽克的方法示例的文章就介紹到這了,更多相關(guān)js 圖片馬賽克內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Html5規(guī)范中規(guī)定自定義屬性需要添加前綴data-,目的是提供與渲染無關(guān)的信息,讀取的時候是通過dataset對象，使用”.”來獲取屬性，需要去掉data-前綴2023-06-06
這篇文章主要為大家詳細介紹了微信小程序button組件的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
谷歌瀏覽器不支持showModalDialog模態(tài)對話框的解決方法
谷歌瀏覽器不支持showModalDialog模態(tài)對話框和無法返回returnValue，這個問題，想必很多朋友都有遇到過吧，解決方法很簡單，下面的思路，大家可以看看2014-09-09
本篇文章主要介紹了js中定時器的使用方法。需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要介紹了Web打印解決方案之證件套打的實現(xiàn)思路的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
微信小程序loading組件顯示載入動畫用法示例【附源碼下載】
這篇文章主要介紹了微信小程序loading組件顯示載入動畫用法,結(jié)合實例形式分析了loading組件顯示載入動畫的相關(guān)事件操作與屬性設(shè)置技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
JavaScript中使用import 和require打包后實現(xiàn)原理分析
這篇文章主要介紹了JavaScript中使用import 和require打包后實現(xiàn)原理分析,需要的朋友可以參考下2018-03-03
微信小程序websocket聊天室的實現(xiàn)示例代碼
這篇文章主要介紹了微信小程序websocket聊天室的實現(xiàn)示例代碼，小程序本身對http、websocket等連接均有諸多限制，所以這次項目選擇了node.js自帶的ws模塊。感興趣的可以參考一下2019-02-02
javascript length屬性是返回字符串的字符數(shù)目，length可以返回function的參數(shù)數(shù)目。接下來，通過本篇文章給大家介紹javascript length屬性，對javascript length屬性感興趣的朋友可以參考下本篇文章2015-11-11
我們在燒水的過程中去干了別的事情,就屬于異步模式,異步模式中不會等待異步任務(wù)的結(jié)束才開始執(zhí)行下一個同步的任務(wù),都是開啟過后就立即執(zhí)行下一個任務(wù),下面這篇文章主要給大家介紹了如何通過一文帶你簡單封裝JS下的異步任務(wù)對象的相關(guān)資料,需要的朋友可以參考下2022-11-11