1. 首頁 > 生活百科 > >

生成海報， 生成有特色的頭像 小程序利用canvas 繪制圖案

生活百科

小程序利用canvas 繪制圖案 （生成海報，生成有特色的頭像）微信小程序生成特色頭像，海報等是比較常見的 。下面我來介紹下實現該類小程序的過程 。

  1. 首先選擇前端來通過 canvas 繪制 。這樣比較節省成本，效率也高 。
  2. 小程序使用uniapp 來進行開發，方便后期打包為微信，百度等小程序 。
  3. 可以掃碼體驗下 我的小程序 制作個性化的頭像，
    生成海報， 生成有特色的頭像 小程序利用canvas 繪制圖案

    文章插圖
  4. 下面介紹使用 wxml2canvas 生成頭像的小程序的制作過程
創建項目
  1. 使用HBuilderX 創建一個 uni-app 的項目，可以參照uniapp 官網 。
  2. 下載項目使用的依賴 npm init 創建package.json
  3. yarn add less wxml2canvas
生成頭像的重要步驟
  1. 首先思路是上傳一張自己想做為頭像的圖片
  2. 然后選擇自己想給該圖片添加的元素，利用css 定位，使圖片位置重疊，產生新的效果
  3. 講最新的效果生成圖片，并下載 。
上傳圖片上傳圖片可以提供兩種思路，一種是直接使用微信頭像 。一種是用戶自己上傳圖片
  1. 使用微信頭像的方案
wxLogin() {let _this= this;wx.getUserProfile({desc: '獲取你的頭像',success: res => {console.log(res)_this.headUrl = res.userInfo.avatarUrl},fail: () => {//拒絕授權wx.showToast({title: '您拒絕了請求,不能獲取你的頭像',icon: 'error',duration: 2000});return;}});},
  1. 用戶自己上傳圖片，可以直接從相冊中選擇，也可以使用相機 。
pictureClick (selectid) {const _this = this;let typelist = selectid === 1 ? ['camera'] : ['album']uni.chooseImage({count: 1,sourceType: typelist, //這要注意，camera掉拍照，album是打開手機相冊crop: {width: 320,height: 320},success: (res)=> {_this.$refs.gmyImgCropper.chooseImage(res)}});},
  1. 自己上傳的圖片，需要使用canvas 來進行裁剪為頭像比列相同的圖片
<imgCropper ref="gmyImgCropper" :quality="1" cropperType="fixed" :imgSrc="/uploads/allimg/231019/1H02H3a-1.jpg" @getImg="getImg"></imgCropper>// 上面 是裁剪圖片的組件 ，  篇幅較大，可以參考項目源碼利用css 定位生成效果圖<view class="head-box" :style="{marginTop: headboxStyle, height: showImgW}"><canvas canvas-id="myCanvas" class="myCanvas" :style="{width: showImgW, height: showImgW}"></canvas><viewclass="showimg showimg-box head-img-border" :style="{width: showImgW, height: showImgW}"><pickerselect@modelselect="modelselect"><view class="showimg normalimgbox" :style="{width: showImgW, height: showImgW, background: currentInfo.iconColor}"><image class="headimg normalimg"src="http://img.zhejianglong.com/231019/1H02L343-2.png"/></view><view id="my-canvas" class="my_canvas"><view class="showimg" :style="{width: showImgW, height: showImgW}"><image mode="aspectFill " data-type="image" :data-url="headUrl"class="headimg my_draw_canvas" :src="http://img.zhejianglong.com/231019/1H02H3a-1.jpg"/></view><view class="showimg" :style="{width: showImgW, height: showImgW}"><image mode="heightFix" data-type="image" :data-url="selectimg" class="headimg my_draw_canvas" :src="http://img.zhejianglong.com/231019/1H02II6-4.jpg"/></view></view></pickerselect></view></view>利用wxml2canvas 生成最終的頭像圖片import Wxml2Canvas from 'wxml2canvas'export const startDraw = ()=> {let that = this// 創建wxml2canvas對象let drawMyImage = new Wxml2Canvas({element: 'myCanvas', // canvas的id,obj: that, // 傳入當前組件的thiswidth: 200* 2,height: 200 * 2,background: '#141415', // 生成圖片的背景色progress(percent) { // 進度console.log(percent);},finish(url) { // 生成的圖片wx.hideLoading()savePoster(url)},error(res) { // 失敗原因console.log(res);wx.hideLoading()}}, this);let data = https://www.huyubaike.com/biancheng/{// 獲取wxml數據list: [{type:'wxml',class: '.my_canvas .my_draw_canvas',// my_canvas要繪制的wxml元素根類名 ，  my_draw_canvas單個元素的類名（所有要繪制的單個元素都要添加該類名）limit: '.my_canvas', // 要繪制的wxml元素根類名x: 0,y: 0}]}// 繪制canvasdrawMyImage.draw(data, this);}export const drawMyCanvas = () => {wx.showLoading()const that = thiswx.createSelectorQuery().select('#my-canvas') // 在 WXML 中填入的 id.fields({ scrollOffset: true, size: true }, () => {startDraw()}).exec(() => {console.log(888)})}將生成的圖片下載到本地export const savePoster = (url) => {const that = thiswx.saveImageToPhotosAlbum({filePath: url,success: function() {wx.showToast({title: '保存成功',icon: 'none',duration: 1500});},fail(err) {if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {wx.showModal({title: '提示',content: '需要您授權保存相冊',showCancel: false,success: modalSuccess => {wx.openSetting({success(settingdata) {if (settingdata.authSetting['scope.writePhotosAlbum']) {wx.saveImageToPhotosAlbum({filePath: url,success: function () {wx.showToast({title: '保存成功',icon: 'success',duration: 2000})},})} else {wx.showToast({title: '授權失敗，請稍后重新獲取',icon: 'none',duration: 1500});}}})}})}}})}

推薦閱讀