html5中如何使用canvas实现图片打码

2024-10-26 百科资讯

这篇文章主要介绍了html5中如何使用canvas实现图片打码的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇html5中如何使用canvas实现图片打码文章都会有所收获，下面我们一起来看看吧。

准备工作

demo 基于 vue + elelment-ui

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

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

实现思路

创建canvas画布，并将要打码的图片绘制上去

监听鼠标在图片上的点击，移动、松开事件，在canvas画布上绘制要打码的区域

处理绘制的打码区域

保存打码后的图片

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

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

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

思路：

鼠标点击，获取点击时的坐标，每次点击前可能会存在打过码的区域，先清除画布，重新绘制图片

鼠标移动，开始绘制打码的矩形，通过移动的坐标和上面点击的点坐标确定绘制的矩形坐标和宽高

将绘制的打码矩形，分割成一个个宽高15像素的小正方形，并给每个小正方形生产随机颜色

鼠标松开，停止绘制矩形

//打码dialogCode(img){letparentId=document.getElementById('parentId')letcanvas=document.getElementById('imgCanvas')if(canvas.getContext){letctx=canvas.getContext('2d')letdrawImage=newImage()drawImage.crossOrigin='Anonymous'drawImage.src=imgdrawImage.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=truethis.clickX=e.offsetX//鼠标点击时的Xthis.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()letpixels=[]//二维数组，每个子数组有5个值（绘制矩形左上角的X坐标、y坐标，矩形的宽、高，生成的4位随机数用于颜色值）for(letx=0;x<(e.offsetX-this.clickX)/15;x++){for(lety=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(lety=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(letx=0;x>(e.offsetX-this.clickX)/15;x--){for(lety=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(lety=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(leti=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(){letcanvas=document.getElementById('imgCanvas')lettempImg=canvas.toDataURL('image/png')letimgURL=document.getElementById('imgURL')imgURL.crossOrigin='Anonymous'imgURL.src=tempImg}

源码

复制到html文件可预览：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>使用canvas一步步实现图片打码功能</title><linkrel="stylesheet"href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><styletype="text/css">.rc-code__buttons{margin:20px;}</style></head><body><divid="app"><divclass="rc-code__buttons"><h2>vue项目中使用canvas一步步实现图片打码功能</h2><el-buttontype="primary"@click="dialogCode(data.img_url)">打码</el-button><el-buttontype="success"@click="dialogUpload()">保存</el-button></div><el-row><el-col:span="12"><h4>点击打码按钮，在图片上绘制打码区域；点击保存，生成打码后的图片</h4></el-col><el-col:span="12"><h4>保存后的图片</h4></el-col><el-col:span="12"><divid="parentId"></div></el-col><el-col:span="12"><imgid="imgURL"/></el-col></el-row></div></body><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><scriptsrc="https://unpkg.com/element-ui/lib/index.js"></script><script>newVue({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(()=>{letparentId=document.getElementById('parentId')letdrawImg=newImage()drawImg.setAttribute('crossOrigin','anonymous')drawImg.crossOrigin='Anonymous'drawImg.src=currentImgletaddCanvas=document.createElement('canvas')parentId.appendChild(addCanvas)letcanvas=parentId.lastElementChildcanvas.id='imgCanvas'if(canvas.getContext){letctx=canvas.getContext('2d')drawImg.onload=function(){canvas.width=720canvas.height=500ctx.drawImage(drawImg,0,0,720,500)}}})},//打码dialogCode(img){letparentId=document.getElementById('parentId')letcanvas=document.getElementById('imgCanvas')if(canvas.getContext){letctx=canvas.getContext('2d')letdrawImage=newImage()drawImage.crossOrigin='Anonymous'drawImage.src=imgdrawImage.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=truethis.clickX=e.offsetX//鼠标点击时的Xthis.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()letpixels=[]//二维数组，每个子数组有5个值（绘制矩形左上角的X坐标、y坐标，矩形的宽、高，生成的4位随机数用于颜色值）for(letx=0;x<(e.offsetX-this.clickX)/15;x++){for(lety=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(lety=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(letx=0;x>(e.offsetX-this.clickX)/15;x--){for(lety=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(lety=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(leti=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(){letcanvas=document.getElementById('imgCanvas')lettempImg=canvas.toDataURL('image/png')letimgURL=document.getElementById('imgURL')imgURL.crossOrigin='Anonymous'imgURL.src=tempImg}}})</script></html>

关于“html5中如何使用canvas实现图片打码”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“html5中如何使用canvas实现图片打码”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。