uniapp分享图片(canvas标签内容生成图片并保存)

APP：

　　1.异步加载图片数组内容

    // 1.异步加载图片数组内容
    promiseImgArray(api) {
        return (options, ...params) => {
            return new Promise((resolve, reject) => {
                const extras = {
                    success: resolve,
                    fail: reject
                }
                api({
                    ...options,
                    ...extras
                }, ...params)
            })
        }
    },

　　2.绘制准备分享的图片内容

    // 2.绘制准备分享的图片内容 绘制单位为px
    canvasSaveImage(shareInfo) {
    let getImgInfo = this.promiseImgArray(uni.getImageInfo);
    Promise.all([getImgInfo({
                src: '../../static/images/share-bg-img.png'
            }), getImgInfo({
                src: this.$baseURL + this.shareImg
            }), getImgInfo({
                src: '../../static/images/icon-time.png'
            }) ])
    .then(res => {
        console.log(res)
        // 获取页面上的canvas标签的canvas-id
        const ctx = uni.createCanvasContext('shareCanvas');
        // 绘制图片(背景图要首先绘制，不然会被遮盖)
        ctx.drawImage(res[0].path, 0, 0, 325, 391);

        ctx.setFillStyle('white')
        ctx.setFontSize(16)
        // 固定文本内容
        ctx.fillText("有点小九九", 8, 62);

        ctx.setFillStyle('#777777')
        ctx.setFontSize(13)
        // 变量内容
        ctx.fillText(shareInfo.create_time, 46, 137);

        ctx.setFillStyle('#333333')
        ctx.setFontSize(14)
        // 设置文本样式
        ctx.font = "bold 14px sans-serif"
        // 文本换行 (第3个方法)
        this.drawText(ctx, '【' + shareInfo.title + '】', 20, 163, 49, 285)
        // 划线
        ctx.beginPath()
        ctx.moveTo(20, 293)
        ctx.lineTo(305, 293)

        ctx.setFillStyle('#333333')
        ctx.setFontSize(12)
        // 可以添加国际化内容
        ctx.fillText(this.$t('information.shareText2'), 88, 321);

        const qrImgSize = 60
        // 绘制图片
        ctx.drawImage(res[1].path, 20, 309, qrImgSize, qrImgSize)
        ctx.stroke();
        // 绘制整图
        ctx.draw(false, () => {
            // 把canvas生成为图片
            this.tempFileImage()
        })
    })
    .catch(err=>{
        console.log(err)
    })
    },

　　3.控制绘制文本换行

    // 3.控制绘制文本换行
    drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
    let lineWidth = 0;
    let lastSubStrIndex = 0; //每次开始截取的字符串的索引
    for (let i = 0; i < str.length; i++) {
        lineWidth += ctx.measureText(str[i]).width;
        if (lineWidth > canvasWidth) {
            ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分
            initHeight += 22; //22为 文字大小20 + 2
            lineWidth = 0;
            lastSubStrIndex = i;
            titleHeight += 22;
        }
        if (i == str.length - 1) { //绘制剩余部分
            ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
        }
    }
    // 标题border-bottom 线距顶部距离
    titleHeight = titleHeight + 10;
    return titleHeight;
    },

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

    //  4.把当前画布指定区域的内容导出生成指定大小的图片
    tempFileImage() {
    let that = this
    uni.canvasToTempFilePath({
        canvasId: 'shareCanvas',
        success: (res) => {
            console.log(res, 'tempFileImage')
            uni.hideLoading()
            // 保存当前绘制图片
            that.savePic(res.tempFilePath)
        },
        fail: function(err) {
            console.log(err, '图片生成失败')
        }
    })

    }, 

 　　5.保存图片到本地

    // 5.保存图片到本地
    savePic(filePath) {
    // #ifdef APP-PLUS
    uni.showLoading({
        title: '正在保存'
    });
    uni.saveImageToPhotosAlbum({
        filePath: filePath,
        success: function() {
            uni.showToast({
                title: '图片保存成功～'
            });
        },
        fail: function(e) {
            console.log(e, '图片保存失败')
        },
        complete: function() {
            uni.hideLoading()
        }
    });
    // #endif
    // #ifdef H5
    // uni.saveImageToPhotosAlbum 并不兼容h5 写个兼容h5的方法 不一定有用
    var oA = document.createElement('a');
    oA.download = 'share';
    oA.href = data.tempFilePath;
    document.body.appendChild(oA);
    oA.click();
    oA.remove(); // 下载之后把创建的元素删除
    // #endif
    },

　　完工