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 生成商品分享通用海报源码详解相关推荐
- uniapp生成商品分享海报
uniapp用canvas生成一个分享商品的海报 文章目录 前言 一.展示效果 二.使用步骤 1.HTML部分 2.CSS部分 3.JS部分 总结 前言 uniapp用canvas生成一个分享商品的海 ...
- 封装成jar包_通用源码阅读指导mybatis源码详解:io包
io包 io包即输入/输出包,负责完成 MyBatis中与输入/输出相关的操作. 说到输入/输出,首先想到的就是对磁盘文件的读写.在 MyBatis的工作中,与磁盘文件的交互主要是对 xml配置文件的 ...
- OpenstackSDK 源码详解
OpenstackSDK 源码详解 openstacksdk是基于当前最新版openstacksdk-0.17.2版本,可从 GitHub:OpenstackSDK 获取到最新的源码.openstac ...
- 源码详解Android 9.0(P) 系统启动流程之SystemServer
源码详解Android 9.0(P) 系统启动流程目录: 源码详解Android 9.0(P)系统启动流程之init进程(第一阶段) 源码详解Android 9.0(P)系统启动流程之init进程(第 ...
- cocos android-1,Cocos2D-Android-1之源码详解:5.Box2dTest
Cocos2D-Android-1之源码详解:5.Box2dTest 发布时间:2020-08-06 06:19:28 来源:51CTO 阅读:398 作者:abab99 package org.co ...
- Android编程之Intent源码详解
Intent源码详解,直接开始入题: Intent源码6700多行代码,但真正核心代码 就那么几百行,大部分都用来定义常量字符串了 先来看一下 public class Intent implemen ...
- java的数组与Arrays类源码详解
java的数组与Arrays类源码详解 java.util.Arrays 类是 JDK 提供的一个工具类,用来处理数组的各种方法,而且每个方法基本上都是静态方法,能直接通过类名Arrays调用. 类的 ...
- fdct算法 java_ImageSharp源码详解之JPEG压缩原理(3)DCT变换
DCT变换可谓是JPEG编码原理里面数学难度最高的一环,我也是因为DCT变换的算法才对JPEG编码感兴趣(真是不自量力).这一章我就把我对DCT的研究心得体会分享出来,希望各位大神也不吝赐教. 1.离 ...
- 【分类器 Softmax-Classifier softmax数学原理与源码详解 深度学习 Pytorch笔记 B站刘二大人(8/10)】
分类器 Softmax-Classifier softmax数学原理与源码详解 深度学习 Pytorch笔记 B站刘二大人 (8/10) 在进行本章的数学推导前,有必要先粗浅的介绍一下,笔者在广泛查找 ...
最新文章
- linux 网卡无效 设置_windows使用xftp连接本机上的linux虚拟机
- DevExpress —— dxDataGrid
- 线程调度四(setDaemon方法的使用)
- XEN的clone和copy那点事
- python dlib学习(九):人脸聚类
- HDU 4609——3-idiots
- ubuntu12.04 64位系统配置jdk1.6和jdk-6u20-linux-i586.bin下载地址
- Django 使用第三方服务发送电子邮件
- 数据分析项目实战:大型商场销售预测(带你挤进比赛前100名)
- 39-java 输入输出总结
- mysql中常用的筛查语句_数据库中常用的一些关键字
- Win10激活彻底破解:一键获取数字权利工具问世
- 广成子:值得收藏-史上最全Linux ps命令详解
- 根文件系统(rootfs)理解
- 计算机使用鼠标的课件,鼠标的基本操作ppt课件.ppt
- 联想小娜怎么开启_Win10下小娜打不开的解决方法
- 0.Mysql数据库——创建数据库
- vscode调试nodejs不要太爽啊
- 从ResNet、DenseNet、ResNeXt、SE Net、SE ResNeXt 演进学习总结
- 《大数据分析》期末大作业报告
热门文章
- Java注解中produces啥意思_springmvc 没有produces注释,@produces在spring mvc中是什么意思...
- c盘是不是越大越好_C盘空间越来越小,罪魁祸首原来是“它”,难怪100G也不够用!...
- python中if和else语句的格式要求_Python小白入门:if测试和语法规则
- 进程和线程有什么区别?
- 什么是流形(manifold)、流形学习
- ROS:参数服务器通信
- JS网页上显示中文乱码解决方法
- javascript比较时间大小
- selectedIndex
- .bmp图片的文件头解析