小程序里面canvas.drawImage中的image必須是本地圖片，所以需要先下載到uni.downloadFile，在獲取圖片信息uni.getImageInfo，最后進(jìn)行繪制ctx.drawImage

參考uni-app api：https://uniapp.dcloud.io/api/canvas/createCanvasContext
頁面：

image.png

image.png

<template>
    <view>
        <canvas class="canvas-area"  canvas-id="postCanvars"></canvas>
        
        <view class="share-area">
            <image class="code-bg" :src="sharePoster" mode="widthFix"></image>
            <image class="code-img" :src="imageUrl"></image>
        </view>
        
        <view class="btn-area">
            <button class="line-circle-btn">稍后分享</button>
            <button class="share-btn">稍后分享</button>
            <button @tap="saveFile" class="line-circle-btn">保存圖片</button>
        </view>
    </view>
</template>

<script>
    export default{
        data(){
            return {
                imageUrl: '',
                sharePoster: ''
            }
        },
        onLoad(option) {
            let dataJson = JSON.parse(decodeURIComponent(option.params))
            this.imageUrl = dataJson.imageUrl
            this.sharePoster = dataJson.sharePoster
            // #ifdef MP-WEIXIN
                uni.downloadFile({
                    url: dataJson.sharePoster,
                    success: function(res){
                        this.sharePoster = res.tempFilePath
                    }
                })
                
                uni.downloadFile({
                    url: dataJson.imageUrl,
                    success:function(res){
                        this.imageUrl = res.tempFilePath
                    }
                })
                
            // #endif
        },
        methods:{
            saveFile(){
                uni.showLoading({
                    title: '正在保存圖片...'
                })
                uni.getImageInfo({
                    src: this.sharePoster,
                    success(res) {
                        let ctx = uni.createCanvasContext('postCanvars')
                        //設(shè)置畫布的寬高
                        ctx.setFillStyle('#FFFFFF'); // 默認(rèn)白色
                        ctx.fillRect(0, 0, uni.upx2px(690), uni.upx2px(910))
                        //畫背景
                        ctx.drawImage(res.path, 0, 0, uni.upx2px(690), uni.upx2px(910))
                        //畫圓 注意保存之前的繪畫，為圖片變成圓形，做準(zhǔn)備
                        ctx.save()
                        ctx.beginPath()
                        ctx.arc(uni.upx2px(690 / 2), uni.upx2px(732 + 69), uni.upx2px(69), 0, Math.PI * 2)
                        ctx.clip()
                        //畫二維碼  
                        ctx.drawImage(_this.imageUrl, uni.upx2px((690 - 138) / 2), uni.upx2px(732), uni.upx2px(138), uni.upx2px(138))           
                                    
                        ctx.draw(true, () => {
                            uni.canvasToTempFilePath({
                                canvasId: 'postCanvars',
                                success: (res) => {
                                    uni.saveImageToPhotosAlbum({
                                        filePath:res.tempFilePath,
                                        success: (res) => {
                                            uni.hideLoading()
                                            uni.showToast({
                                                title:'生成海報(bào)成功'
                                            })
                                        },
                                        fail: (res) => {
                                            uni.hideLoading()
                                            uni.showToast({
                                                title:'生成海報(bào)失敗'
                                            })
                                        }
                                    })
                                },
                                fail: (res) => {
                                    uni.hideLoading()
                                    uni.showToast({
                                        title:'生成海報(bào)失敗'
                                    })
                                } 
                            })
                        })
                    },
                    fail: (res) => {
                        uni.hideLoading()
                        uni.showToast({
                            title:'保存圖片失敗'
                        })
                    }
                })
                
                
            }
        }
    }
</script>

<style>
    
    .share-area{
        width: 690rpx;
        margin: 30rpx;
        position: relative;
    }
    
    .canvas-area{
        width: 690rpx;
        height: 910rpx;
        background: '#FFFFFF';
        border-radius: 20rpx;
        position: absolute;
        left: -10000rpx;
    }
    
    .code-bg{
        width: 100%;
        border-radius: 20rpx;
    }
    
    .code-img{
        width: 138rpx;
        height: 138rpx;
        position: absolute;
        bottom: 40rpx;
        left: 50%;
        transform: translate(-50%);
        border-radius: 50%;
    }
    
    .line-circle-btn{
        width: 177rpx;
        height: 62rpx;
        border-radius: 50rpx;
        line-height: 62rpx;
        border-radius: 35rpx;
        font-size: 26rpx;
        color: #666666;
        border: 1px solid #B8B8B8;
    }
    
    .share-btn{
        width: 198rpx;
        height: 76rpx;
        line-height: 76rpx;
        text-align: center;
        background: #EB2C3E;
        border-radius: 38rpx;
        
        font-size: 34rpx;
        font-weight: 500;
        color: #FFFFFF;
    }
    
    button::after{
        border: none;
    }
    
    .btn-area{
        display: flex;
        margin: 0 69rpx;
        align-items: center;
    }
    
</style>

注意：

如果有更好的方法請(qǐng)告知，互相學(xué)習(xí)