怎么把一个text文本转换成canvas对象

author author     2023-04-07     401

关键词:

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;
参考技术A 有啊,未删减版,点击我的头像,自己拿

canvas的measuretext()方法

...候遇到了个问题,就是在给文字应用渐变色的时候,不知怎么设置渐变色的区域。渐变依赖于定义时的区域,超出这个区域只有纯色,而不是渐变色。所以要取得文字的宽度。查了资料得知,canvas有一个measureText()方法,它会返... 查看详情

java怎么把字符串转换成日期类型

SimpleDateFormat类有个parse方法publicDateparse(String text,ParsePosition pos)解析字符串的文本,生成 Date。此方法试图解析从 pos 给定的索引处开始的文本。如果解析成功,则将 pos 的索引更新为所用最后一个字符后... 查看详情

怎么把一个对象转换成json对象

参考技术AGson(又称GoogleGson)是Google公司发布的一个开放源代码的Java库,主要用途为序列化Java对象为JSON字符串,或反序列化JSON字符串成Java对象。Gson的应用主要为toJson与fromJson两个转换函数,而在使用这种对象转换之前需先创... 查看详情

怎么将long类型转换成date

...可以获取指定的日期格式了。有了上面的介绍,看看我是怎么封装一个简单的Long转换为Date的函数:1234567891011/***把毫秒转化成日期*@paramdateFormat(日期格式,例如:MM/dd/yyyyHH:mm:ss)*@parammillSec(毫秒数)*@return*/privateStringtransferLongToDate(... 查看详情

急急急!!!在asp里怎么把label.text类型转换成double??

请举例说明,谢谢!!!ASP中有个函数,CDBL(),就是将其它类型的数据转换成双精度数据,就拿你的来说:text=Cdbl(label.text)这样你的label.text就转换成了double类型.参考技术A楼主你确信你是在问ASP问题而不是ASP.NET? 查看详情

解决图片上传的浏览器兼容问题

...响应的数据是text/plain(普通文本信息,比较通用)返回的是一个Map,会被@ResponseBody转成json数据,这个时候需要想到的是让返回的不再是一个json数据即可控制台:3、解决办法:@ResponseBody的意义是:不走逻辑视图,直接向响应浏览器... 查看详情

java怎么把对象集合转换成json

有两种情况:第一使用外部工具包jackson-mapper-asl.Jar包,这里有一个方法writeValueAsString(list<map<String,Objcet>>);属于这包中的ObjectMapper类直接把list对象转换成字符串(json格式就是一个字符串,大家都知道的),然后在jsp端都... 查看详情

把一个list类型强制转换为一个对象类型是怎么实现的

参考技术A并不说是把List转换成User,而是把List里的对象转换成User。因为事先已经知道list里装的是User,所以转换没有问题,否则是要出错的。例如:Listlist=newArrayList();list.add(newCat());list.add(newCat());Catcat=(Cat)list.get(0);//OKDogdog=(Dog)li... 查看详情

canvas怎么根据坐标获取上面的内容

就是我用canvas在页面上绘制了一些文字,那我该怎么根据绘制的坐标来获取上面的文字呢这个圆盘上面的字是利用canvas绘制上去的,然后我想获取指针所在的位置上的文字,应该怎么办,哪位大虾可以帮帮忙~思路是这样的,把... 查看详情

js把逗号替换成空白怎么做

字符串为:怎,么,做输出为:怎么做通过replace和正则表达式替换逗号例如:var replaceStr = ',';//要替换的字符串var str = '12323,23,23adasd';//要被替换的字符串alert(str.replace(new RegExp(replaceStr,'gm... 查看详情

怎么把txt文本转换成unicode格式

在电脑中用记事本打开,然后文件--另存为,在弹出的对话框的下页的编码中选择unicode编码即可。参考技术A直接将文件名点后的txt改成你想要的格式就行,改成什么格式都可以,有时系统提式,不管它,确定就好。 查看详情

simpledateformat日期和文本之间相互转换

      java.text.DateFormat是日期/时间格式化子类的抽象类,我们可以通过他的子类SimpleDateFormat在Date对象与String对象之间进行来回转换格式化:按照指定的格式,从Date对象转换为String对象。解析:按照指定的格... 查看详情

怎么把一个java对象转换成soap

是这样我们项目要去调用别的公司的接口,他们的接口是用soap形式的。文档中的格式是这样的http://www.w3school.com.cn/soap/soap_example.asp我现在想写点测试神马的,自己写个类,然后转换成soap,也就是上面这种样式,但是我用xfire写... 查看详情

一个java对象内包含一个对象集合用json-lib框架怎么转换成json数据格式

...,,但A对象里有个List集合(B对象集合)的属性,这样的话怎么才能把A对象转了...追答发代码给我看吧,qq:1241354824 参考技术B你可以获取每一个集合的属性,比如遍历的方式啊,然后new一个json对象,把属性放到json里面。试试? 查看详情

怎么把txt转化为html

...转换的txt文本,选择并点击txt2html即可完成格式转换。2.怎么将txt文件转换成html文件以下是个例子,并存为扩展名为或的文件即可(完全不带格式的):<html><head><metaname=GENERATORcontent="MicrosoftFrontPage5.0"><metan... 查看详情

vb怎么把结果输出到文本框里?

参考技术A参考输出方法如下:text1.text="想要的文本"text1.text=text1.text&outVisualBasic是一种由Microsoft公司开发的结构化的、模块化的、面向对象的、包含协助开发环境的事件驱动为机制的可视化程序设计语言。 查看详情

canvas练手项目——canvas中的text文本(代码片段)

Canvas中的Text文本也是一个知识点~,我们需要掌握一下几个基本的Text操作方法首先是重要参数textAlign和textBaseline:textAlignleftcenterrightstart(default)endtextBaselinealphabetic(default)【适合Latin文字类,“abc”】hanging【适合一些印地语,“???... 查看详情

c#里面怎么把二进制转换成byte[]

我有个二进制stringbStr="8BPS";这个8BPS是刚刚从数据库里读出来,我现在要把它转换成byte[]。希望大家能马上给我答案,谢谢..有个问题,请大家帮忙解决哈。谢谢大家。第一次做个二进制流的..希望大家多多指点.在数据库... 查看详情