原文地址
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像素的小正方形，并给每个小正方形生产随机颜色
鼠标松开，停止绘制矩形
