微信小程序实现分享海报

article/2025/10/5 22:09:21

实现前的注意事项：
1、使用的是微信小程序官方的canvas组件官方文档地址
2、在canvas中不能绘制网络图片，需要使用wx.getImageInfo({}),文档地址
注意最好在画布绘制之前对图片进行转化，我在绘制画布的过程中转化时获取到的地址一直是空的，感觉这个接口是异步的，设置了async、await也不起作用。

                   wx.getImageInfo({src: '网络图片地址',success: (res) => {console.log(res, res.path, 'res--res');this.imgBannerPath = res.path;}})

3、在canvas中设置文字加粗方法：

//设置加粗显示ctx.font =  'normal bold 16px sans-serif';
设置加粗之后下面其他的文字都会加粗，不想加粗的文字，你可以在渲染之前重新设置一下font属性，例如：ctx.font =  'normal normal 16px sans-serif';

4、设置文字换行，超出多少隐藏

// 绘制文字自动换行drawArticle:function(ctx, kl, width, x, y) {let chr = kl.split('') // 分割为字符串数组let temp = ''let row = []for (let a = 0; a < chr.length; a++) {//canvas measureText()方法在画布上输出文本之前，检查字体的宽度if (ctx.measureText(temp).width < width) {temp += chr[a]} else {a--row.push(temp)temp = ''}}row.push(temp)console.log( row,' row');for (var b = 0; b < row.length; b++) {// 控制最多显示2行，超出两行显示...if(row.length>2&&b==1){ctx.fillText(row[b].slice(0, row[b].length - 1) + '...',x, y + b * 20);}else{if(b<2){ctx.fillText(row[b], x, y + b * 20);}}}let _len = row.length > 2 ? 2 : row.lengthreturn y + (_len - 1) * 20},

5、分享海报，保存到相册、识别二维码等功能可以不用自己写，直接使用image标签的show-menu-by-longpress属性即可，长按图片就可以触发。

<image :src="posterImg" show-menu-by-longpress="true" class="poster-img"></image>

效果图如下：

6、实现海报的代码如下：

<!-- 分享海报 ,在写的时候要注意canvas初始化的时候是一定要渲染的，要不然海报绘制会不显示的--><view><view class="poster" v-if="posterImg" @click="showPoster=false"><image :src="posterImg" show-menu-by-longpress="true" class="poster-img"></image><view style="padding:16rpx 0 24rpx 0;">长按图片保存到相册</view><image @click="showPoster=false" src="../../static/static/imgs/icon_circle-error.png" style="height: 64rpx;width: 64rpx;"></image></view><view class="canvas-box" v-else><canvas canvas-id="myCanvas" style="width: 263px;height:341px;position: fixed;top:99999px;" /></view></view>// 绘制海报makeCanvas: function() {//有海报就禁止绘制if (this.posterImg) {return}let that = this;uni.showLoading({title: '海报生成中...',})var context = uni.createCanvasContext('myCanvas', this);context.setFillStyle("#FFFFFF");context.fillRect(0, 0, 263, 341);context.drawImage(that.imgBannerPath, 0, 0, 263, 210);context.setFontSize(16);context.setFillStyle('#060606');context.font =  'normal bold 16px sans-serif';let str = this.info.act_title;let width = 263;let offsetHeight = this.drawArticle(context, str, width - 40,16, 235)//控制文字自动换行context.font =  'normal normal 16px sans-serif';context.setFontSize(16);context.setFillStyle('#FF8200')if(this.info.is_cost == '0'){context.fillText('免费', 16, 304);}else{context.fillText('￥'+this.info.cost, 16, 304);}context.setFontSize(12);context.setFillStyle('#999999');context.fillText('长按二维码识别小程序', 16, 323);context.drawImage(that.qrCode, 189, 263, 60, 60);context.draw(true, function() {console.log(context, 'content-------绘制完成');uni.canvasToTempFilePath({canvasId: 'myCanvas',success: function(res) {uni.hideLoading();let tempFilePath = res.tempFilePath;that.posterImg = tempFilePath;console.log(res, 'res');},fail: function(res) {uni.hideLoading();console.log(res);}}, that)})},

绘制的图片在真机上看着会很模糊，实际上在手机上看的话是清除的，所以不用担心这个。

vue中实现分享海报：
我找到了还挺好用的插件，记录一下：
插件官网地址：vue-canvas-poster
使用就非常简单，下面贴个例子：

<template><div><vue-canvas-poster:widthPixels="1000":painting="painting"@success="success"@fail="fail"></vue-canvas-poster><img :src="poster" alt="" style="width:263px;height:361px;"></div>
</template>
<script>
export default {data() {return {poster: "",painting: {width: "263px",height: "361px",background: "#fff",views: [{type: "image",url: require("../imgs/poster.jpg"),css: {top: "0px",left: "0px",width: "263px",height: "263px",},},{type: "text",text: "标题",css: {color: "#333333",fontSize: "17px",width: "151px",maxLines: 2,lineHeight: "24px",fontWeight: "bold",top: "271px",left: "12px",},},{type: "image",url: require("../imgs/default_avatar.png"),css: {top: "327px",left: "12px",width: "20px",height: "20px",borderRadius: "50%",},},{type: "text",text: "描述",css: {color: "#666666",fontSize: "14px",width: "121px",maxLines: 1,lineHeight: "18px",top: "327px",left: "35px",},},{type: "qrcode",content: "https://www.baidu.com", //二维码地址css: {top: "276px",right: "12px",color: "#000",width: "72px",height: "72px",},},],},};},methods: {success(src) {this.poster = src;console.log(src);},fail(err) {console.log("fail", err);},},
};
</script>

生成带有logo的二维码可以使用vue-qr：
1、安装

npm install vue-qr --save

2、使用

<template><div><vue-qrref='Qrcode':logo-src="logoSrc" size="150":margin="0" :logoScale=".2":logoMargin="2"logoBackgroundColor="white":text="appSrc" /><button size='small' @click="downloadImg">下载二维码</button></div>
</template>
<script>import VueQr from 'vue-qr'
export default {data() {return {}},methods: {downloadImg () {const iconUrl = this.$refs['Qrcode'].$el.src;console.log(iconUrl,'iconUrl');},},
};
</script>

还可以使用：Awesome-qr.js
官网地址awesome-qr

 new AwesomeQR({text: "AwesomeQR by Makito - Awesome, right now.",size: 500,logoImage:'',//logo图片logoScale:'',//logo大小比例logoCornerRadius:'',//圆角大小，默认为8logoMargin:'',//标识周围的空白边框, 默认为0}).draw().then((dataURL) => {console.log(dataURL);});

http://chatgpt.dhexx.cn/article/NyjU4lTo.shtml

相关文章

uniapp 微信小程序分享功能

uniapp 微信小程序分享功能

微信小程序分享功能、传参、接收参数 1&#xff0c;分享功能 在页面上与methods同级写上onShareAppMessage()函数。 onShareAppMessage() {return{title: "xxx欢迎你",//分享标题path: "/pages/detail/detail",//页面 path &#xff0c;必须是以 / 开头的…
阅读更多...
微信小程序商品分享海报

微信小程序商品分享海报

canva实现微信小程序商品分享海报 前言 使用canvas画布实现小程序分享海报功能 一、定义一个生成海报按钮 1.点击按钮生成海报 catchtap:handleShare 使用catch绑定阻止事件冒泡 <view class"poster_window " catchtap"handleShare"><view cl…
阅读更多...
小白开发微信小程序18--转发API

小白开发微信小程序18--转发API

1、什么是api 微信小程序API&#xff08;Application Programming Interface&#xff09;&#xff0c;应用程序编程接口&#xff0c;也是程序员口中常说的接口。其实api并不专属于小程序&#xff0c;任何编程语言或程序形态都有相对应的api。而我们今天谈的小程序api&#xff0…
阅读更多...
mysql在线增加字段_MySQL在线加字段实现原理

mysql在线增加字段_MySQL在线加字段实现原理

作者&#xff1a;vinchen 腾讯互娱内部维护了一个TMySQL分支&#xff0c;基于官方5.5.24&#xff0c;实现了类似于Oracle 11g的快速加字段功能。该功能通过扩展存储格式来实现&#xff0c;原理类似于Oracle 11g&#xff0c;以下介绍下其实现原理。 1. GCS行格式 需要在innodb中…
阅读更多...
mysql新增json_mysql5.7 新增的json字段类型用法实例分析

mysql新增json_mysql5.7 新增的json字段类型用法实例分析

本文实例讲述了mysql5.7 新增的json字段类型用法。分享给大家供大家参考&#xff0c;具体如下&#xff1a; 一、我们先创建一个表&#xff0c;准备点数据 CREATE TABLE json_test ( id int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT ID, json json DEFAULT NULL COMMENT j…
阅读更多...
Mysql新增字段到大数据表导致锁表

Mysql新增字段到大数据表导致锁表

昨天晚上7点左右&#xff0c;对一张表进行加字段&#xff0c;大概200多万条记录&#xff0c;字段90多个的大表&#xff0c;结果造成mysql锁表&#xff0c;进而导致服务不可用。执行语句如下&#xff1a; [sql] view plain copy ALTER TABLE sc_stockout_order ADD route_remar…
阅读更多...
MySQL 新增字段（alter table add column)，报错：Duplicate entry

MySQL 新增字段（alter table add column)，报错：Duplicate entry

问题 执行一个增加字段的DDL语句脚本时&#xff0c;报错&#xff0c;错误如下: Error 1062: Duplicate entry c51d3db8-59a5 2022-06-28 17:59:59 for key uniq_material_date重复执行报相同的错误。根据错误提示的条件去数据库中查询却只能查到一条记录&#xff0c;并没有重…
阅读更多...
mysql新增、修改表字段

mysql新增、修改表字段

一、新增字段 说明&#xff1a;以下语句关键字COLUMN&#xff0c;都可以省略&#xff0c;“ACT_AAA”是表名 格式 ALTER TABLE 表名 ADD COLUMN 字段名称 字段类型&#xff08;字段长短-选填&#xff09; CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL&#xf…
阅读更多...
ln命令使用

ln命令使用

Linux中ln是一个非常重要的一个命令&#xff0c;主要是将两个文档进行连接&#xff0c;创建一个连接关系 连接档&#xff1a;ln 使用ln可以在两个文件之间建立关联&#xff0c;就类似Windows下的快捷方式&#xff0c;连接有两种方式 Hard Link&#xff08;硬式连接或实际连接…
阅读更多...
Linux ln 命令是什么？C/C++代码实现

Linux ln 命令是什么？C/C++代码实现

在Linux中&#xff0c;在命令行上工作时&#xff0c;需要在文件之间创建链接&#xff0c;将文件名与文件数据相关联。这可以使用名为 ln 的专用命令来实现。 什么是链接&#xff1f; 在讨论 ln 命令之前&#xff0c;让我们先讨论一下链接命令&#xff0c;什么是链接&#xff…
阅读更多...
Linux命令详解（13）- ln命令

Linux命令详解（13）- ln命令

ln是英文“link files”的缩写&#xff0c;命令不算复杂&#xff0c;但是非常重要。 语法&#xff1a; ln option Source file or directory Destination file or directory 这里先讲下两个概念。 1.软连接 软链接类似于windows系统中的快捷方式。创建之后&#xff0c…
阅读更多...
linux ln 远程,Linux 软连接 (ln命令)

linux ln 远程,Linux 软连接 (ln命令)

这是linux中一个非常重要命令。它的功能是为某一个文件在另外一个位置建立一个同不的链接，这个命令最常用的参数是-s,具体用法是：ln -s 源文件 目标文件。 当我们需要在不同的目录，用到相同的文件时，我们不需要在每一个需要的目录下都放一个必须相同的文件，我们只要在某个…
阅读更多...
linux 中的 ln 命令,Linux ln命令操作指南

linux 中的 ln 命令,Linux ln命令操作指南

ln是Linux系统中一个重要的命令&#xff0c;能够为文件建立链接&#xff0c;保持链接文件的同步性&#xff0c;下面小编就给大家介绍下Linux下如何使用ln命令&#xff0c;通过实例来详细了解。 1. 使用ln命令给档案创建symbolic link。 linux系统下的symbolic link类似于window…
阅读更多...
Linux ln命令详解

Linux ln命令详解

ln命令来自于英文单词link的缩写&#xff0c;中文译为“链接”&#xff0c;其功能是用于为某个文件在另外一个位置建立同步的链接。Linux系统中的链接文件有两种形式&#xff0c;一种是硬链接&#xff08;hard link&#xff09;&#xff0c;另一种是软链接&#xff08;symbolic…
阅读更多...
ln命令应用

ln命令应用

记录&#xff1a;352 场景&#xff1a;在CentOS 7.9操作系统上&#xff0c;使用ln命令创建软链接(symbolic links)和硬链接(hard links)。解决&#xff1a;Too many levels of symbolic links。 版本&#xff1a; 操作系统&#xff1a;CentOS 7.9 1.命令应用 (1)目录创建软…
阅读更多...
linux ln命令

linux ln命令

ln 命令的功能是在不同的位置创建一个链接&#xff0c;又分软链接和硬链接&#xff0c;一般软链接使用较多。 硬链接&#xff1a;ln 源文件 链接文件 是在选定的位置生成一个文件的镜像&#xff0c;镜像文件与源文件同样大小 软连接&#xff1a;ln –s 源文件 链接文件 是…
阅读更多...
ln命令详解

ln命令详解

Linux文件系统中&#xff0c;有所谓的链接(link)&#xff0c;我们可以将其视为档案的别名&#xff0c;而链接又可分为两种 : 硬链接(hard link)与软链接(symbolic link)&#xff0c;硬链接的意思是一个文件可以有多个名称&#xff0c;而软链接的方式则是产生一个特殊的文件&…
阅读更多...
ubuntu18.04虚拟机崩掉导致硬盘错误，提示fsck manually

ubuntu18.04虚拟机崩掉导致硬盘错误，提示fsck manually

问题描述&#xff1a; 可能是一次性复制的文件太大了&#xff0c;导致内存吃紧&#xff0c;Windows10直接崩掉&#xff0c;接着就进入了我经常看到的那个蓝屏错误提示界面&#xff0c;有个正在恢复的百分数进度提示。 这个问题我经常碰到&#xff0c;或许是网页开多了吧&…
阅读更多...
dos磁盘管理命令

dos磁盘管理命令

dos磁盘管理命令 前言 磁盘管理命令用于日常的磁盘维护。DOS命令行提供了多种文件管理命令用于设置和管理磁盘列表。由于很多磁盘在没有安装图形界面的时候就需要对其进行操作&#xff0c;所以掌握DOS命令行下的磁盘管 理命令对系统管理员是十分必要的。 磁盘管理命令 以下…
阅读更多...
centos 硬盘 修复

centos 硬盘 修复

xfs_repair -n /dev/sdb centos 硬盘 修复 sudo parted -l sudo parted -l [localhost home]$ sudo parted -l Model: Dell VIRTUAL DISK (scsi) Disk /dev/sda: 1000GB Sector size (logical/physical): 512B/512B Partition Table: msdos Disk Flags:Number Start End…
阅读更多...
推荐文章

Copyright @ 2022~2023