// 打码
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">
