二 實戰一第一階段：小程序canva初始化

1 兩種cavnas獲取上下(xià)文(wén)方式

我們即将解決的問(wèn)題

① taro-vue createCanvasContext 獲取canvas實例無效問(wèn)題，繪制不出來效果？

② taro-vue 初始化獲取不到canvas上下(xià)文(wén)怎麼辦？

微信官網上介紹兩種 canvas 獲取上下(xià)文(wén)方式，一種是老的api ,一種是新的 api ,接下(xià)來我将講解一下(xià)這兩api的用法。

老版本 createCanvasContext 方式

createCanvasContext是微信提供的獲取 canvas實例的老得接口，使用方式如(rú)下(xià)。

wxml

<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas">canvas>
複制代碼

美好的一天從寫一個(gè)hello,world開始。

js中(zhōng)這麼寫

onReady(){
    /*  使用 wx.createContext 獲取繪圖上下(xià)文(wén) context ， firstCanvas 與 canvas 屬性中(zhōng)的canvas-id一一對應  */
    const context = wx.createCanvasContext('firstCanvas')
    /* 設置字體大小 */
    context.setFontSize(20) 
    /* 設置字體顔色 */
    context.setFillStyle('pink')
    /* 設置文(wén)本内容,位置 */
    context.fillText('hello,world', 0, 0)
    context.draw()
}

複制代碼

老版本是使用createCanvasContext傳入 canvas标簽中(zhōng)的 canvas-id屬性，來獲取canvas實例，老版本的使用起來說實話，不夠靈活，很多對canvas線條，顔色的設置，都封裝成方法了,每次改變需要調用方法。

新版本 getContext 上下(xià)文(wén)方式

新的方式，則是先通(tōng)過 createSelectorQuery 獲取 canvas 元素節點, 然後通(tōng)過 getContext 獲取上下(xià)文(wén)。

wxml

 <canvas type="2d" id="myCanvas">canvas>
複制代碼

js

const query = wx.createSelectorQuery()
query.select('#myCanvas')
.fields({
    node: true,
    size: true
})
.exec((res)=>{
    const { node } = res[0]
    if (!node) return
    /* 獲取 canvas 實例 */
    const context = node.getContext('2d')
    context.fillStyle = 'pink'
    /* 設置字體樣式 大小 字體類别 */
    context.font = 'normal 400 12px PingFangSC-Regular',
    context.fillText('hello,world', 0, 0)
})
複制代碼

這種方式和(hé)第一種 createSelectorQuery 方式，在api使用方式上會有微妙的差别，這種寫法更像原生的DOM寫法，設置顔色，樣式，直接改變context屬性，而不再需要調用對應的api。

taro-vue 使用 canvas

解決問(wèn)題： ① taro-vue createCanvasContext 獲取canvas實例無效問(wèn)題，繪制不出來效果？

因為我們小程序技術(shù)選擇是 taro-vue2,所以我這裡重點将一下(xià)，在taro-vue中(zhōng)，目前使用 createCanvasContext 方式獲取 canvas 實例，繪制畫布從來沒有成功過，即便是createCanvasContext能夠創建上下(xià)文(wén)，但是任何東西也畫不出來(傳this之類的方案試了一個(gè)遍)。要是問(wèn)我為什麼？實際我也不知道，隻有凹凸實驗室的同學應該更清楚，GitHub上也有issue，希望taro團隊能夠重視起來。

解決方案就是采用最新的api，就是上述講的第二個(gè)方案。代碼如(rú)下(xià)：

import Taro  from '@tarojs/taro'
const query = Taro.createSelectorQuery()
query.select('#myCanvas')
.fields({
    node: true,
    size: true
})
.exec(res=>{
    //TODO:....
})
複制代碼

② taro-vue 初始化獲取不到canvas上下(xià)文(wén)怎麼辦？

在使用taro-vue的過程中(zhōng)，會面臨一個(gè)問(wèn)題，就是小程序node節點獲取不到的問(wèn)題，這個(gè)有可(kě)能是小程序本身的生命周期，和(hé)vue生命周期混亂造成的。尤其當我們選擇的是組件而不是頁面的情況。對于這樣的情況，官方文(wén)檔給出了答案。頁面首次渲染完畢時執行，此生命周期在小程序端對應小程序頁面的 onReady 生命周期。從此生命周期開始可(kě)以使用 createCanvasContext 或 createselectorquery 等 API 訪問(wèn)真實 DOM。

也就是說如(rú)果想要獲取真是dom節點，我們可(kě)以這麼做，

組件中(zhōng)

mounted () {
    eventCenter.once(getCurrentInstance().router.onReady, () => {
       const query = Taro.createSelectorQuery()
        query.select('#myCanvas')
        .fields({
           node: true,
           size: true
        })
        .exec(res=>{
        //TODO:....
        })         
    })
}

複制代碼

尴尬的是，這種情況下(xià)，有的時候會造成 eventCenter.once() 回調函數不執行的情況，比如(rú)說當前組件的是收到v-if控制的情況。那麼怎麼樣解決呢(ne)，對于這種情況，我教大家一種解決方案。

我們可(kě)以用taro中(zhōng)，通(tōng)過 Taro.nextTick 方法，将獲取元素的任務放在下(xià)一次nextTick執行。

mounted(){
  Taro.nextTick(() => {
      // 獲取元素
  })   
}
複制代碼

2 初始化 canvas設置寬高百分比

我們即将解決的問(wèn)題：

③ 關(guān)于canvas 寬高以及縮放比問(wèn)題，繪制的元素變形，畫布的高度真得等于cavans标簽設置的寬高麼？

<template>
    <view>
        <canvas
            id="myPoster"
            type="2d"
            class="canves"
            :style="canvasStyle"
        />
    view>
<template>
複制代碼

在這裡我們首先要明白二個(gè)概念， 容器(qì)寬高: 我們給canvas标簽設置的寬高,就是如(rú)上代碼中(zhōng)的 canvasStyle,是canvas容器(qì)的寬高。 畫布寬高: 而我們畫布的寬高，在新版本api中(zhōng)，是通(tōng)過獲取node節點，動(dòng)态設置的node.width 和(hé) node.height的值。

我們期望将整個(gè)屏幕作為畫布，對于不同手機，屏幕尺寸都會有差别，所以要動(dòng)态獲取設備的寬高。這裡有一個(gè)問(wèn)題是 容器(qì)寬高等于畫布寬高嗎 , 答案是否定的，為什麼這麼說呢(ne)，原因如(rú)下(xià) 小程序的canvas畫布有一個(gè)原始的畫布寬高，以及縮放比，而且是按照一倍像素來的，當我們給canvas容器(qì)設定容器(qì)寬高之後，如(rú)果沒有對應設置canvas畫布的畫布寬高以及scale，畫出的畫布就會嚴重的變形,我們用一個(gè)例子(zǐ)來解釋。

比如(rú)我們想再畫布上半部分區域，畫一個(gè)圖片，當我們期望正常比例畫 canvas ,如(rú)果我們隻給cavans标簽加寬高，而不給畫布設置寬高的時候。會按照原始畫布的寬高比去繪制。期望結果，畫布充滿屏幕，圖片按照正常比列展示。當我們不給 cavnas 畫布設置畫布寬高 以及縮放比的時候。會發生下(xià)面的情況。

實際效果：

所以我們初始化的時候要給canvas如(rú)下(xià)操作。這個(gè)在微信的官方文(wén)檔中(zhōng)，都有說明。

import Taro, {
    eventCenter,
    getCurrentInstance
} from '@tarojs/taro'

export default {
    
    name:'myPoster',
    data(){
        const {
            windowHeight,
            windowWidth,
            pixelRatio
        } = Taro.getSystemInfoSync() /* 動(dòng)态獲取設備的寬和(hé)高  */
       return {
            canvasStyle: {           /* cavnas 的寬高 */
                width: windowWidth + 'px',
                height: windowHeight + 'px',
            },
            windowWidth,
            pixelRatio,   /* 屏幕縮放比 */
            windowHeight,
            scale:1       
       }
    },
    mounted(){
        Taro.nextTick(() => {
            const query = Taro.createSelectorQuery()
            query.select('#myPoster').fields({
                node: true,
                size: true
            }).exec(res => {
                let {
                    node,
                } = res[0]
                if (!node) return
                 /* 第一步: canvas 畫布的寬高 和(hé) 元素的寬高 必須保持相同的長寬比列,否則會變形 */
                const dpr = this.pixelRatio
                const context = node.getContext('2d')
                node.width = windowWidth * dpr
                node.height = windowHeight * dpr
                context.scale(dpr, dpr)
                context.fillStyle = '#fff'
                context.fillRect(0, 0, windowWidth, windowHeight)
            })
        })
    }
}
複制代碼

當我們設置好畫布寬高，以及縮放比之後，就能按照正常比列進行繪制了。讓我們一起看看設置完縮放比之後的圖片效果，變成了我們想要的效果。

接下(xià)來就是繪制階段。

三 實戰第二階段： 虛拟點位繪制canvas階段

在講解canvas如(rú)何生成海報，完美還原設計稿的問(wèn)題之前，我們應該想一個(gè)問(wèn)題，因為canvas畫布，畢竟不是 dom模型，可(kě)以使用div或者view,通(tōng)過自定義設置樣式來進行布局。cavnas需要我們畫出元素的布局效果，這裡就要精确獲取畫布上每一個(gè)元素相對與畫布的x，y值。那麼首先想到的是如(rú)何獲取每一個(gè)元素精确的x , y 值。

1 虛拟點位還原實際設計稿

解決問(wèn)題： ⑥ 如(rú)何根據設計稿，精确還原海報各個(gè)元素位置問(wèn)題。 針對完美還原設計稿的問(wèn)題，比較靠譜的方案就是,先1:1正常挂在dom元素，然後通(tōng)過獲取元素的位置，來繪制canvas畫布的元素位置。我們用一幅圖來表示其原理。

注意事項

注意事項1: 選擇正确的元素獲取點

這裡打一個(gè)比方，我們在dom元素中(zhōng)可(kě)能存在這樣的結構。

<view class="box" >
    <view class="parent" >
        <view class="son" > 這裡是将要繪制到canvas中(zhōng)的内容。 view>
    view>
view>
複制代碼

對于上面的結構，我們隻需要将 son中(zhōng)的内容繪制到 canvas 畫布中(zhōng)，那麼就有一個(gè)問(wèn)題，我們要獲取哪一層級的元素信息(left,top,width,height),答案應該都能猜到，應該是想要繪制的内容最近的一層，也就是面的son層級。如(rú)果我們選外層，可(kě)能收到父元素padding，margin等影響，導緻真實的位置不準确。

注意事項2: 盡量不要給獲取信息的元素增加 padding marign，如(rú)果繪制文(wén)本内容，盡量容器(qì)高度等于文(wén)本高度

還有一個(gè)問(wèn)題，就是盡量不要給需要繪制的元素，增加 padding marign等屬性，如(rú)果是繪制純文(wén)本，不要設置lineHeight,如(rú)圖下(xià)示例：

我們期望在獲取 a 點的位置信息， 但是最終卻獲取 b點的位置信息。如(rú)果用 b 點位置來繪制canvas,勢必不能完美還原設計稿，所以我們在用這種方式繪制canvas的時候，應該注意這些細節問(wèn)題。

封裝獲取位置信息方法

我們需要繪制海報上的每一個(gè)點位，首先想到的就是獲取小程序元素位置方法，并封裝該方法。我們用promise來防止深層次的回調,并且方便使用async await語法糖。廢話不多說，一言不合上代碼。

    /* 獲取元素位置 */
    geDomPostion(dom, isAll) {
        return new Promise((resolve) => {
            Taro.createSelectorQuery().select(dom).boundingClientRect(rect => {
                const {
                    top,
                    left
                } = rect
                /* isAll 是否獲取設備寬高等信息 */
                resolve(isAll ? rect : {
                    top,
                    left
                })
            }).exec()
        })
    },
複制代碼

小提示：如(rú)果用wx原生,或者其他跨端框架mpvue wepy uniapp是的同學，把 Taro 換成 wx 即可(kě)。

2 繪制網絡圖片

繪制網絡圖片

接下(xià)來我們要解決的問(wèn)題： ⑨ 如(rú)何繪制網絡的圖片,兩種通(tōng)過canvas畫布api，繪制圖片有什麼區别?

我們在用canvas繪制圖片的時候，對于本地圖片可(kě)以直接通(tōng)過canvas提供的drawImage進行繪制，但是對于網絡圖片是不能這麼繪制的，我們首先需要通(tōng)過getImageInfo來獲取圖片的臨時路(lù)徑。用getImageInfo繪制網絡資(zī)源的時候請注意配置一下(xià)合法的下(xià)載域名，要不然我們是無法成功獲取圖片信息的。我們首先需要在小程序後台配置downloadFile合法域名。

具體步驟如(rú)下(xià)： 第一步：

第二步：

第三步：

接下(xià)來我們要做的就是讀取圖片的臨時路(lù)徑，繪制到canvas畫布上來。

 /* backGroundImageUrl 是我們要畫的網絡圖片的地址  */
 this.getImageInfo(this.backGroundImageUrl).then(res=>{
      const {
        width,   /* 寬度 */
        height,  
        path     /* 臨時路(lù)徑 */
      } = res1
      /* 第二步: 繪制banner圖 */
    const bannerImage = await this.geDomPostion('#bannerImage')
    this.startTop = bannerImage.top - 30
    this.drawImage(context, node, path, 0, 0, width, height, 0, this.startTop, windowWidth, windowWidth)
    context.save()
 })
複制代碼

this.drawImage 是我們封裝好的方法，之前說過對于小程序獲取 context兩種接口方式，兩種方式繪制canvas圖片，有一些差别，我們馬上道來。

新老接口繪制圖片的區别

老版本繪制方法

老版本api createCanvasContext可(kě)以直接使用 drawImage繪制圖片。如(rú)下(xià)

/* 繪制圖片 */
context.drawImage(url,x,y,width,height,dx,dy,dwidth,dheight)
複制代碼

當時我們項目用的是第二種新api getContext當時獲取上下(xià)文(wén)，所以在圖片繪制方式上，會有所改變。

新版本繪制方法

  const image = node.createImage()
  image.src = http://www.wxapp-union.com/url
  image.onload = () => {
    context.drawImage(image,x,y,width,height,dx,dy,dwidth,dheight)
  }
複制代碼

用新版本的API 繪制圖片的同學請注意，這個(gè)onload回調是在圖片加載完成時候執行的，所以說明是異步的。還有一個(gè)注意的地方，相比老版本的 drawImage 第一個(gè)參數是圖片的路(lù)徑，而新版本的drawImage第一個(gè)參數是image元素。

封裝繪制圖片方法

剛才在繪制網絡圖片最後一步，我們調用了 this.drawImage 方法。因為整個(gè)海報生成過程中(zhōng)，内部會畫入多張圖片，所以我們單獨封裝了一個(gè)繪制圖片的方法。

/* 繪制圖片 */
drawImage(context, node, url, ...arg) {
    return new Promise((resolve) => {
        const image = node.createImage()
        image.src = http://www.wxapp-union.com/url
        image.onload = () => {
            context.drawImage(image, ...arg)
            resolve()
        }
    })
},
複制代碼

這樣我們就可(kě)以通(tōng)過,async,await判斷圖片是否加載完成。

簡介 context.drawImage

我這裡簡單給大家介紹一下(xià)context.drawImage用法，

CanvasContext.drawImage(imageResource / dom, sx,  sy,  sWidth,  sHeight,  dx,  dy,  dWidth,  dHeight)
複制代碼

繪制圖像到畫布,第一個(gè)參數，在老api中(zhōng)代表路(lù)徑，在新版本api中(zhōng)代表imagDom元素，

sx 需要繪制到畫布中(zhōng)的，imageResource / dom 的矩形（裁剪）選擇框的左上角 x 坐(zuò)标

sy 需要繪制到畫布中(zhōng)的，imageResource / dom 的矩形（裁剪）選擇框的左上角 y 坐(zuò)标

sWidth 需要繪制到畫布中(zhōng)的，imageResource / dom 的矩形（裁剪）選擇框的寬度

sHeight 需要繪制到畫布中(zhōng)的，imageResource / dom 的矩形（裁剪）選擇框的高度

dx imageResource的左上角在目标 canvas 上 x 軸的位置

dy imageResource的左上角在目标 canvas 上 y 軸的位置

dWidth 在目标畫布上繪制imageResource的寬度，允許對繪制的imageResource進行縮放

dHeight 在目标畫布上繪制imageResource的高度，允許對繪制的imageResource進行縮放

我們用一幅圖表示各個(gè)屬性的對應什麼。

3 繪制層級圖片

解決問(wèn)題： ④ canvas怎麼繪制疊在一起的兩張圖片，并控制層級？

如(rú)果我們繪制疊在一起的兩張圖片，需要我們做一些什麼樣的工作呢(ne)？首先想到的是層級問(wèn)題，我們期望背景圖片放在下(xià)面，例如(rú)頭像之類的圖片放在上面，但是在畫布中(zhōng)沒有控制zIndex層級的屬性，那麼怎麼樣處理這個(gè)問(wèn)題呢(ne) ？答案是實際在canvas中(zhōng)，繪制的先後順序 就是畫布層級順序，後畫的在先畫的上層，那麼對于這種層級問(wèn)題呢(ne)，我們隻要保證層級高的元素後畫，層級低的元素先畫就可(kě)以完美解決，接下(xià)來我們在海報中(zhōng)，畫上頭像，文(wén)字等信息。

<image  class="userheadImage"  id="userheadImage"  :src="headImage"  />

複制代碼

    /*TODO: 繪制頭像 */
    const userheadImage = await this.geDomPostion('#userheadImage',true)
    /* 圓形圖片 */
    let d = userheadImage.height / 2
    const cx = userheadImage.left + userheadImage.width / 2
    let cy = userheadImage.top + userheadImage.height / 2
    context.arc(cx, cy, d, 0, 2 * Math.PI)
    context.strokeStyle = '#FFFFFF'
    context.stroke()
    context.clip()
    await this.drawImage(context, node, this.headImage, userheadImage.left, userheadImage.top, userheadImage.width, userheadImage.height)
    context.restore()
    this.drawText(context,{ top: userheadImage.top + userheadImage.height + 40 ,left : userheadImage.left - 70 },'我不是外星人「前端Sharing」',18,'normal 600 20px PingFangSC-Regular','#fff')
複制代碼

在我們使用context.clip()之後，記得使用context.restore()重置，否則将無法繪制其他元素。

效果：

我們完美解決了片文(wén)本的層級問(wèn)題，接下(xià)來，我們就要繪制海報的主要的内容了。在我們繪制海報的時候，可(kě)能會遇到多行文(wén)本的情況，那麼多對多行文(wén)本，我們是怎麼解決的呢(ne)？

4 繪制多行文(wén)本

解決問(wèn)題：⑤ 如(rú)何用canvas繪制，多行文(wén)本？

canvas畫的文(wén)本，并不能像我們的dom元素下(xià)的文(wén)本一樣，可(kě)以自動(dòng)換行，我們如(rú)何還原，多行文(wén)本的效果呢(ne)。這這裡教大家一種方法，我們可(kě)以一個(gè)一個(gè)字的繪制到canvas中(zhōng)，然後把每個(gè)字的寬度相加，如(rú)果總寬度大于容器(qì)的寬度，那麼就另外起一行，增加每一行的高度，從頭開始畫。，我們直接上代碼。

       /** 畫多行文(wén)本
         * @param ctx          canvas 上下(xià)文(wén)
         * @param str          多行文(wén)本
         * @param initHeight   容器(qì)初始 top值
         * @param initWidth    容器(qì)初始 left值
         * @param canvasWidth  容器(qì)寬度
         */
        drawRanksTexts(ctx, str, initHeight, initWidth, canvasWidth) {
            let lineWidth = 0;
            let lastSubStrIndex = 0;
            /* 設置文(wén)字樣式 */
            ctx.fillStyle = "#303133"
            ctx.font = 'normal 400 15px  PingFangSC-Regular'
            for (let i = 0; i < str.length; i++) {
                lineWidth += ctx.measureText(str[i]).width
                if (lineWidth > canvasWidth) { /* 換行 */
                    ctx.fillText(str.substring(lastSubStrIndex, i), initWidth, initHeight)
                    initHeight += 20
                    lineWidth = 0
                    lastSubStrIndex = i
                }
                if (i == str.length - 1) {  /* 無需換行 */
                    ctx.fillText(str.substring(lastSubStrIndex, i + 1), initWidth, initHeight)
                }
            }

        },
複制代碼

調用

/* TODO: 複制多行文(wén)本 */
const rowsText = await this.geDomPostion('#context', true)
this.drawRanksTexts(context, this.skuName, rowsText.top, rowsText.left, rowsText.width)
複制代碼

四 實戰第三階段： 生成二維碼

接下(xià)來我們做的是繪制二維碼，繪制二維碼過程，筆者踩了不少(shǎo)的坑，尤其taro-vue不支持createCanvasContext方式，希望我能用自己踩的坑，讓大家避開相同的錯誤，避免大家少(shǎo)走很多彎路(lù)。繪制二維碼實際并沒有想象的複雜，實際就是将鍊接轉換成二維碼，讓手機掃碼或者長按可(kě)以識别即可(kě)，雖然原理很簡單，但是還是有很多注意的細節。

繪制二維碼無異于二種方式，第一種方式就是用canvas畫出來。第二種将鍊接轉成base64的鍊接，然後讓圖片展示鍊接。 接下(xià)來我們針對這兩種方式，進行二維碼庫的技術(shù)選型。

1 關(guān)于二維碼庫選型

解決問(wèn)題 ⑨ 如(rú)何正确選型生成二維碼工具？

形成二維碼的過程，我們肯定不能手撸算法，因為即便我們能手撸出來，也會占用大量時間，還會有很多bug,因為現在生成二維碼的生态已經很健全了，比如(rú) qrcode.js等等都是非常不錯的，但是唯一不好的是不支持小程序端。我這裡介紹幾個(gè)二維碼的庫

weapp-qrcode

對于比如(rú)短(duǎn)鍊接，不必拼寫很長的參數，這種情況用 weapp-qrcode 綽綽有餘。這種方式是基于第一種用canvas繪制的。而且是采用老版本的api , 這樣的話就有一個(gè)問(wèn)題，如(rú)果像用新的 getContext 方式，就需要把源碼下(xià)載下(xià)來，然後改動(dòng)一下(xià)源碼，讓它支持 getContext 這種方式。我們來簡介一下(xià) weapp-qrcode的使用。

使用

//  将 dist 目錄下(xià)，weapp.qrcode.esm.js 複制到項目目錄中(zhōng)  如(rú)果用 taro uniapp 等框架 ，可(kě)以用  npm install 
import drawQrcode from '../../utils/weapp.qrcode.esm.js'

drawQrcode({
  width: 200,
  height: 200,
  canvasId: 'myQrcode',
  // ctx: wx.createCanvasContext('myQrcode'),
  text: 'https://juejin.cn/user/2418581313687390',
  // v1.0.0+版本支持在二維碼上繪制圖片
  image: {
    imageResource: '../../images/icon.png',
    dx: 70,
    dy: 70,
    dWidth: 60,
    dHeight: 60
  }
})
複制代碼

結果

這種方式下(xià)，最後确實成功了，因為在做demo的時候，我用的是github短(duǎn)鍊接。但是一回歸筆者公司的項目，很長的鍊接，奈何生成的二維碼特别密集，手機根本識别不出來，無奈前功盡棄了，隻能換其他的技術(shù)方案，所以筆者選擇了第二種比較穩的方式，形成base64文(wén)件。

qrcode-base64

qrcode-base64 是将二維碼的鍊接，轉成base64的鍊接，并把這個(gè)鍊接作為src屬性賦值給圖片。我們先介紹一下(xià)基本用法。

下(xià)載

npm install qrcode-base64
複制代碼

使用

import QR from 'qrcode-base64'

var imgData = http://www.wxapp-union.com/QR.drawImg(this.data.codeText, {
    typeNumber: 4,
    errorCorrectLevel: 'M',
    size: 500
})
// 返回輸出base64編碼imgData
複制代碼

如(rú)上述代碼塊所示，imgData就是生成的base64鍊接，我們可(kě)以直接把它作為圖片的src，然後讓canvas将圖片繪制到我們的海報中(zhōng)去，但是又來了一個(gè)問(wèn)題，canvas是不支持繪制base64的鍊接圖片的，真機上沒有任何效果，真實一步十個(gè)坑啊，我們還得想辦法解決這個(gè)問(wèn)題。

2 canvas 繪制 base64圖片

解決問(wèn)題 ⑦ canvas怎麼繪制base64的圖片

對于上面說到的canvas不支持base64的圖片，那麼我們還要把二維碼繪制到海報中(zhōng)，那麼并不是沒有辦法，我們可(kě)以用小程序提供的文(wén)件系統來解決問(wèn)題。

小程序文(wén)件系統

wx.getFileSystemManager 獲取全局唯一的文(wén)件管理器(qì),返回值 類似于node中(zhōng)的fs.

writeFile 寫入文(wén)件，可(kě)以将圖片寫入系統中(zhōng)。

const fs = wx.getFileSystemManager()

fs.writeFile(/* 寫入文(wén)件 */)
複制代碼

封裝方法

封裝繪制二維碼方法

  /* 生成二維碼 */
        drawCode(ctx, node, x, y) {
            return new Promise((resolve) => {
                const codeImageWidth = 150   /* 繪制二維碼寬度 */
                const canvasImageWidth = 85 /* 二維碼繪制到canvas的寬度 */
                const left = x - 15          /* left 值 */
                const top = y - 22           /* top 值 */
                const LogoWidth = 15       /* 二維碼logo寬度 */
                const url = 'https://juejin.cn/user/2418581313687390'
                
                const base64 = QR.drawImg(url, {
                    typeNumber: 4,
                    errorCorrectLevel: 'L',
                    size: codeImageWidth
                })
                /* 創建讀寫流 */
                const fs = Taro.getFileSystemManager()
                const times = new Date().getTime()
                const codeimg = Taro.env.USER_DATA_PATH + '/' + times + '.png'

                /* 将base64圖片寫入 */
                fs.writeFile({
                    filePath: codeimg,
                    data: base64.slice(22),  /* 數據流 */
                    encoding: 'base64',      
                    success: async () => {
                        const offset = (canvasImageWidth - LogoWidth) / 2 /* 偏移量 */
                         /* 繪制圖片 */
                        await this.drawImage(ctx, node, codeimg, 0, 0, codeImageWidth, codeImageWidth, left, top, canvasImageWidth, canvasImageWidth)
                        await this.drawImage(ctx, node, this.logoUrl, left + offset, top + offset, LogoWidth, LogoWidth)
                        resolve()

                    }
                })
            })

        },
複制代碼

如(rú)上所示我們完成了二維碼的繪制。讓我們來看一下(xià)如(rú)何使用。

使用

我們在wxml上寫一個(gè)元素，作為占位，方便我們可(kě)以獲取二維碼的位置。

<view id="qrCode" class="store-uscode" />
複制代碼

/*TODO: 第四步：繪制二維碼 */
const qrCode = await this.geDomPostion('#qrCode')
await this.drawCode(context, node, qrCode.left - 20, qrCode.top - this.cavnsOffsetop)
複制代碼

3 調試二維碼大小，如(rú)何讓二維碼可(kě)以識别，繪制二維碼logo

解決問(wèn)題：⑩ 生成的二維碼，識别不出來怎麼辦。

有的時候我們展示的二維碼比較小的時候，因為色塊太密，手機也會有無法識别的情況。那麼我們如(rú)何調整二維碼，有能讓頁面盡量高保真的還原設計稿呢(ne)，這裡教大家一個(gè)小技巧，可(kě)以去先去二維碼生成網站(zhàn)，先适配手機可(kě)以識别的最佳比例，避免識别不出來的情況。推薦網站(zhàn)：草料二維碼 ： https://cli.im/ 我們可(kě)以在線調試二維碼的像素，和(hé) logo的大小，直到調整出，能夠符合設計的最佳大小。

在線調整二維碼

微調整 有的時候，我們需要對二維碼大小進行微調整，我這裡建議在調試階段，建立起常量控制，并調整寫好調整方法或公式。這樣做的好處是，每當我們作出微調整的時候，不會影響因為當前調整而再計算，如(rú)下(xià)。

const codeImageWidth = 150   /* 繪制二維碼寬度 */
const canvasImageWidth = 85  /* 二維碼繪制到canvas的寬度 */
const left = x - 15          /* left 值 */
const top = y - 22           /* top 值 */
const LogoWidth = 15         /* 二維碼logo寬度 */

const offset = (canvasImageWidth - LogoWidth) / 2 /* 偏移量 */
複制代碼

4 完事具備，生成海報圖片，轉發好友

我們已經跑完整個(gè)流程。就剩下(xià)最後一步，生成海報圖片，轉發圖片了。生成海報可(kě)以用微信小程序canvas中(zhōng)的canvasToTempFilePath生成圖片路(lù)徑，然後通(tōng)過previewImage方法浏覽圖片，浏覽圖片時候就可(kě)以喚醒微信小程序的分享好友功能了。這裡有一點我們應該注意，就是要截取canvas的有效高度。

上代碼：

/* 生成海報 */
makePc(node) {
    const {
        startTop,    /* 截取canvas畫布的頂部 */
        endTop,      /* 截取canvas畫布的底部 */
        windowWidth  /* 屏幕寬度 */
    } = this
    const _this = this
    Taro.canvasToTempFilePath({
        x: 0,
        y: startTop,
        width: windowWidth,
        height: endTop - startTop,
        destWidth: windowWidth * 3,
        destHeight: (endTop - startTop) * 3,
        canvas: node,
        success: function (res) {
            Taro.hideLoading()
            Taro.previewImage({
                urls: [res.tempFilePath]
            })

        }
    })
}
複制代碼

canvasToTempFilePath 注意事項

還是回到最初的那個(gè)問(wèn)題，在調用 canvasToTempFilePath 方法的時候，新老 api 傳遞的參數不同。

在老版本API中(zhōng) ，通(tōng)過createCanvasContext 方式繪制的canvas ，canvasToTempFilePath 的配置屬性canvas， 微信開發者文(wén)檔是這麼解釋的 canvas 畫布标識，傳入 canvas 組件實例 （canvas type="2d" 時使用該屬性）, 也就是canvas上下(xià)文(wén)context。

但是我們用的是新版本 ,通(tōng)過 getContext 方式繪制的canvas ,當我們傳入的是context,竟然沒有效果，what? 還有這種事，難道是微信開發者文(wén)檔出現了問(wèn)題嗎？後來發現在這種方式下(xià)，傳入的是通(tōng)過 query.select獲取的canvas 的node節點，真是坑不少(shǎo)啊～～～。一口老血都要噴出來了

五 總結

在做這個(gè)功能的時候，真是遇到了很多坑，甚至于有一種欲哭無淚的感覺，不過踩着坑一路(lù)走來，确實也收獲蠻多。