首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

使用canvas一步步实现图片打码功能的方法

Posted in HTML / CSS onJune 17, 2019

原文地址
https://github.com/MY729/front-common-funtion/blob/master/picture-code-demo/README.md

预览地址
https://my729.github.io/front-common-funtion/picture-code-demo/picture-code.html

准备工作

demo 基于 vue + elelment-ui

首先创建一个html文件, 并引入 vue 和 elelment-ui(注意还有样式文件)

<!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>
  <!-- elelment-ui样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  
</body>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 引入element-ui -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</html>

接下来就可以写我们的打码功能啦

实现思路

  • 创建canvas画布，并将要打码的图片绘制上去
  • 监听鼠标在图片上的点击，移动、松开事件，在canvas画布上绘制要打码的区域
  • 处理绘制的打码区域
  • 保存打码后的图片

将要打码的图片绘制到canvas画布上

// 初始化 绘制图片
toCode (currentImg) {
  this.$nextTick(() => {
    // 获取将要绘制的canvas的父元素节点
    let parentId = document.getElementById('parentId')
    // 初始化图片
    let drawImg = new Image()
    drawImg.setAttribute('crossOrigin', 'anonymous')
    drawImg.crossOrigin = 'Anonymous'
    drawImg.src = currentImg
    // 创建canvas元素并添加到父节点中
    let addCanvas = document.createElement('canvas')
    parentId.appendChild(addCanvas)
    let canvas = parentId.lastElementChild
    canvas.id = 'imgCanvas'
    if (canvas.getContext) {
      let ctx = canvas.getContext('2d')
      // 绘制图片
      drawImg.onload = function () {
        canvas.width = 720
        canvas.height = 500
        ctx.drawImage(drawImg, 0, 0, 720, 500)
      }
    }
  })
}

点击打码按钮，绘制打码区域

思路：

  • 鼠标点击，获取点击时的坐标，每次点击前可能会存在打过码的区域，先清除画布，重新绘制图片
  • 鼠标移动，开始绘制打码的矩形，通过移动的坐标和上面点击的点坐标确定绘制的矩形坐标和宽高
  • 将绘制的打码矩形，分割成一个个宽高15像素的小正方形，并给每个小正方形生产随机颜色
  • 鼠标松开，停止绘制矩形
// 打码
dialogCode (img) {
  let parentId = document.getElementById('parentId')
  let canvas = document.getElementById('imgCanvas')
  if (canvas.getContext) {
    let ctx = canvas.getContext('2d')
    let drawImage = new Image()
    drawImage.crossOrigin = 'Anonymous'
    drawImage.src = img
    drawImage.onload = () => {
      ctx.drawImage(drawImage, 0, 0, 720, 500)
    }
    // 鼠标点击
    parentId.onmousedown = e => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      ctx.drawImage(drawImage, 0, 0, 720, 500)
      this.flag = true
      this.clickX = e.offsetX // 鼠标点击时的X
      this.clickY = e.offsetY // 鼠标点击时的Y
    }
    // 鼠标松开
    parentId.onmouseup = () => {
      this.flag = false
    }
    // 鼠标按下
    parentId.onmousemove = e => {
      if (this.flag) {
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        ctx.drawImage(drawImage, 0, 0, 720, 500)
        ctx.beginPath()
        let pixels = [] // 二维数组，每个子数组有5个值（绘制矩形左上角的X坐标、y坐标，矩形的宽、高，生成的4位随机数用于颜色值）
        for (let x = 0; x < (e.offsetX - this.clickX) / 15; x++) {
          for (let y = 0; y < (e.offsetY - this.clickY) / 15; y++) {
            pixels.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math.random() * 9999)])
          }
          for (let y = 0; y > (e.offsetY - this.clickY) / 15; y--) {
            pixels.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math.random() * 9999)])
          }
        }
        for (let x = 0; x > (e.offsetX - this.clickX) / 15; x--) {
          for (let y = 0; y > (e.offsetY - this.clickY) / 15; y--) {
            pixels.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math.random() * 9999)])
          }
          for (let y = 0; y < (e.offsetY - this.clickY) / 15; y++) {
            pixels.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math.random() * 9999)])
          }
        }
        // 遍历数组绘制小正方形块
        for (let i = 0; i < pixels.length; i++) {
          ctx.fillStyle = '#bf' + pixels[i][4]
          ctx.fillRect(pixels[i][0], pixels[i][1], pixels[i][2], pixels[i][3])
        }
        ctx.fill()
        ctx.closePath()
      }
    }
  }
}

保存

// 保存
dialogUpload () {
  let canvas = document.getElementById('imgCanvas')
  let tempImg = canvas.toDataURL('image/png')
  let imgURL = document.getElementById('imgURL')
  imgURL.crossOrigin = 'Anonymous'
  imgURL.src = tempImg
}

源码

复制到html文件可预览

<!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>使用canvas一步步实现图片打码功能</title>
  <!-- elelment-ui样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style type="text/css">
    .rc-code__buttons {
      margin: 20px;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="rc-code__buttons">
      <h1>vue项目中使用canvas一步步实现图片打码功能</h1>
      <el-button type="primary" @click="dialogCode(data.img_url)">打码</el-button>
      <el-button type="success" @click="dialogUpload()">保存</el-button>
    </div>
    <el-row>
      <el-col :span="12"><h3>点击打码按钮，在图片上绘制打码区域； 点击保存，生成打码后的图片</h3></el-col>
      <el-col :span="12"><h3>保存后的图片</h3></el-col>
      <el-col :span="12"><div id="parentId"></div></el-col>
      <el-col :span="12"><img id="imgURL"/></el-col>
    </el-row>
  </div>
</body>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 引入element-ui -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
  el: '#app',
  data () {
    return {
      data: {
        img_url: 'https://avatars0.githubusercontent.com/u/26196557?s=460&v=4'
      },
      flag: false, // 是否绘制矩形
      clickX: '', // 开始绘制矩形时，鼠标点击时的x坐标
      clickY: '' // 开始绘制矩形时，鼠标点击时的y坐标
    }
  },
  mounted() {
    this.toCode(this.data.img_url)
  },
  methods: {
    // 初始化 绘制图片
    toCode (currentImg) {
      this.$nextTick(() => {
        let parentId = document.getElementById('parentId')
        let drawImg = new Image()
        drawImg.setAttribute('crossOrigin', 'anonymous')
        drawImg.crossOrigin = 'Anonymous'
        drawImg.src = currentImg
        let addCanvas = document.createElement('canvas')
        parentId.appendChild(addCanvas)
        let canvas = parentId.lastElementChild
        canvas.id = 'imgCanvas'
        if (canvas.getContext) {
          let ctx = canvas.getContext('2d')
          drawImg.onload = function () {
            canvas.width = 720
            canvas.height = 500
            ctx.drawImage(drawImg, 0, 0, 720, 500)
          }
        }
      })
    },
    // 打码
    dialogCode (img) {
      let parentId = document.getElementById('parentId')
      let canvas = document.getElementById('imgCanvas')
      if (canvas.getContext) {
        let ctx = canvas.getContext('2d')
        let drawImage = new Image()
        drawImage.crossOrigin = 'Anonymous'
        drawImage.src = img
        drawImage.onload = () => {
          ctx.drawImage(drawImage, 0, 0, 720, 500)
        }
        parentId.onmousedown = e => {
          ctx.clearRect(0, 0, canvas.width, canvas.height)
          ctx.drawImage(drawImage, 0, 0, 720, 500)
          this.flag = true
          this.clickX = e.offsetX // 鼠标点击时的X
          this.clickY = e.offsetY // 鼠标点击时的Y
        }
        parentId.onmouseup = () => {
          this.flag = false
        }
        parentId.onmousemove = e => {
          if (this.flag) {
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            ctx.drawImage(drawImage, 0, 0, 720, 500)
            ctx.beginPath()
            let pixels = [] // 二维数组，每个子数组有5个值（绘制矩形左上角的X坐标、y坐标，矩形的宽、高，生成的4位随机数用于颜色值）
            for (let x = 0; x < (e.offsetX - this.clickX) / 15; x++) {
              for (let y = 0; y < (e.offsetY - this.clickY) / 15; y++) {
                pixels.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math.random() * 9999)])
              }
              for (let y = 0; y > (e.offsetY - this.clickY) / 15; y--) {
                pixels.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math.random() * 9999)])
              }
            }
            for (let x = 0; x > (e.offsetX - this.clickX) / 15; x--) {
              for (let y = 0; y > (e.offsetY - this.clickY) / 15; y--) {
                pixels.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math.random() * 9999)])
              }
              for (let y = 0; y < (e.offsetY - this.clickY) / 15; y++) {
                pixels.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math.random() * 9999)])
              }
            }
            for (let i = 0; i < pixels.length; i++) {
              ctx.fillStyle = '#bf' + pixels[i][4]
              ctx.fillRect(pixels[i][0], pixels[i][1], pixels[i][2], pixels[i][3])
            }
            ctx.fill()
            ctx.closePath()
          }
        }
      }
    },
    // 保存
    dialogUpload () {
      let canvas = document.getElementById('imgCanvas')
      let tempImg = canvas.toDataURL('image/png')
      let imgURL = document.getElementById('imgURL')
      imgURL.crossOrigin = 'Anonymous'
      imgURL.src = tempImg
    }
  }
})
</script>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

使用canvas一步步实现图片打码功能的方法

- Author -

木木

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
纯CSS3实现质感细腻丝滑按钮
Mar 09 HTML / CSS
你应该知道的30个css选择器
Mar 19 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
如何通过 CSS 写出火焰效果
Mar 24 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 #HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 #HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 #HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 #HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 #HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 #HTML / CSS
HTML5新增form控件和表单属性实例代码详解
May 15 #HTML / CSS
Flask(2) 信号同步(1) 鲲鹏(1) GCN(1) 进度条(1) Pytesseract(1) 裁剪图片(1) Python(3) 验证码(1) PIL(1)
You might like
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
jquery对table做排序操作的实例演示
2017/08/10 jQuery
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
从零开始学Python第八周：详解网络编程基础（socket)
2016/12/14 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
python re模块findall()函数实例解析
2018/01/19 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
最小二乘法及其python实现详解
2020/02/24 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
python绘制分布折线图的示例
2020/09/24 Python
SIDESTEP荷兰：在线购买鞋子
2019/11/18 全球购物
扩大国家免疫规划实施方案
2014/03/21 职场文书
家长通知书家长评语
2014/04/17 职场文书
2015大学生实训报告
2014/11/05 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
大学生党课感想
2015/08/11 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python
python绘制箱型图
2021/04/27 Python
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题