canvas长微博生成功能实践

wangshijun 发布于2019-08-20 15:14 / 3289人阅读

摘要：概述近日开发移动端遇到文字转图片的需求，类似长微博生成工具。超宽度文字换行显示，并可设置行高。所以，必须手动实现文字换行功能。当字符累计宽度即将超宽时，插入换行标志。

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...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82103.html

给新手的Python微博爬虫

摘要：结合项目代码看比较好一些说明爬的是手机端网页版的微博听说这个爬起来简单，我就爬了。最后的数据采用序列化后存储在本地想用数据库的自己改一下就好了，不会的可以去看看廖雪峰老师的教程。关于，可以看廖雪峰老师的讲解。为什么说是给新手的呢？因为项目很小，算上空行才200来行代码，甚至有些简陋。相比于动不动写成几个大模块的教程，新手们能更快理解我在干什么，节省学习时间。当然，该有的模拟登陆，数...

XUI 2019-07-30 14:27 评论0 收藏0
SAP UI 搜索分页技术

摘要：搜索分页技术往往和另一个术语懒加载联系起来。该搜索分页的实现归功于请求的参数，，意为从请求命中的第条记录开始总共返回条记录。更多细节，请参考我的博客应用的搜索分页实现原理，全称为，开发技术仍然采用。搜索分页技术往往和另一个术语Lazy Loading（懒加载）联系起来。今天由Jerry首先介绍S/4HANA，CRM Fiori和S4CRM应用里的UI搜索分页的实现原理。后半部分由SA...

dack 2019-08-22 18:13 评论0 收藏0
2018微博词云项目深度解析

摘要：最初产生这个项目的想法应该是在年月份，当时正在学习中，就萌生了这样一个想法从一个用户这一年发布的微博数据中，提取最有意义的个关键词。这些东西提交完就可以提交审核了，微博应用审核的速度还算比较快的，一两天基本差不多会审核完。最初产生这个项目的想法应该是在2018年10月份，当时正在学习python中，就萌生了这样一个想法：从一个用户这一年发布的微博数据中，提取最有意义的top50个关键...

TANKING 2019-07-30 18:42 评论0 收藏0