一、使用canvas将文字转换成图像数据base64
function textBecomeImg(text,fontsize,fontcolor){ var canvas = document.createElement('canvas'); //小于32字加1 小于60字加2 小于80字加4 小于100字加6 $buHeight = 0; if(fontsize <= 32){ $buHeight = 1; } else if(fontsize > 32 && fontsize <= 60 ){ $buHeight = 2;} else if(fontsize > 60 && fontsize <= 80 ){ $buHeight = 4;} else if(fontsize > 80 && fontsize <= 100 ){ $buHeight = 6;} else if(fontsize > 100 ){ $buHeight = 10;} //对于g j 等有时会有遮挡,这里增加一些高度 canvas.height=fontsize + $buHeight ; var context = canvas.getContext('2d'); // 擦除(0,0)位置大小为200x200的矩形,擦除的意思是把该区域变为透明 context.clearRect(0, 0, canvas.width, canvas.height); context.fillStyle = fontcolor; context.font=fontsize+"px Arial"; //top(顶部对齐) hanging(悬挂) middle(中间对齐) bottom(底部对齐) alphabetic是默认值 context.textBaseline = 'middle'; context.fillText(text,0,fontsize/2) //如果在这里直接设置宽度和高度会造成内容丢失 , 暂时未找到原因 , 可以用以下方案临时解决 //canvas.width = context.measureText(text).width; canvas.width = context.measureText(text).width; context.fillStyle = fontcolor; context.font=fontsize+"px Arial"; context.textBaseline = 'middle'; context.fillText(text,0,fontsize/2) var dataUrl = canvas.toDataURL('image/png');//注意这里背景透明的话,需要使用png return dataUrl; }
使用:
<img src="" id="img"> <script type="text/javascript"> var text = "Hello"; document.getElementById("img").src = textBecomeImg(text,50,"#000"); </script>
效果:
二、使用canvas将任意字符串转换成图像数据
export const numPic = (number, id) => { /**生成一个随机数**/ function randomNum(min, max) { return Math.floor(Math.random() * (max - min) + min) } /**生成一个随机色**/ function randomColor(min, max) { let r = randomNum(min, max) let g = randomNum(min, max) let b = randomNum(min, max) return 'rgb(' + r + ',' + g + ',' + b + ')' } /**绘制验证码图片**/ function drawPic(num) { let canvas = document.getElementById(id) let width = canvas.width let height = canvas.height let ctx = canvas.getContext('2d') ctx.textBaseline = 'bottom' /**绘制背景色**/ ctx.fillStyle = randomColor(180, 240) //颜色若太深可能导致看不清 ctx.fillRect(0, 0, width, height) /**绘制文字**/ let txt = num ctx.fillStyle = randomColor(50, 160) //随机生成字体颜色 ctx.font = randomNum(25, 35) + 'px SimHei' //随机生成字体大小 let x = 22 let y = 35 let deg = randomNum(-10, 8) //修改坐标原点和旋转角度 ctx.translate(x, y) ctx.rotate((deg * Math.PI) / 180) ctx.fillText(txt, 0, 0) // //恢复坐标原点和旋转角度 ctx.rotate((-deg * Math.PI) / 180) ctx.translate(-x, -y) /* } */ /* /**绘制干扰线**/ for (let i = 0; i < 8; i++) { ctx.strokeStyle = randomColor(40, 180) ctx.beginPath() ctx.moveTo(randomNum(0, width), randomNum(0, height)) ctx.lineTo(randomNum(0, width), randomNum(0, height)) ctx.stroke() } /**绘制干扰点**/ for (let i = 0; i < 100; i++) { ctx.fillStyle = randomColor(0, 255) ctx.beginPath() ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI) ctx.fill() } } return drawPic(number) }
vue中使用:
<canvas id="code" width="120" height="40" title="看不清,换一张"></canvas> watch: { verificationCode(){ numPic(this.verificationCode,'code') } }
因为要获取dom和异步请求的验证码,mounted钩子函数无法获取数据,所以要监听数据的变化调用函数
效果: