文字图片化

有着不该有的帅气 有着不该有的帅气     2022-08-06     560

关键词:

     RT,实现类似现在网上流行的长微博生成器,就是把长文字转成图片。当然功能比不上网上流传的,不知道网上那些用的什么方法。我这是用的HTML5的Canvas特性,也算一种实现吧。 
    示例地址: TextToImage,仅作大家交流使用。  

附加_2012年4月18日11:13:00:之前刚分享此代码的时候的版本是不能处理分行的,现在可以了。在做断行的过程,我发现:一个好算法,是胜过无数行苦逼的杂乱代码的... 

 
标签: <无>
 

代码片段(2)[全屏查看所有代码]

1. [图片] QQ截图20120417233248.jpg    

技术分享

2. [代码][HTML]代码     

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<html>
<head>
<script type="text/javascript">
    function $(id) {
        return document.getElementById(id);
    }
    function textToImg() {
        var len = $(‘len‘).value || 30;
        var i = 0;
        var fontSize = $(‘fontSize‘).value || 15;
        var fontWeight = $(‘fontWeight‘).value || ‘normal‘;
        var txt = $("txt").value;
        var canvas = $(‘canvas‘);
        if (txt == ‘‘) {
            alert(‘请输入文字!‘);
            $("txt").focus();
        }
        if (len > txt.length) {
            len = txt.length;
        }
        canvas.width = fontSize * len;
        canvas.height = fontSize * (3 / 2)
                * (Math.ceil(txt.length / len) + txt.split(‘ ‘).length - 1);
        var context = canvas.getContext(‘2d‘);
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.fillStyle = $("showcolor").innerHTML;
        context.font = fontWeight + ‘ ‘ + fontSize + ‘px sans-serif‘;
        context.textBaseline = ‘top‘;
        canvas.style.display = ‘none‘;
        console.log(txt.length);
        function fillTxt(text) {
            while (text.length > len) {
                var txtLine = text.substring(0, len);
                text = text.substring(len);
                context.fillText(txtLine, 0, fontSize * (3 / 2) * i++,
                        canvas.width);
            }
            context.fillText(text, 0, fontSize * (3 / 2) * i, canvas.width);
        }
        var txtArray = txt.split(‘ ‘);
        for ( var j = 0; j < txtArray.length; j++) {
            fillTxt(txtArray[j]);
            context.fillText(‘ ‘, 0, fontSize * (3 / 2) * i++, canvas.width);
        }
        var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
        var img = $("img");
        img.src = canvas.toDataURL("image/png");
    }
    function changeColor() {
        var c = $("text");
        var ctx = c.getContext("2d");
        var red = $("red");
        var green = $("green");
        var blue = $("blue");
        ctx.fillStyle = "rgb(" + red.value + "," + green.value + ","
                + blue.value + ")";
        $("showcolor").innerHTML = ctx.fillStyle;
        ctx.fillRect(0, 0, 100, 100);
        //$(‘canvas‘).getContext(‘2d‘).fillStyle=$("showcolor").innerHTML;
    }
</script>
</head>
<body>
<div style="float: left"><textarea id="txt"
    style="width: 450px; height: 400px;">如果您的长微博字数超过了140个字的限制,在这里输入微博内容,点击右方的“生成图片”,鼠标右击右边“文字”,“图片另存为...”,保存图片后,就可以直接发到微博里了,赶紧试试吧!</textarea></div>
<div style="width: 200px; height: 100px; float: left; clear: right">
<table>
    <tr>
        <td><label>字体大小:</label><input size="4" id=‘fontSize‘ value=‘15‘ />px</td>
    </tr>
    <tr>
        <td><label>字体精细:</label><select id="fontWeight">
            <option value="normal">正常</option>
            <option value="bold">粗</option>
        </select></td>
    </tr>
    <tr>
        <td><label>每行显示:</label><input size="4" id=‘len‘ value="40" />个字</td>
    </tr>
    <tr>
        <td><canvas id="text" width="100" height="100"></canvas>
        <p>Red: <input type="range" id="red" min="0" max="255" value="0"
            onchange="changeColor();" /></p>
        <p>Green:<input type="range" id="green" min="0" max="255"
            value="0" onchange="changeColor();" /></p>
        <p>Blue: <input type="range" id="blue" min="0" max="255" value="0"
            onchange="changeColor();" /></p>
        目前的颜色:<span id="showcolor"></span></td>
    </tr>
 
    <tr>
        <td>
        <button onclick=
    textToImg();;
>生成图片</button>
        </td>
    </tr>
</table>
</div>
<canvas id="canvas" style="display:block"></canvas>
<div style="margin-left: 650px"><img id="img"
    style="border: 1px solid" /></div>
<script>
    changeColor();
</script>
</body>

matlab简易验证码识别程序介绍

...,比如背景,干扰线,干扰像素等等,只剩下需要识别的文字,让图片变成2进制点阵。第二步:文字分割为了能识别出字符,需要对要识别的文字图图片进行分割,把每个字符作为单独的一个图片看待。第三步:标准化对于部分特... 查看详情

java实现图片的文字识别

参考技术A摘要图像识别是目前很热门的研究领域,涉及的知识很广,包括信息论、模式识别、模糊数学、图像编码、内容分类等等。本文仅对使用Java实现了一个简单的图像文本二值处理,关于识别并未实现。  步骤  建立... 查看详情

js怎么识别图片上的文字

...做过,但是有一种插件不知道能不能有用。Javascript图片文字识别插件JS-OCR,尽量找一些插件,效率要高一些。参考技术A没有使用这种方法做过,但是可以使用ocr进行识别图片上的文字啊,在网上都有ocr文字识别软件的,安装一... 查看详情

ae不能转化unicode文字

图片打不开在其他机子上可以打开,psd格式参考技术A你到PS里面先把这个文字层给栅格化一下。。。追问没有文字图层追答那你可能是AE本身有什么问题了,重装一下吧!或者去找个完整版的装上本回答被提问者采纳 查看详情

如何避免问号字符的 ODBC 参数化?在文字和评论中?

】如何避免问号字符的ODBC参数化?在文字和评论中?【英文标题】:HowtoavoidODBCparameterizationforthequestionmarkcharacter?withinliteralsandcomments?【发布时间】:2010-07-2800:04:16【问题描述】:我遇到了一个问题,其中有问号字符“?”在我... 查看详情

ocr研究学习总结1

...类处理,pdf/doc文档这种内容非图片的可以直接解析成文字,其他的都需要处理成相同格式的图片,并对图片进行预处理。图片中的文字、公式、表格、图片等复杂的文本结构是我们必须针对不同类型的扫描件做不同... 查看详情

html5语义化标签

语义标签<header></header><nav></nav><section></section><article></article><aside></aside><figcaption></figcaption> //图片的文字说明< 查看详情

如何在 JavaScript 中“实例化”原始字符串(字符串文字)[重复]

】如何在JavaScript中“实例化”原始字符串(字符串文字)[重复]【英文标题】:Howto"instanceof"aprimitivestring(stringliteral)inJavaScript[duplicate]【发布时间】:2013-05-2310:11:08【问题描述】:在JavaScript中,我可以通过以下方式声明... 查看详情

htmlcanvas文字粒子化

如题我想要把文字变成下面一样由圆圈组成上面是我自己写的首先你得把那几个字写成一个三维数组的形式,用0和1标记。然后遍历数组,在数组内容为1的时候用.arc画一个圆。其实就是半径等于1*r。然后定位每个圆点的位置就... 查看详情

uibutton图片文字控件位置自定义(图片居右文字居左图片居中文字居中图片居左文字消失等)

在开发中经常会碰到需要对按钮中的图片文字位置做调整的需求。第一种方式是通过设置按钮中图片文字的偏移量。通过方法setTitleEdgeInsets和setImageEdgeInsets实现代码如下:/*!**方式一***/-(void)updateBtnStyle_rightImage:(UIButton*)btn{CGFloatbt... 查看详情

怎样做才能实现图片转文字

无论是在生活中,还是在工作中,面对图片文字我们最好的办法就是进行图片转文字,学会了图片转文字这个方法,可以在图片上节约很多的时间,方法也有好与坏,下面小编分享一个简单、识别效果不错的图片转文字方法。使... 查看详情

快速实现图片文字识别的步骤

进行图片文字识别,相信大家都知道,在工作中我们经常会收到上级给我们的文件,其中肯定是有图片文件的,面对整理图片信息大家的方法是什么呢?下面小编就给大家介绍一个简单图片文字识别的步骤,以后再实现图片文字... 查看详情

文字图片居中

http://www.zhangxinxu.com/wordpress/?p=61 ②多行文字如何实现父容器高度固定,文字可能一行,两行或更多行的垂直居中对齐呢?实现的关键是把文字当图片处理。用一个span标签将所有的文字封装起来,设置文字与图片相同的display... 查看详情

微信小程序怎么将文字变成图片

参考技术A1、在微信顶部搜索文字图片制作,点击文字图片制作小程序,进入小程序。2、点击制作,选择模板。3、进入文字图片制作小程序后,点击制作按钮,点击一个模板。添加手机图片或在线图片然后添加文字。4、输入自... 查看详情

word2013文字替换成图片怎么做

...让读者理解,通俗易懂,如何在解除版Word2013中将相同的文字替换为图片呢?下面让我为你带来word2013文字替换成图片的方法。word文字替换图片步骤如下:word2013将文字替换成图片步骤①:我们打开Word2013,看到表格数据中有香蕉... 查看详情

职场专业图片文字识别的方法,你知道吗

在职场中又一个专业的图片文字识别方法,工作不是经常整理图片文字的员工不知道,那就是使用一下专业的OCR文字识别软件,在加上专业的操作方法,就可以快速的把图片上的文字识别出来了。在平时生活中实现图片文字识别... 查看详情

css如何让图片位于文字的下方,文字在上面图片在文字的下面(图片是一张虚线)而文字右边又有一张图片

...ottom;追问谢谢不过我试过这个方法不好用我的虚线图片在文字的上面了 查看详情

word文字如何批量替换图片与所有图片替换为文字

参考技术A  Word的替换功能确实也强大,不但可以把文字批量替换为图片,还可以把所有图片替换为文字。以下是我为您带来的关于Word文字批量替换图片与所有图片替换为文字,希望对您有所帮助。  Word文字批量替换图片... 查看详情