微信小程序生成图片分享朋友圈

一、实现逻辑

• 使用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
                        });
                    }
            });
        },