文字轉換成圖片功能

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;
    }複製代碼