您现在的位置是:网站首页>前端技术>uniappuniapp

uniapp 实现海报生成,编译到小程序和公众号

神夜2020-05-05 11:03:28uniapp1588人已围观文章来源:神夜个人博客

简介uniapp 实现海报生成,编译到小程序和公众号,注意:小程序在模拟器上可以识别base64位二维码图片,真机上不显示,所以真机上二维码须让后台返回一个路径 ,再通过uni.downloadFile下载获取图片信息。公众号里面远程图片涉及到跨问题,可用base64位图片或者本地项目图片。

uniapp 实现海报生成,编译到小程序和公众号,

注意:

小程序在模拟器上可以识别base64位二维码图片,真机上不显示,所以真机上二维码须让后台返回一个路径 ,再通过uni.downloadFile下载获取图片信息。当然本地图片也是可以的。

公众号里面远程图片涉及到跨域问题,可用base64位图片或者本地项目图片。

二维码图片是后台返回的,返回一个base64位用于公众号,一个路径用于小程序

效果图:



api.js
const go = (url)=>{ uni.navigateTo({ url:url}) } //跳转
const pf = ()=>{  // #ifdef MP-WEIXIN  return 'xcx';  // #endif  // #ifdef H5  return 'gzh';  // #endif
}
const toast = (str)=>{ return uni.showToast({title:str,icon:'none'})} //提示

//导出模块
export default { go, pf, toast }


<style lang="scss" scoped>
.whitebg { height: 100vh; background-repeat: no-repeat; background-size: cover; }
.canvas { width: 650rpx; height: 800rpx; border-radius: 30rpx; overflow: hidden; position: fixed; left: 0; right: 0; margin: auto; top: 50%; transform: translateY(-50%); }
.canvas image { border-radius: 30rpx; }
.canvas canvas { width: 100%; height: 100%; border-radius: 30rpx; display: block; }
</style>
<template>
  <view class="whitebg">  
    <view class="canvas">
      <image :src="imgurl" mode="aspectFill"  v-show="!canvasShow" @longpress="saveImage"></image>
      <canvas style="width:650rpx; height:800rpx;" v-show="canvasShow" canvas-id="firstCanvas"></canvas>
    </view>
  </view>
</template>
< script >
export default {
        components:
        {
            TitleNavigator
        },
        data() {
            return {
                orderNo: '',
                info: {},
                canvasShow: true,
                //显示canvas
                imgurl: '',
                //生成后图片
                cover: this.api.img('order_share_cimg.jpg'),
                //海报背景图
            }
        },
        onLoad(e) {
            this.orderNo = e.orderNo;
            this.getewm();
        },
        methods: {            

            //获取二维码
            async getewm() {
                var that = this;
                const json = await this.api.apiArray.getOrderQrCode({
                    method: 'POST',
                    query: {
                        orderNo: this.orderNo
                    }
                });
                if (json.data.returnCode == 0) {
                    this.info = json.data.result;
                    //小程序
                    if (this.api.pf() == "xcx") {
                        uni.showLoading({
                            title: '海报生成中...',
                            mask: true
                        }) let that = this;
                        uni.downloadFile({
                            url: that.cover,
                            success(res) {
                                that.create(res.tempFilePath);
                            }
                        })
                    }
                    //公众号
                    if (this.api.pf() == "gzh") {
                        uni.showLoading({
                            title: '海报生成中...',
                            mask: true
                        }) that.create('/static/images/order_share_cimg.jpg');
                    }
                }
            },

            create(bg) {
                var that = this;
                let ctx = uni.createCanvasContext('firstCanvas');
                ctx.draw();
                ctx.drawImage(bg, 0, 0, uni.upx2px(652), uni.upx2px(800));
                if (this.api.pf() == "xcx") {
                    let ewm = that.info.qrCodeUrl + '?x-oss-process=style/h3';
                    uni.downloadFile({
                        url: ewm,
                        success(res) {
                            that.create2(res.tempFilePath, ctx);
                        }
                    })
                }
                if (this.api.pf() == "gzh") {
                    that.create2(that.info.image, ctx);
                }
            },

            create2(ewm, ctx) {
                var that = this;
                ctx.drawImage(ewm, uni.upx2px(30), uni.upx2px(640), uni.upx2px(130), uni.upx2px(130));
                ctx.fillStyle = '#3695FF';
                ctx.font = '13rpx MicrosoftYahei'ctx.fillText('¥', uni.upx2px(430), uni.upx2px(595), uni.upx2px(60), uni.upx2px(50)) ctx.font = '25rpx MicrosoftYahei'ctx.fillText(that.info.money, uni.upx2px(455), uni.upx2px(600), uni.upx2px(450), uni.upx2px(50)) ctx.fillStyle = '#888';
                ctx.font = '10rpx MicrosoftYahei'that.drawText(ctx, that.info.infoTitle, uni.upx2px(40), uni.upx2px(570), uni.upx2px(50), uni.upx2px(300));
                ctx.fillText('订单编号:' + that.info.orderNo, uni.upx2px(165), uni.upx2px(680), uni.upx2px(900), uni.upx2px(60));
                ctx.fillText('订单价格:' + that.info.money + '元', uni.upx2px(165), uni.upx2px(720), uni.upx2px(600), uni.upx2px(60));
                ctx.lineWidth = 1;
                ctx.translate(0.5, 0.5);
                ctx.strokeStyle = "#eee";
                ctx.moveTo(uni.upx2px(400), uni.upx2px(620));
                ctx.lineTo(uni.upx2px(400), uni.upx2px(540));
                ctx.stroke();
                ctx.draw(false,
                function() {
                    setTimeout(() = >{
                        uni.canvasToTempFilePath({
                            canvasId: 'firstCanvas',
                            success(res) {
                                uni.hideLoading();
                                that.imgurl = res.tempFilePath that.canvasShow = false;
                                                             },
                            fail(res) {
                                uni.showToast({
                                    title: '生成海报失败',
                                    icon: 'none'
                                });
                            }
                        });
                    },
                    200);
                })
            },

            //文字换行
            drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
                var lineWidth = 0;
                var 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 += 16; //16为字体的高度
                        lineWidth = 0;
                        lastSubStrIndex = i;
                        titleHeight += 30;
                    }
                    if (i == str.length - 1) { //绘制剩余部分
                        ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
                    }
                }
                // 标题border-bottom 线距顶部距离
                titleHeight = titleHeight + 10;
                return titleHeight
            },

            //长按保存图片
            saveImage() {
                if (this.api.pf() == 'xcx') {
                    var that = this;
                    uni.showActionSheet({
                        itemList: ['保存图片'],
                        success: (res) = >{
                            if (res.tapIndex == 0) {
                                uni.saveImageToPhotosAlbum({
                                    filePath: that.imgurl,
                                    success() {
                                        uni.showToast({
                                            title: '保存成功',
                                            icon: 'none'
                                        })
                                    },
                                    fail(rej) {
                                        uni.showToast({
                                            title: '保存失败',
                                            icon: 'none'
                                        })
                                    }
                                })
                            }
                        },
                        fail: function(res) {}
                    });
                }
            }

        }
    } < /script>

<style>
</style >   

站点信息

  • 建站时间:2017-10-24
  • 网站程序:Hsycms 3.0
  • 文章统计:288条
  • 微信公众号:扫描二维码,关注我们
分享按钮