小程序利用canvas绘制分享图

1、DOM中创建canvas

<canvas canvas-id="shareCanvas" style="width:250px;height:460px"></canvas>

2、创建canvas画布

var canvas = wx.createCanvasContext('shareCanvas')

3、绘制分享图内容

//  X: x坐标 ， Y：y坐标 , W: 宽度 ， H:高度 , path :图片路径 , text: 文本 ，
//  maxwidth: 最大绘制宽度 , r : 圆半径 

3.1  绘制图像到画布  

    canvas.drawImage( path , X , Y , W , H )
    
3.2 绘制文本
    canvas.fillText( text , X, Y, maxwidth)

3.3 绘制矩形
    canvas.fillRect( X, Y , W , H ) 
    
3.4 绘制圆角矩形 （ canvas.arc 绘制圆弧 ）
    canvas.arc( X + r,     Y + r,      r,  - pi,     -pi / 2);
    canvas.arc( X + W - r, Y + r,      r,  -pi / 2,  0);
    canvas.arc( X + W - r, Y + H - r,  r,  0,        pi / 2);
    canvas.arc( X + r,     Y + H - r,  r,  pi / 2,   pi);
    canvas.fill();

4、将当前画布指定区域的内容导出生成指定大小的图片

wx.canvasToTempFilePath({
    x: 100,
    y: 200,
    width: 50,
    height: 50,
    destWidth: 100,             // 输出的图片的宽度
    destHeight: 100,            // 输出的图片的高度
    canvasId: 'shareCanvas',    // 指定canvas的id
    success(res) {    //  res.tempFilePath :  生成文件的临时路径
        console.log(res.tempFilePath)  
    }
})

5、将绘制到处成功的图片保存到本地相册

// 调用前需要 用户授权 scope.writePhotosAlbum
wx.saveImageToPhotosAlbum({
    filePath: res.tempFilePath,
    success: function () {
        wx.showToast({
            title: '保存成功',
            icon: 'success',
            duration: 2000
        })
    },
})

6、出现问题总结

//  data: 需要绘制的文本
6.1  绘制文本超出显示'...'
    if ( data.length <= 17 ) {
        // 不用换行
        canvas.fillText( data , 20 , 265, 280 )
    } else if ( data.length <= 34) {
        // 两行
        let firstLine = data.substring(0, 17 );
        let secondLine = data.substring(17, 29 );
        canvas.fillText( firstLine , 20, 265, 280 )
        canvas.fillText( secondLine , 20, 280, 280 )
    } else {
        // 超过两行
        let firstLine = data.substring( 0, 17 );
        let secondLine = data.substring( 17, 33 ) + '...';
        canvas.fillText( firstLine, 20, 265, 280 )
        canvas.fillText( secondLine, 20, 280, 280 )
    }
    
6.2 绘制网络图片跨域（ 将网络图片先缓存到本地，再使用本地缓存的图片路径绘制图片 ）
    //  提取公共方法
    let  getLocationImg = (imgPath) => {
        return new Promise(function (resolve, reject) {   // 异步处理返回数据
            // 将网络图片缓存至本地
            wx.getImageInfo({
                src: imgPath,
                success: function (res) {
                    resolve(res.path);
                }
            })
        })
    }

注意： 小程序 中若存在绘制在线图片，需要保证图片的在线地址为 “ https ” 的，下载图片时，需要配置相应的donwloadFile配置