canvas 实现图片打码

我的收获

对基础api的掌握
- ctx.drawImage(img, x, y, img.width, img.height)
- 获取像素 ctx.getImageData(x1, y1, x2, y2) 返回的对象有三个属性，width、height、data（所有像素的rgba做成的数组）
- 设置像素ctx.putImageData(imageData, x, y)
- 创建像素区域，默认黑色透明 ctx.createImageData(width, height)
难点
- 封装两个方法：取像素点的rgba、设置像素点的rgba
- 打码：取一块像素区域中的rbga覆盖整个像素区域

效果

打码效果.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>

# JavaScript, canvas, h5, html

微信

canvas 实现图片打码

我的收获

效果

代码如下

喜欢这篇文章？打赏一下作者吧

评论

链接

分类

标签云

最新文章

归档

标签

最新文章

归档

标签

Your browser is out-of-date!