js将字符串转换为图像数据

第一种：使用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钩子函数无法获取数据，所以要监听数据的变化调用函数

效果：