你一定見過很多制作頭像的小程序,無論是國慶的紅旗,圣誕的帽子,還是疫情的口罩,都可以用小程序生成應景的頭像,那么具體的代碼是怎么實現的呢?前些天幫別人做了一個生成姓氏頭像的功能,里面的實現原理基本一致,都是通過Canvas實現,以生成姓氏頭像為例,記錄一下小程序的Canvas如何使用. (小程序的文檔就是依托答辯??)
小程序Canvs
1.canvas的標簽
如果你想使用它的話,要先在wxml寫上canvas標簽,這里有坑,注意你的寫法,如果你上網copy的代碼,絕大部分是老版的canvas.
老版的canvas,部分api已經失效,新版的文檔寫了等于沒寫.
//舊版 寫法
<canvas canvas-id="myCanvas" />
//新版 寫法
<canvas id="myCanvas" type="2d" />
新版的必須聲明 type="2d"
//區(qū)別不是很大,如果你在網上找代碼 一定要使用對應版本的api2.獲取canvas對象及上下文內容
//舊版獲取canvas上下文
const context = wx.createCanvasContext('myCanvas')
// 新版獲取canvas及上下文
wx.createSelectorQuery() //此方法等于獲取頁面所有節(jié)點
.select('#myCanvas') //類似原生JS的選擇器,這里根據id
.fields({ node: true, size: true })//獲取到的節(jié)點屬性配置,node是否返回實例,size是否返回尺寸大小尺寸
.exec((res)=>{ //獲取之后的回調
// Canvas 對象
const canvas = res[0].node
// 渲染上下文
const ctx = canvas.getContext('2d')
})3.初始化canvas畫布
wx.createSelectorQuery()
.select('#myCanvas')
.fields({ node: true, size: true })
.exec((res)=>{
// Canvas 對象
const canvas = res[0].node
// 渲染上下文
const ctx = canvas.getContext('2d')
// Canvas 畫布的實際繪制寬高
const width = res[0].width
const height = res[0].height
// 初始化畫布大小
const dpr = wx.getWindowInfo().pixelRatio//獲取屏幕比例,用來解決渲染畫布模糊的問題
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)
// 用來解決畫布里面東西能夠自適應,不同屏幕不同尺寸 375不行的話用750
const ratio = wx.getSystemInfoSync()?.windowWidth / 375;
})4.開始繪制canvas內容?(開始接入業(yè)務,可按照自己需求進行)
wx.createSelectorQuery()
.select('#myCanvas')
.fields({ node: true, size: true })
.exec((res)=>{
//...
//省略了步驟3的代碼,使用時,請自己補全!!!!慎記!!!
//...
//清除畫布內容
//前兩個參數 可以理解為 要清除的起點 x y坐標
//后兩位參數 是你要選擇的區(qū)域大小
//以下為例 在畫布的 0 0 起點清空高寬與畫布本身相等的區(qū)域,等于全部清空
ctx.clearRect(0, 0, width, height)
//因為我是生成姓氏頭像,所以畫布的底圖是提前有的
//可以是獲取用戶 可以走接口 圖片地址用Https!!!!
//創(chuàng)建圖片對象
const bg = canvas.createImage()
//底圖地址
bg.src = 'https://gitee.com/ouchFF/blog_img/raw/master/img/bg.jpg'
bg.onload = () => { //圖片加載完畢
//第一個參數是圖片對象 其他參數與清空畫布類似
ctx.drawImage(bg, 0, 0, width, height) //繪制圖片
}
})寫到這一步,不出意外已經可以看見我們繪制的底圖了.
5.生成姓氏,并繪制到canvas畫布上
//這里寫生成姓氏的方法 通過點擊頁面按鈕觸發(fā)
//這里的姓氏 本質是一張圖片 因為生成的姓氏是帶字體的
//設置自定義字體我搞了好久也沒成功,希望有人能給我解答
//正常是 用戶寫一個姓氏,調用接口,后端返回一個姓氏的png圖片地址
//我這里沒有接口,所以直接用我準備好的圖片
selectText() { //點擊按鈕觸發(fā)
//第三步的時候 我已經將 canva相關東西存入data里了 這里直接用
const _this = this.data
const bg = _this.canvas.createImage() //創(chuàng)建圖片對象
//假裝這是后端返回的一個姓氏圖片地址
bg.src = 'https://gitee.com/ouchFF/blog_img/raw/master/img/shuai.png'
bg.onload = () => {
_this.ctx.drawImage(bg, 150 * _this.ratio, 150 * _this.ratio, 40 * _this.ratio, 40 * _this.ratio) //繪制圖片
}
//這里每個值我都乘了一個ratio 這是因為api本身默認單位是px
//在不同屏幕下 可能位置會偏移 為了實現像rpx那樣能自適應,需要乘以一個系數
//這個系數 是在第三步中 計算的
},點擊按鈕后效果如下圖 會看見疊加了一張姓氏圖
?
假設你并沒有字體要求,只是單純的想添加文字,那么也可以按以下寫法
//向畫布中添加 文字
selectText2() {
const { ctx, canvas, ratio,dpr } = this.data
// 設置文字樣式 這代碼是我想設置自定義字體的 并沒有生效,可以忽略
//除了字體樣式 其他設置是生效的
ctx.font = `normal ${50*ratio}px 倉耳漁陽體`; //設置字體
ctx.font = `normal ${50*ratio}px font`; //設置字體
//添加文字 第一個參數是文字內容
//其他參數是起始點x y (這里起始點可能有問題 可以自己看看文檔)
ctx.fillText(this.data.text, 100*ratio, 100*ratio); //繪制文字
},6.將生成的canvas內容保存到我們自己的手機上文章來源：http://www.zghlxwxcb.cn/news/detail-491909.html
save() {
//同樣 新老版本有差異 我這是新版的保存
wx.canvasToTempFilePath({
canvas: this.data.canvas,
success: (res) => {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showToast({
title: "保存成功，請在相冊中查看",
});
},
});
},
fail(error) {
return reject(error);
},
});
},至此,一個簡單的生成頭像功能就完成了.有需要此案例源碼的,可以私信我~~文章來源地址http://www.zghlxwxcb.cn/news/detail-491909.html
到了這里，關于微信小程序canvas畫圖案列,實現生成頭像并保存,小程序新版canvas變化,小程序中canvas注意事項的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
