js使用canvas將文字轉換成圖像數據base64

js使用canvas將文字轉換成圖像數據base64，做這個功能的原因是因為在工作中遇到想屏蔽瀏覽器的翻譯功能，使用這個方法將文字轉成了圖片，從而實現屏蔽翻譯的功能

源碼：

/** 
* js使用canvas將文字轉換成圖像數據base64
* @param {string}    text              文字內容  "abc"
* @param {string}    fontsize          文字大小  20
* @param {function}  fontcolor         文字顏色  "#000"
* @param {boolean}   imgBase64Data     圖像數據
*/
textBecomeImg: function (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一個很大的寬度的話，這個是可以的。	
    //var imgData = context.getImageData(0,0,canvas.width,canvas.height);  //這里先復制原來的canvas里的內容	
    //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;
}

使用示例：

<img src="" id="show"> 
               
<script type="text/javascript">	  
	var text = "Hello World! ";
	document.getElementById("show").src = jsFun.textBecomeImg(text,50,"#000");
</script>

來源：jsfun.cn
http://www.jsfun.cn/#textBecomeImg