文字转换成图片功能

1、业务需求：

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

2、思考：

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

二、canvas能够根据轨迹绘制图片，也能够把文字绘制成图片

三、canvas是H5新标准，在低版本IE兼容性方面，须要作特殊处理

3、功能实现：

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

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;
    }复制代码