資訊專(zhuān)欄INFORMATION COLUMN
摘要：概述近日開(kāi)發(fā)移動(dòng)端遇到文字轉(zhuǎn)圖片的需求，類(lèi)似長(zhǎng)微博生成工具。超寬度文字換行顯示，并可設(shè)置行高。所以，必須手動(dòng)實(shí)現(xiàn)文字換行功能。當(dāng)字符累計(jì)寬度即將超寬時(shí)，插入換行標(biāo)志。
0x00 概述
近日開(kāi)發(fā)移動(dòng)端H5遇到文字轉(zhuǎn)圖片的需求，類(lèi)似長(zhǎng)微博生成工具。由于需求簡(jiǎn)單，并未采用rasterizeHTML.js或html2canvas這類(lèi)略顯龐大的html轉(zhuǎn)圖片工具，而是采用canvas原生API直接在畫(huà)布上生成圖片。
理一下思路。
需求：前端實(shí)現(xiàn)文字轉(zhuǎn)圖片。超寬度文字換行顯示，并可設(shè)置行高。
問(wèn)題點(diǎn)：文字換行，文字行高實(shí)現(xiàn)，canvas導(dǎo)出圖片。
0x01 文字換行與行高的原理與實(shí)現(xiàn)CanvasRenderingContext2D對(duì)象唯一的打印文字方法 fillText(text, x, y [, maxWidth]) 不支持文字超寬自動(dòng)換行，即超寬文字被寫(xiě)出畫(huà)布從而不可見(jiàn)。方法的第三個(gè)可選參數(shù)指定打印文本行的最大寬度，必要時(shí)會(huì)縮小整個(gè)文本行的字體尺寸（真是對(duì)文字換行功能毫無(wú)貢獻(xiàn)啊）。
所以，必須手動(dòng)實(shí)現(xiàn)文字換行功能。基本思路是迭代文本行的每一個(gè)字符，然后用measureText(text)方法測(cè)量并累加字符寬度。當(dāng)字符累計(jì)寬度即將超寬時(shí)，插入換行標(biāo)志。當(dāng)所有文字迭代完成后，就得到了一個(gè)已在所有換行位置插入換行標(biāo)志的字符串。
遍歷已插入換行標(biāo)志的字符串時(shí)，每遇一個(gè)換行標(biāo)志，Y軸坐標(biāo)累加行高值一次。
參考：
fillText(): https://developer.mozilla.org...
measureText(): https://developer.mozilla.org...
0x02 canvas導(dǎo)出圖片HTMLCanvasElement.toDataURL()方法可導(dǎo)出畫(huà)布圖像為base64編碼格式的圖片。api見(jiàn) https://developer.mozilla.org...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/82103.html
摘要：結(jié)合項(xiàng)目代碼看比較好一些說(shuō)明爬的是手機(jī)端網(wǎng)頁(yè)版的微博聽(tīng)說(shuō)這個(gè)爬起來(lái)簡(jiǎn)單，我就爬了。最后的數(shù)據(jù)采用序列化后存儲(chǔ)在本地想用數(shù)據(jù)庫(kù)的自己改一下就好了，不會(huì)的可以去看看廖雪峰老師的教程。關(guān)于，可以看廖雪峰老師的講解。 為什么說(shuō)是給新手的呢？ 因?yàn)轫?xiàng)目很小，算上空行才200來(lái)行代碼，甚至有些簡(jiǎn)陋。相比于動(dòng)不動(dòng)寫(xiě)成幾個(gè)大模塊的教程，新手們能更快理解我在干什么，節(jié)省學(xué)習(xí)時(shí)間。當(dāng)然，該有的模擬登陸，數(shù)...
摘要：搜索分頁(yè)技術(shù)往往和另一個(gè)術(shù)語(yǔ)懶加載聯(lián)系起來(lái)。該搜索分頁(yè)的實(shí)現(xiàn)歸功于請(qǐng)求的參數(shù)，，意為從請(qǐng)求命中的第條記錄開(kāi)始總共返回條記錄。更多細(xì)節(jié)，請(qǐng)參考我的博客應(yīng)用的搜索分頁(yè)實(shí)現(xiàn)原理，全稱(chēng)為，開(kāi)發(fā)技術(shù)仍然采用。 搜索分頁(yè)技術(shù)往往和另一個(gè)術(shù)語(yǔ)Lazy Loading（懶加載）聯(lián)系起來(lái)。今天由Jerry首先介紹S/4HANA，CRM Fiori和S4CRM應(yīng)用里的UI搜索分頁(yè)的實(shí)現(xiàn)原理。后半部分由SA...
摘要：最初產(chǎn)生這個(gè)項(xiàng)目的想法應(yīng)該是在年月份，當(dāng)時(shí)正在學(xué)習(xí)中，就萌生了這樣一個(gè)想法從一個(gè)用戶(hù)這一年發(fā)布的微博數(shù)據(jù)中，提取最有意義的個(gè)關(guān)鍵詞。這些東西提交完就可以提交審核了，微博應(yīng)用審核的速度還算比較快的，一兩天基本差不多會(huì)審核完。 最初產(chǎn)生這個(gè)項(xiàng)目的想法應(yīng)該是在2018年10月份，當(dāng)時(shí)正在學(xué)習(xí)python中，就萌生了這樣一個(gè)想法：從一個(gè)用戶(hù)這一年發(fā)布的微博數(shù)據(jù)中，提取最有意義的top50個(gè)關(guān)鍵...
閱讀 932·2023-04-25 23:40
閱讀 3712·2021-11-22 15:22
閱讀 3551·2021-10-09 09:44
閱讀 3405·2021-09-23 11:52
閱讀 1260·2021-09-22 15:43
閱讀 789·2021-09-10 10:51
閱讀 2210·2021-09-06 15:02
閱讀 3204·2021-09-06 15:02
