0x00 概述

近日开发移动端H5遇到文字转图片的需求，类似长微博生成工具。由于需求简单，并未采用rasterizeHTML.js或html2canvas这类略显庞大的html转图片工具，而是采用canvas原生API直接在画布上生成图片。

理一下思路。

需求：前端实现文字转图片。超宽度文字换行显示，并可设置行高。
问题点：文字换行，文字行高实现，canvas导出图片。

0x01 文字换行与行高的原理与实现

CanvasRenderingContext2D对象唯一的打印文字方法 fillText(text, x, y [, maxWidth]) 不支持文字超宽自动换行，即超宽文字被写出画布从而不可见。方法的第三个可选参数指定打印文本行的最大宽度，必要时会缩小整个文本行的字体尺寸（真是对文字换行功能毫无贡献啊）。

所以，必须手动实现文字换行功能。基本思路是迭代文本行的每一个字符，然后用measureText(text)方法测量并累加字符宽度。当字符累计宽度即将超宽时，插入换行标志。当所有文字迭代完成后，就得到了一个已在所有换行位置插入换行标志的字符串。

遍历已插入换行标志的字符串时，每遇一个换行标志，Y轴坐标累加行高值一次。

参考：

fillText(): https://developer.mozilla.org...
measureText(): https://developer.mozilla.org...

0x02 canvas导出图片

HTMLCanvasElement.toDataURL()方法可导出画布图像为base64编码格式的图片。api见 https://developer.mozilla.org...

canvas长微博生成功能实践相关推荐

wkhtmltoimage 卡住了_用rails做一个简单的长微博生成工具
长微博就是把文字转换成图片,主要用到的gem是imgkit. imgkit是一个通过open3来调用wkhtmltoimage生成图片的gem,源码不是很复杂,使用也很简单. 基本步骤如下: rail ...
php 长微博程序,php仿照新浪微博长微博分页功能
仿照新浪微博长微博分页功能微博内容在这里. //请保留著作权,作者:苹果巴士 www.ipkbus.com jeffxie@gmail.com //本代码目前不兼容IE6,更强大的功能请自行改进代码 ...
仿照新浪微博长微博分页功能
最近用新浪微博的时候,看了下微博滚动获取微博信息的功能,正好苹果巴士的客户想做一个差不多的功能,所以就分析了一下,大概思路是根据滚动条滚动事件来触发获取微博的AJAX,然后自动添加数据到页面,当然了, ...
php把buffer转化为图片_长微博生成（将html转化为图片）原理浅析
在平时工作中有一些需求,简单而言就是需要将一些内容生成图片.简单的内容通过PhotoShop处理还行,但是类似于带表格等的内容,每次都通过PhotoShop进行处理太浪费时间.网上有很多类似于长微博等 ...
长微博生成（将html转化为图片）原理浅析
在平时工作中有一些需求,简单而言就是需要将一些内容生成图片 .简单的内容通过PhotoShop处理还行,但是类似于带表格等的内容,每次都通过PhotoShop进行处理太浪费时间.网上有很多类似于长 ...
php 长微博程序,长微博生成工具PHP源码根据文字生成长微博图片 - substr_count
PHP substr_count() 函数定义和用法substr_count() 函数计算子串在字符串中出现的次数.语法substr_count(string,substring,start,len ...
php 长微博程序,PHP生成长微博
目前仅支持纯文字的长微博生成,而且输入的html只能包含p标签. http://leo108.com 过段时间会增加图片以及页眉页脚支持. http://leo108.com/pid-1907.asp ...
通过学习制作长微博工具来了解水印的制作，及EditText中的内容在图片中换行显示
长微博工具非常有用,140字的要求可能阻止你写更多的内容,于是长微博工具应运而生,虽然网上有很多长微博工具,但是我都不是很满意,所以自己想做一个,通过做这个长微博工具,我学习到了很多东西,有两个难点, ...
生成图片长微博遇到的坑
公司的App生成图片长微博的功能已经有一段时间,在开发时遇到过截屏出现黑色的问题.之前我以为是iOS7和7以上系统的问题,代码是这样写的. + (UIImage*)snapshot { UIViewC ...

canvas长微博生成功能实践

0x00 概述

0x01 文字换行与行高的原理与实现

0x02 canvas导出图片

canvas长微博生成功能实践相关推荐

最新文章

热门文章