效果图
打码效果.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 href="https://www.google.cn/intl/zh-CN/chrome/">立即升级</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 //————————————————您可以选择打码的程度，数越大越看不清
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大小的像素区域中随机取一个颜色样式
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大小的像素区域中
setPointColor(imageData, a, b, color)
}
}
}
}
ctx.putImageData(imageData, img.width + 1, 0) //在右侧绘制打码后的图片
}
//封装两个方法：取像素点、设置像素点
//获取某像素点的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
}
//设置某像素点的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>
