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