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
    },

　　完工