uniapp 使用canvas画海报(微信小程序)

效果展示:

 项目要求:点击分享绘制海报,并实现分享到好友,朋友圈,并保存

先实现绘制海报
 

<view class="data_item" v-for="(item,index) in dataList" :key="index"@click="goDetail(item,index)"><view class="data_bot"><view class="share" @click.stop="goShare(item,index)"><image :src="getimg('share_gray.png')" style="width: 36rpx;height: 36rpx;"></image><view class="share_tt">分享</view></view></view></view><view class="post_box" :class="isShare?' ':'post_box2'"><view class="post"><canvas style="width: 327px; height:482px;margin: 0 auto;" canvas-id="firstCanvas1"></canvas></view></view>
// 生成海报goShare(item, index) {let _this = this;this.shareId = item.idthis.isShare = true// uni.hideTabBar()let userInfo = uni.getStorageSync('userInfo')uni.getImageInfo({src: userInfo.avatar,success: function(res) {if (res.path) {_this.canvasr(item, index, res.path, userInfo.nickname);}},});},
// 画海报canvasr(item, index, avatar, username) {let ctx = uni.createCanvasContext('firstCanvas1');// 背景图let postImage = '../../static/images/poster_bg.png'; //背景图ctx.globalAlpha = 0; // 设置图像透明度为0  为了让背景透明ctx.setFillStyle('#ffffff'); // 默认白色ctx.fillRect(0, 0, 327, 482);ctx.globalAlpha = 1; // 设置图像透明度为1ctx.drawImage(postImage, 0, 0, 327, 482); // (图片,x,y,宽,高)背景图ctx.save();// 头像ctx.restore();// let avatar = userInfo.avatar + "?timestamp=" + Date.now(); //地址栏加入新参数  解决canvas图片跨域问题this.drawAvatar(ctx, avatar, 30, 20, 15)// 昵称 +ctx.setFontSize(12); //设置字体字号ctx.setFillStyle('#000000'); //设置字体颜色// ctx.fillText(username, 65, 39); // (文字,x,y)let _strlineW = 0;let nickname = '';let actI = 0;for (let i = 0; i < username.length; i++) {_strlineW += ctx.measureText(username[i]).width;if(_strlineW <= 60){ctx.fillText(username, 65, 39); // (文字,x,y)}else if (_strlineW > 60 && _strlineW <= 70) {actI = inickname = username.substring(0, i) + '…'ctx.fillText(nickname, 65, 39); // (文字,x,y)}else{nickname = username.substring(0, actI-1) + '…'ctx.fillText(nickname, 65, 39); // (文字,x,y)}}// 分享了一个点子let txt = '我发现了一个不错的点子';ctx.setFontSize(12); //设置字体字号ctx.setFillStyle('#999999'); //设置字体颜色ctx.fillText(txt, 135, 39); // (文字,x,y)// 内容开始引号图let startImage = '../../static/images/poster_quote_up.png'; //背景图ctx.drawImage(startImage, 30, 70, 32, 32); // (图片,x,y,宽,高)背景图ctx.save();ctx.restore();// 内容let content = item.idea_name;this.drawtext(ctx, content, 30, 130, 32, 267)// 内容结束引号图let endImage = '../../static/images/poster_quote_down.png'; //背景图ctx.drawImage(endImage, 265, 310, 32, 32); // (图片,x,y,宽,高)背景图ctx.save();ctx.restore();// 一条直线ctx.setFillStyle('#D8D8D8'); // 默认白色ctx.fillRect(30, 362, 267, 0.5); //x y 宽 高ctx.restore();// logo图let logoImage = '../../static/images/aiyop_logo.png'this.drawAvatar(ctx, logoImage, 30, 402, 15)ctx.save();ctx.restore();// AI有谱let title = 'AI有谱';ctx.setFontSize(13); //设置字体字号ctx.setFillStyle('#000000'); //设置字体颜色ctx.fillText(title, 70, 415); // (文字,x,y)// 心中有谱,奇思妙想也靠谱let intro = '心中有谱,奇思妙想也靠谱';ctx.setFontSize(10); //设置字体字号ctx.setFillStyle('#666666'); //设置字体颜色ctx.fillText(intro, 70, 430); // (文字,x,y)// 二维码let qrImage = '../../static/images/logo_program.jpg';this.drawAvatar(ctx, qrImage, 225, 381, 36)// 绘制ctx.draw();},// 绘制头像drawAvatar(ctx, img, x, y, r) {ctx.save();let d = r * 2;let cx = x + r;let cy = y + r;ctx.beginPath()ctx.arc(cx, cy, r, 0, 2 * Math.PI);ctx.strokeStyle = '#FFFFFF'; // 设置绘制圆形边框的颜色ctx.stroke(); // 绘制出圆形,默认为黑色,可通过 ctx.strokeStyle = '#FFFFFF', 设置想要的颜色ctx.clip();ctx.drawImage(img, x, y, d, d);ctx.restore();},// 文本n行换行与显示省略号// 1、canvas对象 2、文本 3、X轴 4、Y轴 5、单行行高 6、文本的宽度drawtext(ctx, str, axisX, axisY, titleHeight, maxWidth) {ctx.setFontSize(22); //设置字体字号ctx.setFillStyle('#000000'); //设置字体颜色// 文本处理let strArr = str.split("");let row = [];let temp = "";for (let i = 0; i < strArr.length; i++) {if (ctx.measureText(temp).width < maxWidth) {temp += strArr[i];} else {i--; //这里添加了i-- 是为了防止字符丢失,效果图中有对比row.push(temp);temp = "";}}row.push(temp); // row有多少项则就有多少行//如果数组长度大于6,现在只需要显示6行则只截取前两项,把第6行结尾设置成'...'if (row.length > 6) {let rowCut = row.slice(0, 6);let rowPart = rowCut[5];let test = "";let empty = [];for (let i = 0; i < rowPart.length; i++) {if (ctx.measureText(test).width < maxWidth) {test += rowPart[i];} else {break;}}empty.push(test);// let group = empty[0] //这里只显示两行,超出的用...表示let group = empty[0] + "..." //这里只显示两行,超出的用...表示rowCut.splice(5, 1, group);row = rowCut;}// 把文本绘制到画布中for (let i = 0; i < row.length; i++) {// 一次渲染一行ctx.fillText(row[i], axisX, axisY + i * titleHeight, maxWidth);}// 保存当前画布状态ctx.save()// 将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。// ctx.draw()},

下面是海报下面的分享弹窗

<!-- 分享海报的遮罩层 --><view v-if="isShare" class="over_box" @touchmove.stop.prevent="moveHandle"></view><!-- 分享海报 --><u-popup :show="isShare" @close="closeShare" @open="openShare" mode="bottom" :round="10" :overlay="false"><view class="trans_box"><view class="per_box"><button open-type="share" class="per_but" @click="shareWeixin('WXSceneSession')"><image :src="getimg('wehcat.png')" style="width:86rpx;height: 86rpx;"></image><view class="per_txt">微信好友</view></button><button class="per_but" @click="shareWeixin('WXSceneTimeline')"><image :src="getimg('wechat-moments.png')" style="width:86rpx;height: 86rpx;"></image><view class="per_txt">朋友圈</view></button><button @click="saveLocal" class="per_but"><image :src="getimg('save-poster.png')" style="width:86rpx;height: 86rpx;"></image><view class="per_txt">保存图片</view></button></view><view class="share_line"></view><view class="close_tran" @click="closeShare">取消</view></view></u-popup>

因为分享到朋友圈实在没找到有使用自定义按钮的可能,所以还是需要点击右上角胶囊
 

onLoad(){//分享功能wx.showShareMenu({withShareTicket: true,//设置下方的Menus菜单,才能够让发送给朋友与分享到朋友圈两个按钮可以点击menus: ["shareAppMessage", "shareTimeline"]})}
//点击分享朋友,朋友圈事件
shareWeixin(scene) {if (scene == 'WXSceneTimeline') {uni.showToast({title: '点击右上角胶囊分享朋友圈',icon: 'none',duration: 2000})} else {uni.share({provider: "weixin",scene: scene,type: 0,href: '/subPackage/index/like_details?id=' + this.shareId + '&type=1',title: '点子分享',success(res) {console.log(res);},fail(err) {console.log(err);}})}},
onShareAppMessage(res) {if (res.from === 'button') { // 来自页面内分享按钮return {title: 'xxxxxxx', //分享的名称path: '/subPackage/index/like_details?id=' + this.shareId + '&type=1',mpId: 'wx000000000', //此处配置微信小程序的AppIdimageUrl: ''}}return {title: 'xxxxx', //分享的名称path: '/subPackage/index/like_details?id=' + this.shareId + '&type=1',mpId: 'wx0000000000', //此处配置微信小程序的AppIdimageUrl: ''}},//分享到朋友圈onShareTimeline(res) {return {title: this.timeItem,path: '/pages/index/index',type: 0,summary: "",imageUrl: ''}},

 以上就是画海报以及分享的全部过程了,另有一个点:
就是分享朋友的地址path: '/subPackage/index/like_details?id=' + this.shareId + '&type=1'
这里这个加个type=1是因为点击分享进入小程序的是个详情页,可能会出现点击左上角返回不能返回首页,所以加上这个type可以在分享页加个判断
 

        onLoad(option) {if(option.type && option.type==1){ //分享来的页面this.shareType = 1}},
//左上角的点击返回事件加判断,当是分享进入的时候回到首页goBack(){if(this.shareType==1){uni.switchTab({url:'/pages/index/index'})}else{uni.navigateBack()this.shareType = 0}},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/84856.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

利用ChatGPT绘制思维导图——以新能源汽车竞品分析报告为例

随着人们对环境保护的日益关注和传统燃油汽车的限制&#xff0c;全球范围内对新能源汽车的需求不断增长。新能源汽车市场的激烈竞争使得了解各个竞品的特点和优劣成为关键。然而&#xff0c;针对这一领域的详尽竞品分析却常常需要大量时间和精力。 在此背景下&#xff0c;人工智…

【C++】开源:事件驱动网络库libevent配置使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍事件驱动库libevent配置使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xf…

Flink多流处理之coGroup(协同分组)

这篇文章主要介绍协同分组coGroup的使用,先讲解API代码模板,后面会结图解介绍coGroup是如何将流中数据进行分组的. 1 API介绍 数据源# 左流数据 ➜ ~ nc -lk 6666 101,Tom 102,小明 103,小黑 104,张强 105,Ken 106,GG小日子 107,小花 108,赵宣艺 109,明亮# 右流数据 ➜ ~ n…

【项目学习1】如何将java对象转化为XML字符串

如何将java对象转化为XML字符串 将java对象转化为XML字符串&#xff0c;可以使用Java的XML操作库JAXB&#xff0c;具体操作步骤如下&#xff1a; 主要分为以下几步&#xff1a; 1、创建JAXBContext对象&#xff0c;用于映射Java类和XML。 JAXBContext jaxbContext JAXBConte…

finfet grid

我正在「拾陆楼」和朋友们讨论有趣的话题&#xff0c;你⼀起来吧&#xff1f; 拾陆楼知识星球入口 90nm 及以下的工艺都要求储存器&#xff0c;IP&#xff0c;IO 的多晶硅方向必须和标准单元的多晶 硅方向保持一致&#xff0c;无法像过去工艺一样随意旋转方向。在 22nm 及以下…

机器学习可解释性

机器学习可解释性 可解释性重要性可解释性事前与事后可解释模型线性回归可解释性example权重显著性判断 逻辑回归可解释Example 可解释性重要性 机器学习模型在表现良好时&#xff0c;我们不能简单地信任其预测结果而忽略其决策原因。单一指标如分类准确率对现实世界任务来说是…

PyTorch深度学习实战(10)——过拟合及其解决方法

PyTorch深度学习实战&#xff08;10&#xff09;——过拟合及其解决方法 0. 前言1. 过拟合基本概念2. 添加 Dropout 解决过拟合3. 使用正则化解决过拟合3.1 L1 正则化3.2 L2 正则化 4. 学习率衰减小结系列链接 0. 前言 过拟合 (Overfitting) 是指在机器学习中&#xff0c;模型…

2023年第2季社区Task挑战赛升级新玩法,等你来战!

第1季都有哪些有趣的作品&#xff1f; 在大家的共建下&#xff0c;FISCO BCOS开源生态不断丰富完善&#xff0c;涌现了众多实用技术教程和代码&#xff1a;基于数字身份凭证的业务逻辑设计&#xff0c;贡献了发放数字身份凭证的参考实现&#xff1b;提供企业碳排放、慈善公益等…

【idea】点击idea启动没反应

RT 点击idea启动的时候没反应&#xff0c;接着百度报错&#xff0c;基本跟他们的也不一样。 首先我是做版本升级。其次&#xff0c;我之前是破解的。如果你也是跟我一样的话&#xff0c;那问题可能就处在破解上了 解决方式 首先&#xff0c;是跟大部分解决思路一样。先找到项…

苍穹外卖系统07

哈喽&#xff01;大家好&#xff0c;我是旷世奇才李先生 文章持续更新&#xff0c;可以微信搜索【小奇JAVA面试】第一时间阅读&#xff0c;回复【资料】更有我为大家准备的福利哟&#xff0c;回复【项目】获取我为大家准备的项目 最近打算把我手里之前做的项目分享给大家&#…

年至年的选择仿elementui的样式

组件&#xff1a;<!--* Author: liuyu liuyuxizhengtech.com* Date: 2023-02-01 16:57:27* LastEditors: wangping wangpingxizhengtech.com* LastEditTime: 2023-06-30 17:25:14* Description: 时间选择年 - 年 --> <template><div class"yearPicker"…

CTFSHOW php命令执行

目录 web29 过滤flag web30 过滤system php web31 过滤 cat|sort|shell|\. 这里有一个新姿势 可以学习一下 web32 过滤 &#xff1b; . web33 web34 web35 web36 web37 data伪协议 web38 短开表达式 web39 web40 __FILE__命令的扩展 web41 web42 重定向…

【无标题杭州生物制药公司【阿诺医药】申请纳斯达克IPO上市】

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;杭州生物制药公司阿诺医药&#xff08;Adlai Nortye&#xff09;近期已向美国证券交易委员会&#xff08;SEC&#xff09;提交招股书&#xff0c;申请在纳斯达克IPO上市&#xff0c;股票代码为&am…

7个顶级开源数据集来训练自然语言处理(NLP)和文本模型

推荐&#xff1a;使用 NSDT场景编辑器快速助你搭建可二次编辑的3D应用场景 NLP现在是一个令人兴奋的领域&#xff0c;特别是在像AutoNLP这样的用例中&#xff0c;但很难掌握。开始使用NLP的主要问题是缺乏适当的指导和该领域的过度广度。很容易迷失在各种论文和代码中&#xff…

unity修改单个3D物体的重力的大小该怎么处理呢?

在Unity中修改单个3D物体的重力大小可以通过以下步骤实现&#xff1a; 创建一个新的C#脚本来控制重力&#xff1a; 首先&#xff0c;创建一个新的C#脚本&#xff08;例如&#xff1a;GravityModifier.cs&#xff09;并将其附加到需要修改重力的3D物体上。在脚本中&#xff0c…

竞赛项目 深度学习图像风格迁移 - opencv python

文章目录 0 前言1 VGG网络2 风格迁移3 内容损失4 风格损失5 主代码实现6 迁移模型实现7 效果展示8 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习图像风格迁移 - opencv python 该项目较为新颖&#xff0c;适合作为竞赛课题…

NLP 时事和见解【2023】

一、说明 AI的新闻当然不是即时的&#xff0c;但作为趋势和苗头&#xff0c;我们不得不做出自己的决定。比如&#xff0c;一些软件的支持是否持续&#xff0c;哪些现成的软件将不再使用&#xff0c;等等。 图片来自中途 以下是NLPlanet为您选择的有关NLP和AI的每周文章&#x…

vi 编辑器入门到高级

vi 编辑器的初级用法vi 编辑器的工作模式1. 命令模式2. 文本输入模式3. 状态行vi 工作模式切换存储缓冲区 vi 编辑器命令1. 启动 vi2. 文本输入3. 退出 vi4. 命令模式下的 光标移动5. 命令模式下的 文本修改6. 从 命令模式 进入 文本输入模式7. 搜索字符串8. vi 在线帮助文档 v…

【雕爷学编程】Arduino动手做(201)---行空板硬件控制之基础GPIO的使用

37款传感器与模块的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&#x…

腾讯云轻量应用服务器端口怎么打开?图文方法来了

腾讯云轻量应用服务器端口放行在哪设置&#xff1f;在防火墙中可以开启端口号&#xff0c;腾讯云轻量应用服务器端口怎么开通&#xff1f;在轻量服务器管理控制台的防火墙中开启端口&#xff0c;如果是CVM云服务器在安全组中开通&#xff0c;腾讯云服务器网以轻量应用服务器开通…