JS uses canvas to convert text into image data base64

JS use canvas to convert text into image data Base64, the reason for this function is because in the work encountered to block the browser's translation function, using this method to turn the text into a picture, so as to achieve the function of shielding translation

Source:

/** * JS uses canvas to convert text into image data base64* @param {string} text content "abc" * @param {string} fontsize Word size 20* @param {function} fontcolor text color #000 * @param {Boolean} imgbase64data image data */textbecomeimg:func    tion (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 <=) {$buHeight = 1;}    else if (fontsize > && fontsize <=) {$buHeight = 2;}    else if (fontsize > && fontsize <=) {$buHeight = 4;}    else if (fontsize > && fontsize <=) {$buHeight = 6;}    else if (FontSize >) {$buHeight = 10;}    For G J and so on sometimes there will be obscured, here add some height canvas.height=fontsize + $buHeight;    var context = Canvas.getcontext (' 2d ');    Erase (0,0) a rectangle with a position size of 200x200, which means to change the area to transparent Context.clearrect (0, 0, canvas.width, canvas.height);    Context.fillstyle = FontColor;    context.font=fontsize+ "px Arial"; Top (TopsAlign) hanging (hanging) middle (center alignment) Bottom (bottom alignment) alphabetic is the default value Context.textbaseline = ' middle '; Context.filltext (TEXT,0,FONTSIZE/2)//If you set the width and height here directly causes the content to lose, temporarily did not find the reason, may use the following scheme to temporarily resolve//canvas.width = Context.measure    Text (text). width; Scenario One: You can first copy the content and then set the width and then paste//Scenario Two: Create a new canvas, paste the old canvas content past//scenario three: The top set the width, and then set the text//scheme one: This test has a problem, the font becomes large    , the display is not complete, because the canvas default width is not enough,//if the canvas is given a large width at the outset, this is possible.  var imgdata = Context.getimagedata (0,0,canvas.width,canvas.height);  Here, first copy the contents of the original canvas//canvas.width = Context.measuretext (text). width; Then set width and height//context.putimagedata (imgdata,0,0);    Finally paste the copied content//scheme three: After changing the size, re-set the text 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, you need to use PNG return dataurl; }

Examples of Use:

                <script type= "Text/javascript" >  var text = "Hello world!"; document.getElementById ("show"). src = jsfun.textbecomeimg (text,50, "#000");</script>

Source: jsfun.cn
http://www.jsfun.cn/#textBecomeImg

　　

　　

JS uses canvas to convert text into image data base64