js uses canvas to convert text into image data base64

js uses canvas to convert text into image data base64. The reason for this function is because I want to block the translation function of the browser at work. I use this method to convert text into pictures, so as to realize the function of blocking translation.

Source code:

/**
* js uses canvas to convert text into image data base64
* @param {string} text text content "abc"
* @param {string} fontsize text size 20
* @param {function} fontcolor text color "#000"
* @param {boolean} imgBase64Data image data
*/
textBecomeImg: function (text,fontsize,fontcolor){
    var canvas = document.createElement('canvas');
    // Less than 32 words plus 1 Less than 60 words plus 2 Less than 80 words plus 4 Less than 100 words plus 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;}
    //Sometimes there is occlusion for gj, etc., add some height here
    canvas.height=fontsize + $buHeight ;
    var context = canvas.getContext('2d');
    // Erase a rectangle with a size of 200x200 at (0,0), erasing means making the area transparent
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = fontcolor;
    context.font=fontsize+"px Arial";
    //top (top alignment) hanging (hanging) middle (middle alignment) bottom (bottom alignment) alphabetic is the default
    context.textBaseline = 'middle';
    context.fillText(text,0,fontsize/2)

    //If the width and height are directly set here, the content will be lost, and the reason has not been found for the time being, and the following solutions can be used to temporarily solve the problem
    //canvas.width = context.measureText(text).width;


    //Option 1: You can copy the content first, then set the width and then paste it    
    //Option 2: Create a new canvas and paste the old canvas content  
    //Option 3: After setting the width above, set the text again

    //Scheme 1: There is a problem with this test. After the font becomes larger, the display is incomplete. The reason is that the default width of the canvas is not enough.
    //If you give the canvas a large width at the beginning, this is OK.	
    //var imgData = context.getImageData(0,0,canvas.width,canvas.height); //First copy the contents of the original canvas	
    //canvas.width = context.measureText(text).width; //then set the width and height	
    //context.putImageData(imgData,0,0); //Finally paste the copied content

    //Option 3: After changing the size, reset the text once
    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');//Note that if the background is transparent here, you need to use png
    return dataUrl;
}

Example of use:

<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