【uniapp】h5 生成邀新海报（canvas绘制海报和二维码，两者拼接）

一、邀新二维码和海报拼接
- 1.引入插件到components文件下
- 2.在需要写弹框海报的页面写入如下代码
二、最终效果

一、邀新二维码和海报拼接

1.引入插件到components文件下

2.在需要写弹框海报的页面写入如下代码

template

  <uni-popup ref="invitePoster" type="center" maskBackgroundColor="rgba(0,0,0,.7)" :isMaskClick="true"><view class="content" @click="closePoster"><view class="post"><p style="color: #ffffff;font-size: 30rpx;margin-top: 100rpx;">长按保存图片至相册</p><view class="content" style="text-align: center;margin: -20rpx auto 80rpx;transform: scale(0.9);"><view style="margin: 0 auto;width: 100%;"><img id="test" style="width: 686rpx;height: 1214rpx;" /></view></view></view><view class="tupian" @click="erweima" style="text-align: center;"></view></view></uni-popup><view class="bottom-btn-box"><view class="bottom-btn" @click="getPoster">立即邀请</view></view>

script

import canvas_x from '@/components/mg-h5hb/common/canvas_x.js'
export default {data() {return {poster: {},canvasId: 'default_PosterCanvasId',nickname: "",code: '',userInfo: null,};},methods: {//获取邀请二维码async getInviteCode() {//我封装的请求方法，改成你们自己封装的请求let data = await this.$api.request(二维码接口, 'GET', {}, 'token', false)this.code = JSON.parse(data).data},erweima() {var that = thisthis.tishi = 1;canvas_x.makeImage({type: 'url',parts: [{type: 'image',//海报图片url: '../../../static/invitePoster.png',width: 680,height: 1264,backgroundSize: 680,},{type: 'qrcode',text: this.$callbackUlr + '/pages/index3/homePage?loginType=Mobile&inviteCode=' +this.code,x: -44,y: -44,width: 100,height: 100,padding: 0,background: '#fff',level: 3},{type: 'text',text: '邀请人:',textAlign: 'left',lineAlign: 'TOP',x: 440,y: 1115,color: 'black',size: '30px',bold: true},{type: 'text',text: '邀请码:' + this.code,textAlign: 'left',lineAlign: 'TOP',x: 440,y: 1185,color: 'black',size: '30px',bold: true}],width: 680,height: 1264}, (err, data) => {document.getElementById('test').src = data})},async getPoster() {await this.getInviteCode()await this.erweima()this.$refs.invitePoster.open('center')},
}

style

// An highlighted block
<style lang="scss">
.post {width: 100%;position: relative;top: 0rpx;z-index: 10;text-align: center;
}
</style>

二、最终效果

【uniapp】h5 生成邀新海报（canvas绘制海报和二维码，两者拼接）相关推荐

【Python实例分析】批量生成海报--自动添加姓名和二维码
最近参加了老男孩的一个python训练营,里面某项任务是要求在某个海报模板上批量添加姓名和二维码,生成类似下图的海报. 图中我用红色方框标记的是需要修改的地方,先来聊下自己的思路: 1.要进行图片操作 ...
TP5使用二维码PHP QR Code生成带LOGO和不带LOGO的二维码
TP5使用二维码PHP QR Code生成带LOGO和不带LOGO的二维码 1.下载二维码插件Phpqrcode,地址 https://sourceforge.net/projects/phpqrco ...
微信小程序 Canvas drawImage()绘图头像二维码安卓用户显示半透明！
微信小程序 Canvas drawImage() 图片在安卓显示为半透明我遇到的是drawImage()方法绘制头像和二维码时开发工具测试没问题真机测试则出现以下样式具体问题不太清楚,有可能 ...
Vue页面生成分享海报最详说明(含二维码+多种水印方式+常见的坑处理)
功能需求: 海报有1张背景图, 海报上的文案内容动态变化在背景图的某个位置上添加二维码图片水印功能大致思路 html页面部分, 包括背景图,接口得来的数据,以及二维码图片的位置使用 qrcod ...
uni-app二维码生成，点击按钮弹框展示二维码
uni-app二维码生成,点击按钮展示二维码文章 uni-app二维码生成,点击按钮展示二维码前言一.首先我用的是HBuilderX,新建uni-app项目二.使用步骤 1.先下载插件uQRC ...
小程序生成海报携带参数-云函数生成二维码
1. 逻辑代码 async qcFn() {console.log('生成海报');let that = thisconst houseId = this.data.houseDetail._idco ...
vue 生成带背景图片，文字图片自定义二维码图片
CSS注意 position的index 值. 请替换代码中的图片需要引入两个包 cnpm install qrcanvas --save cnpm install html2canvas --sa ...
防老人走失新方法：衣服上缝二维码走失可扫码回家
时下,"老人走失"已经成为一个不容忽视的社会问题.<中国老年人走失状况白皮书>显示, 每年全国走失老人约有50万人,在走失老人当中,65岁以上的占80%以上,走失的主要 ...
魔坊APP项目-15-邀请好友（业务逻辑流程图、服务端提供邀请好友的二维码生成接口、客户端通过第三方识别微信二维码，服务端提供接口允许访问、App配置私有协议,允许第三方应用通过私有协议,唤醒APP）
邀请好友 1.业务逻辑流程图客户端提供点击"邀请好友"以后的页面frame,html/invite.html,代码: <!DOCTYPE html> <html ...
Python生成带自定义信息和头像图片的二维码
直接上代码,有关二维码各种版本尺寸大小与信息容量以及容错相关的内容请自行搜索查阅. from os import listdir from os.path import splitext import ...

【uniapp】h5 生成邀新海报（canvas绘制海报和二维码，两者拼接）

【uniapp】h5 生成邀新海报（canvas绘制海报和二维码，两者拼接）

一、邀新二维码和海报拼接

1.引入插件到components文件下

2.在需要写弹框海报的页面写入如下代码

二、最终效果

【uniapp】h5 生成邀新海报（canvas绘制海报和二维码，两者拼接）相关推荐

最新文章

热门文章