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