一、實現邏輯

• 使用wx.downloadFile()獲取圖片的路徑（wx.getImageInfo這個api也可以獲取圖片路徑）
• 使用canvas的api畫出文字與圖片
• 用canvasToImage()生成用canvas畫出來的圖片
• 用wx.saveImageToPhotosAlbum保存圖片到手機

二、期間遇到的問題

• canvas無法使用rpx作為單位做適配，所以要動態獲取手機屏幕的寬度
• 把整個生成圖片的功能封裝成自定義組件時wx.canvasToTempFilePath()與wx.createCanvasContext()這兩個api需要傳去第二個this參數，不然獲取不到canvasId
• 使用wx.canvasToTempFilePath()生成圖片的畫質很模糊，只需要把destWidth，destHeight這兩個參數的值是生成圖片的寬高的4倍即可

三、代碼實現

1. wxml代碼

<view class="canvas-box">
    <canvas 
        class="canvas" 
        canvas-id="shareImg"
        style="width: {{width}}px; height: {{height}}px;z-index: 100;">
    </canvas>
</view>
    
<view class="btn-box">
    <view bindtap="saveImageToLocal">
        <view>保存海報</view>
    </view>
</view>

2. 動態獲取屏幕寬度，獲取自適應單位（ui圖以ipone6為標準）

    //獲取屏幕寬度，獲取自適應單位
    wx.getSystemInfo({
        success: function(res) {
            var num = (res.windowWidth/375).toFixed(2)
            this.setData({rpx: num})
        }
    })
    var rpx = _this.data.rpx
    //給寬高賦值
    this.setData({height: rpx*350})
    this.setData({width: rpx*250})
    this.setData({leftWidth: rpx*60})
    this.setData({topHeight: rpx*110})

3. 下載圖片

    //獲取二維碼圖片
    wx.downloadFile({
        url: url,
        success (res) {
            _this.setData({tempFilePath: res.tempFilePath})
        },
        fail (err) {
            console.log(err,'err')
        }
    })

4.用canvas畫圖

    //在自定義組件中使用canvas，獲取wx.createCanvasContext第二個參數必須傳入this，不然獲取不到
    const ctx = wx.createCanvasContext('shareImg',_this);
    //繪制一個白色矩形
    ctx.setFillStyle('#fff');
    ctx.fillRect(0, 0, _this.data.width, _this.data.height); 
    //繪制背景圖
    ctx.drawImage(
        _this.data.wxBgImg,  //背景圖
        0,  //目標圖片在畫布中x坐標
        0,  //目標圖片在畫布中y坐標
        _this.data.width,  //目標圖片寬
        250*rpx  //目標圖片高
    );
    
    // 繪制想要的文字
    ctx.setFontSize(16);
    ctx.setFillStyle('black');
    ctx.fillText('請掃碼購買', 70*rpx, 300*rpx);
    ctx.stroke();
    // 畫（前面都是準備，這才是畫的那一步）
    ctx.draw(false,_this.canvasToImage());

5. 生成canvas畫出來的圖片

        //畫二維碼
        canvasToImage: function () {
            var _this = this;
            base.hideLoading()
            //這里必須加一個定時器，不然會生成圖片失敗
            setTimeout(() => {
                wx.canvasToTempFilePath({
                    canvasId: 'shareImg',
                    width: _this.data.width,
                    height: _this.data.height,
                    destWidth: _this.data.width*4,//輸出的圖片的寬度是畫布區域的寬度的4倍
                    destHeight: _this.data.height*4,//輸出的圖片的高度是畫布區域的高度的4倍
                    success: res => {
                        console.log(res,'畫二維碼====成功')
                        _this.setData({
                            resultImage: res.tempFilePath
                        });
            
                    },
                    fail: (err) => {
                         console.log(err,"err==========")
                        wx.showToast({
                            title: '圖片生成失敗',
                            icon: 'success',
                            duration: 2000
                        });
                }
            },this);//在自定義組件中使用canvas，獲取wx.canvasToTempFilePath第二個參數必須傳入this，不然獲取不到
        }, 2000);

6. 保存圖片

        //保存圖片
        saveImageToLocal() {
            wx.saveImageToPhotosAlbum({
                filePath: this.data.resultImage,
                    success: res => {
                        wx.showToast({
                            title: '保存成功',
                            icon: 'success',
                            duration: 2000
                        });
                    },
                    fail() {
                        wx.showToast({
                            title: '保存失敗',
                            duration: 2000
                        });
                    }
            });
        },