uniapp 生成商品分享通用海报源码详解

2024-06-21 19:18

本文主要是介绍uniapp 生成商品分享通用海报源码详解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

uniapp 生成商品分享通用海报源码,使用canvas生成海报,圆片加圆角,标题换行显示两排 多余点点,兼容H5端和小程序端。

组件显示代码<template><view><uni-popup ref="popup" type="center" class="poster-alert"><view class="poster"><image :src="poster" @longpress="saveImg"></image></view><view class="hm row-center"><view class="item" @tap="shareWx"><button open-type="share" class="sharebtn"><image :src="util.ossimg('button-wechat.png')"></image></button><text>微信</text></view>					<!-- #ifdef MP-WEIXIN --><view class="item" @tap="saveImg"><view class="sharebtn"><image :src="util.ossimg('button-save.png')"></image></view><text>保存图片</text></view><!-- #endif --></view>			</uni-popup></view>
</template><script>export default{name:'GoodsPoster', //商品分享海报	data(){return{poster:'',}},methods:{show(){this.$refs.popup.open();},close(){this.$refs.popup.close();},//分享微信好友shareWx(){},//保存图片async saveImg(){// #ifdef MP-WEIXINlet that = this;let imginfo = await uni.getImageInfo({src: that.poster })if(imginfo[1]){uni.saveImageToPhotosAlbum({filePath:imginfo[1].path,success() { that.tips.toast('保存成功') },fail(rej){  that.tips.toast('保存失败'); }})}// #endif				 },}		}
</script><style lang="scss" scoped>.poster-alert{ width:520rpx;.poster{ width:520rpx; height:832rpx; overflow: hidden; background:#fff; border-radius:16rpx;}.hm{ margin-top:60rpx; .item{ text-align: center; margin:0 60rpx;.sharebtn{ background:none; border:0; padding:0; width:100rpx; height:100rpx; margin:0 auto; margin-bottom:12rpx;&:after{display:none;}image{ width:100rpx; height:100rpx; display:block; }					}text{ font-size:24rpx; color:#fff;}}}}	
</style>

 

海报生成代码<template><view>		<!--分享海报-->	<goods-poster ref="poster"></goods-poster><canvas canvas-id="mycanvas" class="mycanvas"></canvas>	</view>
</template><script>import GoodsPoster from '@/components/Goods/GoodsPoster.vue'export default{components:{  GoodsPoster },data(){return{}},async onLoad() {this.create();},		methods:{		//生成圆形填充图片//参数:ctx:canvas, img:图片, x:距离X, y:距离Y, r:半径circleImg(ctx, img, x, y, r) {ctx.save();var d =2 * r;var cx = x + r;var cy = y + r;ctx.arc(cx, cy, r, 0, 2 * Math.PI);ctx.clip();ctx.drawImage(img, x, y, d, d);ctx.restore();},//圆角矩形填充图片// 参数:ctx: canvas, img:图片地址, x:距离X,y:距离Y, width:宽, height:高,radius:圆角大小drawRoundRectPath(ctx, img, x, y, width, height, radius) {ctx.save();ctx.translate(x, y);ctx.beginPath(0);ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);ctx.lineTo(radius, height);ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);ctx.lineTo(0, radius);ctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);ctx.lineTo(width - radius, 0);ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);ctx.lineTo(width, height - radius);ctx.closePath();ctx.clip();	ctx.drawImage(img,0,0,uni.upx2px(460),uni.upx2px(460));ctx.restore();},// 文字自动换行// 参数:ctx:canvas, content:文字, drawX:距离X, drawY:距离Y, lineHeight: 行高, lineMaxWidth最大宽度, lineNum: 行数textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) {var drawTxt = ''; // 当前绘制的内容var drawLine = 1; // 第几行开始绘制var drawIndex = 0; // 当前绘制内容的索引// 判断内容是否可以一行绘制完毕if(ctx.measureText(content).width <= lineMaxWidth){ctx.fillText(content, drawX, drawY);} else {for (var i = 0; i < content.length; i++) {drawTxt += content[i];if (ctx.measureText(drawTxt).width >= lineMaxWidth) {if (drawLine >= lineNum) {ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY);break;} else {ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);drawIndex = i + 1;drawLine += 1;drawY += lineHeight;drawTxt = '';}} else {// 内容绘制完毕,但是剩下的内容宽度不到lineMaxWidthif (i === content.length - 1) {ctx.fillText(content.substring(drawIndex), drawX, drawY);}}}}},		 //获取图片信息//微信:要下载远程图片到本地//H5远程图片时要将图片生成base64位,这个可让后台帮生成base64位,前端生成始终有跨域问题头疼, 另一种是将图片放在static目录async getimgInfo(path){// #ifdef MP-WEIXINconst info = await uni.downloadFile({url:path})				return info;// #endif					// #ifdef H5const info = [{},{tempFilePath:'/static/img/p.png'}]	return info;// #endif									},//生成海报async create(){uni.showLoading({title:'海报生成中...'})let ctx  = uni.createCanvasContext('mycanvas',this);ctx.fillStyle = "#fff"ctx.fillRect(0,0,uni.upx2px(520),uni.upx2px(845))//头像let head = "https://avatar.csdnimg.cn/8/C/D/0_u012015434.jpg";let headurl = await this.getimgInfo(head);headurl = headurl[1].tempFilePath;this.circleImg(ctx,headurl,uni.upx2px(30),uni.upx2px(30),uni.upx2px(36))//姓名ctx.setFontSize(uni.upx2px(28))ctx.fillStyle = '#000';ctx.fillText("神夜大侠",uni.upx2px(115),uni.upx2px(55))//说明ctx.setFontSize(uni.upx2px(20))ctx.fillStyle = '#000';ctx.fillText("这件商品很棒,推荐给你看看",uni.upx2px(115),uni.upx2px(85))//logolet logo = "https://avatar.csdnimg.cn/8/C/D/0_u012015434.jpg";let logourl = await this.getimgInfo(logo);logourl = logourl[1].tempFilePath;ctx.drawImage(logourl,uni.upx2px(410),uni.upx2px(35),uni.upx2px(80),uni.upx2px(40))//商品图let img = "https://avatar.csdnimg.cn/8/C/D/0_u012015434.jpg";let imgurl = await this.getimgInfo(img);imgurl = imgurl[1].tempFilePath;this.drawRoundRectPath(ctx,imgurl,uni.upx2px(30),uni.upx2px(120),uni.upx2px(460),uni.upx2px(460),uni.upx2px(16));	//商品标题ctx.setFontSize(uni.upx2px(24))ctx.fillStyle = '#333';this.textPrewrap(ctx,"这是商品标题名称商品标题名称",uni.upx2px(30),uni.upx2px(670),uni.upx2px(36),uni.upx2px(250),2);//价格ctx.setFontSize(uni.upx2px(22))ctx.fillStyle = this.config.webColor;ctx.fillText("¥",uni.upx2px(30),uni.upx2px(760))ctx.setFontSize(uni.upx2px(36))ctx.fillStyle = this.config.webColor;ctx.fillText("58.00",uni.upx2px(50),uni.upx2px(760))//二维码let ewm = 'https://avatar.csdnimg.cn/8/C/D/0_u012015434.jpg';let ewmurl = await this.getimgInfo(ewm);ewmurl = ewmurl[1].tempFilePath;ctx.drawImage(ewmurl,uni.upx2px(339),uni.upx2px(620),uni.upx2px(150),uni.upx2px(150))//扫码购买ctx.setFontSize(uni.upx2px(20))ctx.fillStyle = "#333";ctx.fillText("-扫码购买商品-",uni.upx2px(347),uni.upx2px(800))										ctx.draw();setTimeout(()=>{uni.canvasToTempFilePath({canvasId:'mycanvas',success:res=>{this.$refs.poster.poster = res.tempFilePath;this.$refs.poster.show();uni.hideLoading();},fail:err=>{this.tips.toast('海报生成失败')uni.hideLoading();}})},500)			 },	 }}
</script><style lang="scss" scoped>	.mycanvas{ width:520rpx; height:845rpx; background:#fff; position: fixed; bottom:1000px;  border-radius:16rpx;}
</style>

这篇关于uniapp 生成商品分享通用海报源码详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1082095

相关文章

Redis 的 SUBSCRIBE命令详解

《Redis的SUBSCRIBE命令详解》Redis的SUBSCRIBE命令用于订阅一个或多个频道,以便接收发送到这些频道的消息,本文给大家介绍Redis的SUBSCRIBE命令,感兴趣的朋友跟随... 目录基本语法工作原理示例消息格式相关命令python 示例Redis 的 SUBSCRIBE 命令用于订

Java使用Javassist动态生成HelloWorld类

《Java使用Javassist动态生成HelloWorld类》Javassist是一个非常强大的字节码操作和定义库,它允许开发者在运行时创建新的类或者修改现有的类,本文将简单介绍如何使用Javass... 目录1. Javassist简介2. 环境准备3. 动态生成HelloWorld类3.1 创建CtC

使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解

《使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解》本文详细介绍了如何使用Python通过ncmdump工具批量将.ncm音频转换为.mp3的步骤,包括安装、配置ffmpeg环... 目录1. 前言2. 安装 ncmdump3. 实现 .ncm 转 .mp34. 执行过程5. 执行结

Python中 try / except / else / finally 异常处理方法详解

《Python中try/except/else/finally异常处理方法详解》:本文主要介绍Python中try/except/else/finally异常处理方法的相关资料,涵... 目录1. 基本结构2. 各部分的作用tryexceptelsefinally3. 执行流程总结4. 常见用法(1)多个e

SpringBoot日志级别与日志分组详解

《SpringBoot日志级别与日志分组详解》文章介绍了日志级别(ALL至OFF)及其作用,说明SpringBoot默认日志级别为INFO,可通过application.properties调整全局或... 目录日志级别1、级别内容2、调整日志级别调整默认日志级别调整指定类的日志级别项目开发过程中,利用日志

Java中的抽象类与abstract 关键字使用详解

《Java中的抽象类与abstract关键字使用详解》:本文主要介绍Java中的抽象类与abstract关键字使用详解,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、抽象类的概念二、使用 abstract2.1 修饰类 => 抽象类2.2 修饰方法 => 抽象方法,没有

MySQL8 密码强度评估与配置详解

《MySQL8密码强度评估与配置详解》MySQL8默认启用密码强度插件,实施MEDIUM策略(长度8、含数字/字母/特殊字符),支持动态调整与配置文件设置,推荐使用STRONG策略并定期更新密码以提... 目录一、mysql 8 密码强度评估机制1.核心插件:validate_password2.密码策略级

Three.js构建一个 3D 商品展示空间完整实战项目

《Three.js构建一个3D商品展示空间完整实战项目》Three.js是一个强大的JavaScript库,专用于在Web浏览器中创建3D图形,:本文主要介绍Three.js构建一个3D商品展... 目录引言项目核心技术1. 项目架构与资源组织2. 多模型切换、交互热点绑定3. 移动端适配与帧率优化4. 可

从入门到精通详解Python虚拟环境完全指南

《从入门到精通详解Python虚拟环境完全指南》Python虚拟环境是一个独立的Python运行环境,它允许你为不同的项目创建隔离的Python环境,下面小编就来和大家详细介绍一下吧... 目录什么是python虚拟环境一、使用venv创建和管理虚拟环境1.1 创建虚拟环境1.2 激活虚拟环境1.3 验证虚

详解python pycharm与cmd中制表符不一样

《详解pythonpycharm与cmd中制表符不一样》本文主要介绍了pythonpycharm与cmd中制表符不一样,这个问题通常是因为PyCharm和命令行(CMD)使用的制表符(tab)的宽... 这个问题通常是因为PyCharm和命令行(CMD)使用的制表符(tab)的宽度不同导致的。在PyChar