文字转换成图片功能

一、业务需求：

在原来的网页上，进行在线批注功能实现

二、思考：

1、想实现批注，首先想到的是web端输入文字，并生成图片

2、canvas可以根据轨迹绘制图片，也可以把文字绘制成图片

3、canvas是H5新标准，在低版本IE兼容性方面，需要做特殊处理

三、功能实现：

综上考虑，能满足业务提的功能需求，直接上代码：

    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,把旧的canvas内容黏贴过去 
      //方案三： 上边设置完宽度后，再设置一遍文字
     
      //方案一： 这个经过测试有问题，字体变大后，显示不全,原因是canvas默认的宽度不够，
      //如果一开始就给canvas一个很大的宽度的话，这个是可以的。  
      
      //这里先复制原来的canvas里的内容
      var imgData = context.getImageData(0,0,canvas.width,canvas.height);  
      //然后设置宽和高   
      canvas.width = context.measureText(text).width;      
      //最后黏贴复制的内容
      context.putImageData(imgData,0,0);                      
      */

      //方案三：改变大小后，重新设置一次文字
      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;
    }复制代码