需求：动态修改二维码以及标题头像等内容

1.海报（海报标题超过两行省略，副标题超过三行省略，头像圆角）

海报效果如下：

具体代码如下：

<template><view class="page"><view class="flex flex-align flex-column"><text class="m-top-20 m-bottom-20">海报(圆头像，标题超过两行，三行省略)</text><canvas canvas-id="canvasId" :style="{'width':`${widthSize}px`,'height':`${widthSize*1.7}px`}"></canvas></view><view class="flex flex-center btn" @click="saveImage"><text style="color: #FFFFFF; font-size: 30rpx;">保存到相册</text></view></view>
</template><script>let thatexport default {data() {return {pixelRatio:1,widthSize:0,ctx:'',title:'关注关注关注关注关注关注关注关注关注关注关注',futitle:'扫描二维码关注扫描二维码关注扫描二维码关注扫描二维码关注扫描二维码关注扫描二维码关注扫描二维码关注扫描二维码关注扫描二维码关注扫描二维码关注扫描二维码关注扫描二维码关注扫描二维码关注扫描二维码关注扫描二维码关注扫描二维码关注'}},onLoad() {that=thisuni.getSystemInfo({success: function(e) {//获取生成图片像素比that.pixelRatio=e.pixelRatio//获取画布的大小that.widthSize=e.windowWidth*0.9}})},mounted() {that.drawPosters()},methods: {//保存相册到本地saveImage(){let wid=that.widthSizeuni.canvasToTempFilePath({x: 0,y: 0,width: wid,height: wid*1.7,destWidth: wid*that.pixelRatio,destHeight: wid*1.7*that.pixelRatio,canvasId: 'canvasId',success: function(res) {// 在H5平台下，tempFilePath 为 base64console.log(res.tempFilePath)uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: function() {uni.showToast({title:"保存到相册成功",icon:"none"})},fail(e) {uni.showToast({title:"保存到相册失败",icon:"none"})}});} })},//绘制海报的方法drawPosters(){that.ctx = uni.createCanvasContext('canvasId', this);let wid=that.widthSizethat.ctx.drawImage('https://ymxsx-imgs.oss-accelerate.aliyuncs.com/xinsuoxiang/images/2021/11/11/16366154867888443.png',0,0,wid,wid*1.7)// that.ctx.beginPath()that.ctx.drawImage(`../../static/collectionCode/code.png`,wid/4.44,wid/1.7,wid/1.93,wid/1.93)   let titleLength=''let arr=[]if(that.title.length>18){that.ctx.setFontSize(15)titleLength=that.ctx.measureText(`${that.title.slice(0,18)}`).widththat.ctx.fillText(`${that.title.slice(0,18)}`,(wid-titleLength)/2, wid/3.2)if(that.title.length>36){that.ctx.setFontSize(15)titleLength=that.ctx.measureText(`${that.title.slice(18,36)}...`).widththat.ctx.fillText(`${that.title.slice(18,36)}...`,(wid-titleLength)/2, wid/2.7)}else{that.ctx.setFontSize(15)titleLength=that.ctx.measureText(`${that.title.slice(18)}`).widththat.ctx.fillText(`${that.title.slice(18)}`,(wid-titleLength)/2, wid/2.7)}}else{that.ctx.setFontSize(15)titleLength=that.ctx.measureText(`${that.title}`).widththat.ctx.fillText(`${that.title}`,(wid-titleLength)/2, wid/3.2)}if(that.futitle.length>=42){that.ctx.setFontSize(13)titleLength=that.ctx.measureText(`${that.futitle.slice(0,21)}`).widththat.ctx.fillText(`${that.futitle.slice(0,21)}`,(wid-titleLength)/2, wid/2.3)that.ctx.setFontSize(13)titleLength=that.ctx.measureText(`${that.futitle.slice(21,42)}`).widththat.ctx.fillText(`${that.futitle.slice(21,42)}`,(wid-titleLength)/2, wid/2)that.ctx.setFontSize(13)if(that.futitle.length>63){titleLength=that.ctx.measureText(`${that.futitle.slice(42,60)}...`).widththat.ctx.fillText(`${that.futitle.slice(42,60)}...`,(wid-titleLength)/2, wid/1.78)}else{titleLength=that.ctx.measureText(`${that.futitle.slice(42)}`).widththat.ctx.fillText(`${that.futitle.slice(42)}`,(wid-titleLength)/2, wid/1.7)}}else if(that.futitle.length>=21 && that.futitle.length<42){that.ctx.setFontSize(13)titleLength=that.ctx.measureText(`${that.futitle.slice(0,21)}`).widththat.ctx.fillText(`${that.futitle.slice(0,21)}`,(wid-titleLength)/2, wid/2.3)that.ctx.setFontSize(13)titleLength=that.ctx.measureText(`${that.futitle.slice(21)}`).widththat.ctx.fillText(`${that.futitle.slice(21)}`,(wid-titleLength)/2, wid/2)}else{that.ctx.setFontSize(13)titleLength=that.ctx.measureText(`${that.futitle}`).widththat.ctx.fillText(`${that.futitle}`,(wid-titleLength)/2, wid/2.3)}that.ctx.arc(wid/2,wid/13.34+(wid/5.25/2),wid/5.25/2,0,2 * Math.PI)that.ctx.clip();that.ctx.drawImage('../../static/logo.jpg',(wid-wid/5.25)/2,wid/13.34,wid/5.25,wid/5.25)that.ctx.restore()that.ctx.draw()}}}
</script><style>.page {display: flex;flex-direction: column;align-items: center;justify-content: center;}.flex{flex-flow: row;display: flex;}.flex-align {align-items: center;}.flex-column {flex-direction: column;}.m-top-20{margin-top: 20rpx;}.m-bottom-20{margin-bottom: 20rpx;}.flex-center {align-items: center;justify-content: center;}.btn{width: 710rpx;height: 70rpx;background-color: #007AFF;border-radius: 12rpx;margin-top: 100rpx;}
</style>

2.收款码

收款码效果：

代码如下：

<template><view class="page"><view class="flex flex-align flex-column"><text class="m-top-20 m-bottom-20">收款码</text><canvas canvas-id="canvasId" :style="{'width':`${widthSize}px`,'height':`${widthSize}px`}"></canvas></view><view class="flex flex-center btn" @click="saveImage"><text style="color: #FFFFFF; font-size: 30rpx;">保存到相册</text></view></view>
</template><script>let thatexport default {data() {return {pixelRatio:1,widthSize:0,ctx:''}},onLoad() {that=thisuni.getSystemInfo({success: function(e) {//获取生成图片像素比that.pixelRatio=e.pixelRatio//获取画布的大小that.widthSize=e.windowWidth*0.8}})},mounted() {that.drawPosters()},methods: {//保存到相册saveImage(){let wid=that.widthSizeuni.canvasToTempFilePath({x: 0,y: 0,width: wid,height: wid,destWidth: wid*that.pixelRatio,destHeight: wid*that.pixelRatio, canvasId: 'canvasId',success: function(res) {// 在H5平台下，tempFilePath 为 base64console.log(res.tempFilePath)uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: function() {uni.showToast({title:"保存到相册成功",icon:"none"})},fail(e) {uni.showToast({title:"保存到相册失败",icon:"none"})}});} })},//绘制海报的方法drawPosters(){//初始化画布that.ctx = uni.createCanvasContext('canvasId', this);//然后需要确定比例，设计图一般都是750的屏幕，这里是375pxlet wid=that.widthSize//背景图that.ctx.drawImage('../../static/collectionCode/code-bg.png',0,0,wid,wid)//二维码图that.ctx.drawImage(`../../static/collectionCode/code.png`,wid*0.24,wid*0.23,wid*0.51,wid*0.52)//四个角的边框图片that.ctx.drawImage(`../../static/collectionCode/code-border.png`,wid*0.21,wid*0.2,wid*0.58,wid*0.7)//绘制完成that.ctx.draw()}}}
</script><style>.page {display: flex;flex-direction: column;align-items: center;justify-content: center;}.flex{flex-flow: row;display: flex;}.flex-align {align-items: center;}.flex-column {flex-direction: column;}.m-top-20{margin-top: 20rpx;}.m-bottom-20{margin-bottom: 20rpx;}.flex-center {align-items: center;justify-content: center;}.btn{width: 710rpx;height: 70rpx;background-color: #007AFF;border-radius: 12rpx;margin-top: 100rpx;}
</style>

具体代码可以到git上拉取到本地上运行
GitHub - 751051079/uniapp-Contribute to 751051079/uniapp- development by creating an account on GitHub.https://github.com/751051079/uniapp-

有什么不足还请指出，谢谢大家看完！

分享不易，请大家动动发财的小手留下个点赞吧！

uniapp之生成海报收款码相关推荐

画布Canvas在线生成支付宝收款码
画布Canvas在线生成支付宝收款码 <div id="main"><div class="liucheng-center"><d ...
uniapp 实现生成海报并分享给微信好友和保存到本地相册
记录uniapp 生成二维码海报并保存到本地或者分享给微信好友 – 文章目录记录uniapp 生成二维码海报并保存到本地或者分享给微信好友前言一.引入生成二维码的组件二.点击右侧的分享图标生成 ...
uni-app如何生成海报图片
项目场景: 在uni-app中,通过点击邀请分享海报的方式,可以展示不同的海报,并通过扫描海报上的二维码来实现用户之间的关系绑定,从而实现分销功能: 每次生成的海报样式都可能不同,可以根据后台配置的宽 ...
通过C#生成支付宝收款码四（支付宝官方SDK配合沙箱生成收款二维码）
前面三个章节是学习和摸索过程,现在进入主题,生成收款码.还是用沙箱环境来调试. 1.新建windowsform程序,根据章节三,导入支付宝SDK. 2.下载官方当面付DEMO程序:当面付DEMO 3. ...
通过C#生成支付宝收款码二（支付宝沙箱版配置）
前言: 据我目前了解,沙箱版支付宝是针对没发布或者未开发成功的用户来调试验证支付或收款码的平台,手机版APP如下图所示:(其他所有功能均已屏蔽,只有收款和付款功能) 操作: 一.配置官网账户: 登录支 ...
Python自动生成金钱豹收款码_一蓑烟雨任平生
文章目录前言一.先看下成品(支持你们扫码哈) 二.上代码总结前言最近金钱豹收款码比较火,一张一张PS是不是很恶心,做好一个模板,直接嵌套,批量生成怎么样提示:以下是本篇文章正文内容,下面案 ...
h5 uniapp html2canvas生成海报,保存到本地功能实现；
html2canvas生成海报,保存到本地功能实现 1. 在开发过程中我们将HTML2canvas封装成一个组件,通过prop传递ID参数 2. 组件的使用,伪代码不要直接复制uniapp语法 3. ...
uniapp页面生成海报并保存和分享微信
Painter 画板 | LimeUiLimeUi - 增强型的 uni-app 组件库http://liangei.gitee.io/limeui-docs/components/painter/ ...
uniapp链接生成二维码
.找了一下午的插件,不是教程太笼统,就是各种报错,最终用的是插件ay-qrcode. .教程作者写的很详细,附链接 https://ext.dcloud.net.cn/plugin?id=3870 ...

uniapp之生成海报收款码

1.海报（海报标题超过两行省略，副标题超过三行省略，头像圆角）

2.收款码

uniapp之生成海报收款码相关推荐

最新文章

热门文章