uniapp生成海报完整示例

uniapp-canvas示例

<template>
    <view style="width: 80vw; height: 80vh">
        <image v-if="showposter" show-menu-by-longpress="true" class="poster" mode="aspectFill" style="width: 100%; height: 100%" :src="canvasimg"></image>
        <canvas   v-else  canvas-id="myCanvas" id="myCanvas" style="width: 100%; height: 100%"></canvas>        
        <view class="shareTip">长按保存或分享</view>
    </view>
</template>

<script>
const app = getApp();

export default {
    props: {
        begindraw: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        begindraw: function (o, n) {
            console.log('nnnnnn', n);

            this.dotest();
            //  this.doposter()
        }
    },
    data() {
        return {
            showposter: false,
            canvasimg: '',
            canvaImgW: '',
            canvaImgH: '',
            qrcode: '',
            imagePath: '',
            canvaImgUrl: ''
        };
    },
    onLoad() {
        // this.getShareQr()
    },
    beforeMount() {},
    created() {
        // this.doposter()
    },
    onShow() {},
    onReady() {},
    methods: {
        drawBackground() {
            const canvasId = 'myCanvas';
            const ctx = uni.createCanvasContext(canvasId, this);
            let that = this;
            let schoolInfo = uni.getStorageSync('schoolInfo');
            let sc = schoolInfo.customInfo.customName || '';
            let schphone = schoolInfo.customInfo.phone || '';
            let address = schoolInfo.customInfo.address || '';
            uni.getSystemInfo({
                success: function (res) {
                    if (res) {
                        that.cwidth = res.windowWidth;
                        that.cheight = res.windowHeight;
                    }
                }
            });
             
            this.qrcode = app.globalData.baseResUrl;//二维码地址
         
            if (schoolInfo && schoolInfo.customInfo && schoolInfo.customInfo.imgs) {
                this.canvaImgUrl = app.globalData.baseResUrl ;//机构背景图地址
            }  

            uni.downloadFile({
                url: this.canvaImgUrl,
                success(res) {
                    uni.getImageInfo({
                        src: that.canvaImgUrl,
                        success: function (image) {
                            that.canvaImgW = image.width;
                            that.canvaImgH = image.height;
                        }
                    });
                    ctx.drawImage(res.tempFilePath, 0, 0, that.canvaImgW, that.canvaImgH, 0, 0, that.cwidth * 0.81, that.cheight * 0.8);
                    ctx.rect(0, that.cheight * 0.65, that.cwidth * 0.81, 400);
                    ctx.setFillStyle('white');
                    ctx.fill();
                    ctx.setFillStyle('black');
                    ctx.font = 'normal bold 12px Arial,sans-serif ';
                    ctx.fillText(sc, 16, that.cheight * 0.65 + 30);
                    ctx.fillText('报名找我:' + schphone, 16, that.cheight * 0.65 + 50);
                    ctx.fillText('地址:' + address, 16, that.cheight * 0.65 + 70);
                    
                    uni.getImageInfo({
                        src: that.qrcode,
                        success: (res) => {
                            // console.log('imagePath', res);
                            ctx.drawImage(res.path, that.cwidth * 0.8 - 100, that.cheight * 0.65 + 10, 80, 80);
                            console.log('ctx',ctx)
                            ctx.draw(false, () => {
                                
                                 
                                    console.log('ctx2',ctx)
                                    uni.canvasToTempFilePath({
                                         canvasId: canvasId,
                                        success: (res) => {
                                             
                                            console.log('临时图片路径：', res.tempFilePath);
                                            that.canvasimg = res.tempFilePath;
                                            that.showposter=true;
                                            uni.hideLoading()
                                         
                                        },
                                        fail: (error) => {
                                            console.error('转化图片失败：', error);
                                        }
                                    },that);
                                    
                         
                                
                            });
                        },
                        fail: (err) => {
                            console.error(err);
                        }
                    });

                     
                }
            });
        },
        async doposter() {
            uni.showLoading({
                title: '正在生成海报'
            });
            await this.drawBackground();
        }
    }
};
</script>

<style lang="scss" scoped>
.shareTip {
    background: #fff;
    text-align: center;
    padding: 5px;
    margin-top:-5px;
}
</style>

需要注意的是this关键字

uni.canvasToTempFilePath(object, component)
组件形式需要加指向component也就是this
uni.createCanvasContext(canvasId, this)