Shulou(Shulou.com)06/01 Report--

This article mainly introduces the html5 how to use canvas to achieve picture coding related knowledge, the content is detailed and easy to understand, the operation is simple and fast, with a certain reference value, I believe you will have something to gain after reading this html5 article on how to use canvas to achieve picture coding, let's take a look.

Preparatory work

Demo is based on vue + elelment-ui

First create a html file and introduce vue and elelment-ui (note that there are also style files)

Document

Then we can write our coding function.

Realization idea

Create a canvas canvas and draw the picture to be typed

Monitor mouse clicks on the picture, move, release events, and draw areas to be coded on the canvas canvas

Deal with the drawn coding area

Save the coded picture

Draw the picture to be typed onto the canvas canvas

/ / initialize drawing toCode (currentImg) {this.$nextTick () = > {/ / get the parent element node of the canvas to be drawn let parentId = document.getElementById ('parentId') / / initialize the picture let drawImg = new Image () drawImg.setAttribute (' crossOrigin') 'anonymous') drawImg.crossOrigin =' Anonymous' drawImg.src = currentImg / / create the canvas element and add it to the parent node let addCanvas = document.createElement ('canvas') parentId.appendChild (addCanvas) let canvas = parentId.lastElementChild canvas.id =' imgCanvas' if (canvas.getContext) {let ctx = canvas.getContext ('2d') / / draw the picture drawImg.onload = function () {canvas.width = 720 canvas.height = 500 ctx.drawImage (drawImg 0,0720,500)})}

Click the coding button to draw the coding area

Train of thought:

Click the mouse to get the coordinates of the click. There may be a coded area before each click. Clear the canvas and redraw the picture.

Move the mouse and begin to draw the coded rectangle. the rectangular coordinates and width and height are determined by the moving coordinates and the point coordinates clicked above.

Divide the drawn coding rectangle into small squares 15 pixels wide and high, and produce random colors for each small square.

Release the mouse and stop drawing the rectangle

/ / Code 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,0720) Click parentId.onmousedown = e = > {ctx.clearRect (0,0, canvas.width, canvas.height) ctx.drawImage (drawImage, 0,0,720) This.flag = true this.clickX = e.offsetX / / X this.clickY = e.offsetY / / Y} / / Mouse release parentId.onmouseup = () = > {this.flag = false} / / Mouse Down 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 = [] / / 2D array Each subarray has 5 values (drawing the X and y coordinates of the upper left corner of the rectangle, the width and height of the rectangle, and the generated 4-digit random number for color values) 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; Ymuri -) {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; Xmure -) {for (let y = 0) Y > (e.offsetY-this.clickY) / 15; ymurf -) {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文件可预览： 使用canvas一步步实现图片打码功能 .rc-code__buttons { margin: 20px; } vue项目中使用canvas一步步实现图片打码功能 打码 保存 点击打码按钮，在图片上绘制打码区域； 点击保存，生成打码后的图片 保存后的图片

New Vue ({el:'# app', data () {return {data: {img_url: 'https://avatars0.githubusercontent.com/u/26196557?s=460&v=4'}, flag: false, / / whether to draw a rectangle clickX:'', / / when you start drawing a rectangle, the x coordinate clickY:''/ / when you start drawing a rectangle Y coordinates}}, mounted () {this.toCode (this.data.img_url)}, methods: {/ / initialize drawing 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,0720,500)})} / / Code 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,0720) {ctx.clearRect (0,0, canvas.width, canvas.height) ctx.drawImage (drawImage, 0,0,720) 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) at mouse click Canvas.height) ctx.drawImage (drawImage, 0,0,720,500) ctx.beginPath () let pixels = [] / / 2D array Each subarray has 5 values (drawing the X and y coordinates of the upper left corner of the rectangle, the width and height of the rectangle, and the generated 4-digit random number for color values) 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; ymurf -) {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) Xmuri -) {for (let y = 0; y > (e.offsetY-this.clickY) / 15; yMui -) {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) ) {pixels.push ([(x * 15 + this.clickX), (y * 15 + this.clickY), 15,15, Math.floor (Math.random () * 9999)])}} for (let I = 0; I < pixels.length) Ctx.fillStyle +) {ctx.fillStyle ='# bf' + pixels [I] [4] ctx.fillRect (pixels [I] [0], pixels [I] [1], pixels [I] [2], pixels [I] [3])} ctx.fill () ctx.closePath ()} / / Save dialogUpload () {let canvas = document.getElementById ('imgCanvas') let tempImg = canvas.toDataURL (' image/png') let imgURL = document.getElementById ('imgURL') imgURL.crossOrigin =' Anonymous' imgURL.src = tempImg}) this is the end of the article on "how to use canvas to code pictures in html5" Thank you for reading! I believe you all have a certain understanding of "how to use canvas to code pictures in html5". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.