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

这篇博客详细介绍了如何使用canvas在Vue项目中实现图片打码功能。首先,通过创建canvas画布并绘制图片,然后监听鼠标事件来绘制打码区域。在用户点击、移动和松开鼠标过程中,确定打码矩形的坐标和大小,并用随机颜色填充小块进行打码。最后,介绍如何保存打码后的图片。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

原文地址

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>

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

实现思路

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

将要打码的图片绘制到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)
      }
    }
  })
}

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

思路:

  1. 鼠标点击,获取点击时的坐标,每次点击前可能会存在打过码的区域,先清除画布,重新绘制图片
  2. 鼠标移动,开始绘制打码的矩形,通过移动的坐标和上面点击的点坐标确定绘制的矩形坐标和宽高
  3. 将绘制的打码矩形,分割成一个个宽高15像素的小正方形,并给每个小正方形生产随机颜色
  4. 鼠标松开,停止绘制矩形
// 打码
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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值