效果圖
打碼效果.PNG
高度打碼.PNG
輕微打碼.PNG
代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#canvas {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #cccccc
}
</style>
</head>
<body>
<canvas id="canvas">您的瀏覽器不支持canvas，<a >立即升級</a></canvas>
<script>
var canvas = document.getElementById('canvas')
if (canvas.getContext) {
var ctx = canvas.getContext('2d')
var img = new Image()
img.src = "黃曉明.jpg" //————————————————你可以選擇要打碼圖片的路徑
img.onload = function () {
canvas.width = img.width * 2
canvas.height = img.height
//插入圖片
ctx.drawImage(this, 0, 0, img.width, img.height)
//打碼
var mskSize = 8 //————————————————您可以選擇打碼的程度，數(shù)越大越看不清
var imageData = ctx.getImageData(0, 0, img.width, img.height)
for (var x = 0; x < img.width; x += mskSize) {
for (var y = 0; y < img.height; y += mskSize) {
//在mskSize x mskSize大小的像素區(qū)域中隨機(jī)取一個顏色樣式
var color = getPointColor(imageData, parseInt(x + Math.random() * mskSize), parseInt(y + Math.random() * mskSize))
for (var a = x, n = 0; n < mskSize; a++ , n++) {
for (var b = y, m = 0; m < mskSize; b++ , m++) {
//把取到的顏色渲染到mskSize x mskSize大小的像素區(qū)域中
setPointColor(imageData, a, b, color)
}
}
}
}
ctx.putImageData(imageData, img.width + 1, 0) //在右側(cè)繪制打碼后的圖片
}
//封裝兩個方法：取像素點(diǎn)、設(shè)置像素點(diǎn)
//獲取某像素點(diǎn)的color
function getPointColor(imageData, x, y) {
var color = []
var data = imageData.data,
w = imageData.width,
h = imageData.height
var num = y * w + x
color[0] = data[4 * num]
color[1] = data[4 * num + 1]
color[2] = data[4 * num + 2]
color[3] = data[4 * num + 3]
return color
}
//設(shè)置某像素點(diǎn)的color
function setPointColor(imageData, x, y, color) {
var data = imageData.data,
w = imageData.width,
h = imageData.height
var num = y * w + x
data[4 * num] = color[0]
data[4 * num + 1] = color[1]
data[4 * num + 2] = color[2]
data[4 * num + 3] = color[3]
}
}
</script>
</body>
</html>
