uni用canvas繪製H5端的分享海報

2022-09-18 23:57:09 字數 796 閱讀 4210

花了一天多完成,幾個知識點(坑)的記錄

所以用的是wxqrcode.js,返回的是乙個base64,8是url的規範等級,否則長度超出後會報錯

this.qr = wxqrcode.createqrcodeimg(window.location.href, )

直接用繪圖方法就能根據base64畫出來

ctx.drawimage(this.qr, x,y,widt, height)

畫出來後的分享功能,若是其他平台可以用uni.s**eimagetophotosalbum直接轉為

但h5端不可以,所以用uni.canvastotempfilepath轉為base64後,再寫入img的src

finalheight的高度是所有高度(例如頭部,活動高度,底部)相加乘以2

destwidth是輸出寬度,一般情況預設就可以

uni.canvastotempfilepath(,

})

文字換行,採用的是ctx.measuretext拿到乙個字的寬度,然後不斷遍歷計算,有點麻煩但基本解決需求

const onetextwidth = ctx.measuretext(『一段文字』).width

因為高度是變化的,所以每次高度增加都要重新繪製一次底色,很蠢的辦法,但也沒找到其他方法,待解決。

ctx.fillstyle = '#fff'ctx.fillrect(0, increasingheight, canvasinfo.width,  onetextheight)

canvas實現畫板(移動端 h5)

如下 doctype html utf 8 畫板 title body canvas style head text align center 600 width 900 id canvas 親,您的瀏覽器不支援canvas,換個瀏覽器試試吧!span canvas div window.onloa...

h5移動端適配

原理 postcss function 視覺稿的1 10 在index.html中指定 font size為document寬度的1 10 iphonex 的解析度 2436 1125 pt 812 375 dpr 3 iphonexr的解析度 1792 828 pt 896 414 dpr 3 i...

移動端h5優化

1 減少js載入體積 很多庫能用cdn的盡量使用cdn,這樣打包出來的js體積會很小,載入很快。2 盡量採用比較輕量級的ui 元件庫 比如museui,mintui等 4 儘量減少網路請求數量 程式中的資料,有的能乙個介面返回的盡量乙個介面返回,不要弄太多的介面。5 盡量把大的js 檔案進行分割成小...