js使用canvas将文字转换成图像数据base64
Posted 忧郁鸟
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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
以上是关于js使用canvas将文字转换成图像数据base64的主要内容,如果未能解决你的问题,请参考以下文章
Tensorflowjs - 将 4d 张量重塑/切片成图像