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

2024-06-21 19:18
文章标签 源码 uniapp 详解 海报 分享 生成 通用 商品

本文主要是介绍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。

相关文章

[职场] 护理专业简历怎么写 #经验分享#微信

[职场] 护理专业简历怎么写 #经验分享#微信

护理专业简历怎么写 　　很多想成为一名护理方面的从业者，但是又不知道应该怎么制作一份简历，现在这里分享了一份护理方面的简历模板供大家参考。 　　蓝山山 　　年龄：24 　　号码：12345678910 　　地址：上海市 邮箱：jianli@jianli.com 　　教育背景 　　时间：2011-09到2015-06 　　学校：蓝山大学 　　专业：护理学 　　学历：本科
阅读更多...
大学湖北中医药大学法医学试题及答案，分享几个实用搜题和学习工具 #微信#学习方法#职场发展

大学湖北中医药大学法医学试题及答案，分享几个实用搜题和学习工具 #微信#学习方法#职场发展

今天分享拥有拍照搜题、文字搜题、语音搜题、多重搜题等搜题模式，可以快速查找问题解析，加深对题目答案的理解。 1.快练题 这是一个网站 找题的网站海量题库,在线搜题,快速刷题~为您提供百万优质题库,直接搜索题库名称,支持多种刷题模式:顺序练习、语音听题、本地搜题、顺序阅读、模拟考试、组卷考试、赶快下载吧! 2.彩虹搜题 这是个老公众号了 支持手写输入，截图搜题，详细步骤，解题必备
阅读更多...
uniapp接入微信小程序原生代码配置方案（优化版）

uniapp接入微信小程序原生代码配置方案（优化版）

uniapp项目需要把微信小程序原生语法的功能代码嵌套过来，无需把原生代码转换为uniapp，可以配置拷贝的方式集成过来 1、拷贝代码包到src目录 2、vue.config.js中配置原生代码包直接拷贝到编译目录中 3、pages.json中配置分包目录，原生入口组件的路径 4、manifest.json中配置分包，使用原生组件 5、需要把原生代码包里的页面修改成组件的方
阅读更多...
十四、观察者模式与访问者模式详解

十四、观察者模式与访问者模式详解

21.观察者模式 21.1.课程目标 1、 掌握观察者模式和访问者模式的应用场景。 2、 掌握观察者模式在具体业务场景中的应用。 3、 了解访问者模式的双分派。 4、 观察者模式和访问者模式的优、缺点。 21.2.内容定位 1、 有 Swing开发经验的人群更容易理解观察者模式。 2、 访问者模式被称为最复杂的设计模式。 21.3.观察者模式 观 察 者 模 式 ( Obser
阅读更多...
[职场] 公务员的利弊分析 #知识分享#经验分享#其他

[职场] 公务员的利弊分析 #知识分享#经验分享#其他

公务员的利弊分析     公务员作为一种稳定的职业选择，一直备受人们的关注。然而，就像任何其他职业一样，公务员职位也有其利与弊。本文将对公务员的利弊进行分析，帮助读者更好地了解这一职业的特点。 利： 1. 稳定的职业：公务员职位通常具有较高的稳定性，一旦进入公务员队伍，往往可以享受到稳定的工作环境和薪资待遇。这对于那些追求稳定的人来说，是一个很大的优势。 2. 薪资福利优厚：公务员的薪资和
阅读更多...
【操作系统】信号Signal超详解|捕捉函数

【操作系统】信号Signal超详解|捕捉函数

🔥博客主页： 我要成为C++领域大神🎥系列专栏：【C++核心编程】 【计算机网络】 【Linux编程】 【操作系统】 ❤️感谢大家点赞👍收藏⭐评论✍️ 本博客致力于知识分享，与更多的人进行学习交流 ​ 如何触发信号 信号是Linux下的经典技术，一般操作系统利用信号杀死违规进程，典型进程干预手段，信号除了杀死进程外也可以挂起进程 kill -l 查看系统支持的信号
阅读更多...
Jitter Injection详解

Jitter Injection详解

一、定义与作用 Jitter Injection，即抖动注入，是一种在通信系统中人为地添加抖动的技术。该技术通过在发送端对数据包进行延迟和抖动调整，以实现对整个通信系统的时延和抖动的控制。其主要作用包括： 改善传输质量：通过调整数据包的时延和抖动，可以有效地降低误码率，提高数据传输的可靠性。均衡网络负载：通过对不同的数据流进行不同程度的抖动注入，可以实现网络资源的合理分配，提高整体传输效率。增
阅读更多...
android一键分享功能部分实现

android一键分享功能部分实现

为什么叫做部分实现呢，其实是我只实现一部分的分享。如新浪微博，那还有没去实现的是微信分享。还有一部分奇怪的问题：我QQ分享跟QQ空间的分享功能，我都没配置key那些都是原本集成就有的key也可以实现分享，谁清楚的麻烦详解下。 实现分享功能我们可以去www.mob.com这个网站集成。免费的，而且还有短信验证功能。等这分享研究完后就研究下短信验证功能。 开始实现步骤（新浪分享，以下是本人自己实现
阅读更多...
android 带与不带logo的二维码生成

android 带与不带logo的二维码生成

该代码基于ZXing项目，这个网上能下载得到。 定义的控件以及属性： public static final int SCAN_CODE = 1;private ImageView iv;private EditText et;private Button qr_btn,add_logo;private Bitmap logo,bitmap,bmp; //logo图标private st
阅读更多...
springboot家政服务管理平台 LW +PPT+源码+讲解

springboot家政服务管理平台 LW +PPT+源码+讲解

3系统的可行性研究及需求分析 3.1可行性研究 3.1.1技术可行性分析 经过大学四年的学习，已经掌握了JAVA、Mysql数据库等方面的编程技巧和方法，对于这些技术该有的软硬件配置也是齐全的，能够满足开发的需要。 本家政服务管理平台采用的是Mysql作为数据库，可以绝对地保证用户数据的安全；可以与Mysql数据库进行无缝连接。 所以，家政服务管理平台在技术上是可以实施的。 3.1
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2