当前位置: 首页 > news >正文

uniapp小程序分享使用canvas自定义绘制 vue3

使用混入结合canvas做小程序的分享
在混入里面定义一个全局共享的分享样式,在遇到特殊页面需要单独处理

utils/share.js

import { ref } from 'vue';
export default {onShow() {// 创建时设置统一页面的默认值uni.$mpShare = {title: '分享的标题',path: '/pages/home/home',imageUrl: 'https:xxx',success: function (res) {// 转发成功之后的回调console.log('转发成功之后的回调', res);if (res.errMsg == 'shareAppMessage:ok') {}},fail: function () {// 转发失败之后的回调console.log('转发失败之后的回调', res);if (res.errMsg == 'shareAppMessage:fail cancel') {// 用户取消转发} else if (res.errMsg == 'shareAppMessage:fail') {// 转发失败,其中 detail message 为详细失败信息}},};},//发送给朋友onShareAppMessage(res) {console.log(' uni.$mpShare-----------', uni.$mpShare);return uni.$mpShare;},//分享到朋友圈onShareTimeline(res) {return uni.$mpShare;},
};

main.js混入

import share from '/utils/share.js';
export function createApp() {const app = createSSRApp(App);app.use(Pinia.createPinia());app.mixin(share); // 这里app.use(uviewPlus);return {app,Pinia,};
}

Canvas绘制海报
commonShare.js

/*** canvas* context* currentObj 绘制需要用到的对象* bgImg 背景图* dpr 设备分辨率* type 类型*/export async function createPoster(canvas, context, currentObj, bgImg, dpr, type) {const bgImage = await renderImg(canvas, bgImg);//绘制矩形context.drawImage(bgImage, 0, 0, canvas.width / dpr, canvas.height / dpr);context.fillStyle = '#FFF';context.strokeStyle = '#303030';context.lineWidth = 2;context.strokeRect(16, 100, 343, 180);context.fillRect(16, 100, 343, 180);switch (type) {//周边商品case 'periphery'://绘制商品图片const productPath = showPicture(currentObj.goodsPictures[0].picture);const productImg = await renderImg(canvas, productPath);context.drawImage(productImg, 28, 112, 150, 157);//绘制商品名称context.font = 'normal normal bold 19px SourceHanSansCN-Bold';context.fillStyle = '#0D1932';context.fillText(currentObj.goodsName, 189, 136);//绘制¥context.font = 'normal normal bold 25px SourceHanSansCN-Bold';context.fillStyle = '#FE2A12';context.fillText(`${currentObj.giftPrice}.${currentObj.giftPricePrefix}`, 189, 256);break;
}let path = await generatePath(context);console.log('分享图片', path);return path;
}//图片显示
function showPicture(srcPath) {if (srcPath.includes('http')) {return srcPath;} else {return 'https://xxxxxx' + srcPath; // 注意路径}
}//创建图片对象
function renderImg(canvas, url) {// url传临时路径return new Promise((resolve) => {const img = canvas.createImage();img.src = `${url}?timestamp=${new Date().getTime()}`;img.onload = () => {resolve(img);};});
}function base64src(base64data, fun) {const base64 = base64data; //base64格式图片const time = new Date().getTime();const imgPath = uni.env.USER_DATA_PATH + '/poster' + time + 'share' + '.png';//如果图片字符串不含要清空的前缀,可以不执行下行代码.const imageData = base64.replace(/^data:image\/\w+;base64,/, '');const file = uni.getFileSystemManager();file.writeFileSync(imgPath, imageData, 'base64');fun(imgPath);
}async function generatePath(context) {let base64IMG = context.canvas.toDataURL();let pathImg = '';await base64src(base64IMG, (res) => {pathImg = res;});return pathImg;
}

Canvas.createImage() 创建Image对象onload事件在安卓真机下只会触发一次,
确保每次加载的 URL 是唯一的:通过在 URL 后面添加一个时间戳或随机数来避免缓存问题。

img = `${url}?timestamp=${new Date().getTime()}`;

单独页面的处理xxxx.vue

<view id="canvas" v-show="false"><canvas id="myCanvas" type="2d" canvas-id="myCanvas" style="width: 375px; height: 300px"></canvas>
</view><script setup>
//引入分享绘制canvas
import { createPoster } from '/utils/commonShare.js';
onShow(() => {generatorCanvasUrl();
});function generatorCanvasUrl() {uni.createSelectorQuery().select('#myCanvas').node((res) => {let canvas = res.node;let context = res.node.getContext('2d');uni.getSystemInfo({success: async function (sysRes) {const dpr = sysRes.devicePixelRatio;canvas.width = 375 * dpr;canvas.height = 300 * dpr;context.clearRect(0, 0, canvas.width, canvas.height);context.scale(dpr, dpr);let path = await createPoster(canvas, context, currentObj.value, canvasBgImg.value, dpr, canvasType.value);uni.$mpShare = {title: canvasTitle.value,path: '/pagesDiscover/group/group-product-dedails?from=sharePage&data=' + encodeURIComponent(JSON.stringify(currentObj.value)),imageUrl: path,};console.log('重绘成功');},});}).exec();}
</script>

注意几个问题

  1. canvas的绘制时间,需要在拿到数据之后,dom生成之前绘制完成,onShow不可以就试试onReady,否则就会绘制失败(图片找不到,数据undefined)
  2. 图片路径后面一定要加时间戳保证图片路径是唯一的,否则就会一直走缓存
  3. 如果页面想要重置分享但是不用canvas绘制,直接用下面这个
const shareData = computed(() => {// 分享的数据return {title: '重置',desc: '重置',path: '/xxxx/xxxx/xxxx',imageUrl: 'xxxxx',};
});
onShow(() => {uni.$mpShare = shareData.value; // 修改uni.$mpShare的值
});

相关文章:

uniapp小程序分享使用canvas自定义绘制 vue3

使用混入结合canvas做小程序的分享 在混入里面定义一个全局共享的分享样式&#xff0c;在遇到特殊页面需要单独处理 utils/share.js import { ref } from vue; export default {onShow() {// 创建时设置统一页面的默认值uni.$mpShare {title: 分享的标题,path: /pages/home/…...

SpringCloud核心组件(四)

文章目录 NacosNacos 配置中心1.起源2.基本概念ProfileData IDGroup 3.基础配置a. bootstrap.ymlb. application.ymlc. nacos 中的配置 DataIDd.测试读取配置中心配置内容 4.配置隔离a.命名空间b.DataIDc.bootstrap.ymld.service 隔离 5.配置拆分a.配置拆分策略b.DataID 配置c.…...

如何把本地docker 镜像下载用到centos系统中呢?

如果需要将镜像下载到本地或在 CentOS 系统上使用该镜像&#xff0c;你可以按照以下步骤操作&#xff1a; 1. 拉取镜像 如果想将镜像从 Docker Hub 或其他镜像仓库下载到本地&#xff0c;可以使用 docker pull 命令。 如果使用的是本地构建的镜像&#xff08;如 isc:v1.0.0&…...

Godot的开发框架应当是什么样子的?

目录 前言 全局协程还是实例协程&#xff1f; 存档&#xff01; 全局管理类&#xff1f; UI框架&#xff1f; Godot中的异步&#xff08;多线程&#xff09;加载 Godot中的ScriptableObject 游戏流程思考 结语 前言 这是一篇杂谈&#xff0c;主要内容是对我…...

GitHub新手入门 - 从创建仓库到协作管理

GitHub新手入门 - 从创建仓库到协作管理 GitHub 是开发者的社交平台&#xff0c;同时也是代码托管的强大工具。无论是个人项目、开源协作&#xff0c;还是团队开发&#xff0c;GitHub 都能让你轻松管理代码、版本控制和团队协作。今天&#xff0c;我们将从基础开始&#xff0c…...

作业25 深度搜索3

作业&#xff1a; #include <iostream> using namespace std; bool b[100][100]{0}; char map[100][100]{0}; int dx[4]{0,1,0,-1}; int dy[4]{1,0,-1,0}; int n,m; int sx,sy,ex,ey; int mink2147483647; void dfs(int,int,int); int main(){cin>>n>>m;for(…...

ubuntu20.04 colmap 安装2024.11最新

很多教程都很落后了&#xff0c;需要下载压缩包解压编译的很麻烦 现在就只需要apt install就可以了 apt更新 sudo apt update && sudo apt-get upgrade安装依赖 #安装依赖 sudo apt-get install git cmake ninja-build build-essential libboost-program-options-de…...

WebRTC视频 03 - 视频采集类 VideoCaptureDS 上篇

WebRTC视频 01 - 视频采集整体架构 WebRTC视频 02 - 视频采集类 VideoCaptureModule [WebRTC视频 03 - 视频采集类 VideoCaptureDS 上篇]&#xff08;本文&#xff09; WebRTC视频 04 - 视频采集类 VideoCaptureDS 中篇 WebRTC视频 05 - 视频采集类 VideoCaptureDS 下篇 一、前…...

python os.path.basename(获取路径中的文件名部分) 详解

os.path.basename 是 Python 的 os 模块中的一个函数&#xff0c;用于获取路径中的文件名部分。它会去掉路径中的目录部分&#xff0c;只返回最后的文件名或目录名。 以下是 os.path.basename 的详细解释和使用示例&#xff1a; 语法 os.path.basename(path) 参数 path&…...

《FreeRTOS任务基础知识以及任务创建相关函数》

目录 1.FreeRTOS多任务系统与传统单片机单任务系统的区别 2.FreeRTOS中的任务&#xff08;Task&#xff09;介绍 2.1 任务特性 2.2 FreeRTOS中的任务状态 2.3 FreeRTOS中的任务优先级 2.4 在任务函数中退出 2.5 任务控制块和任务堆栈 2.5.1 任务控制块 2.5.2 任务堆栈…...

036集——查询CAD图元属性字段信息:窗体显示(CAD—C#二次开发入门)

提取CAD图元所有属性字段&#xff0c;通过窗体显示&#xff0c;效果如下&#xff1a;&#xff08;curve改为entity&#xff09; 代码如下&#xff1a; public void 属性查询() {List<Curve> ents Z.db.SelectEntities<Curve>();if (ents is null ||ents.Cou…...

Swift从0开始学习 函数和闭包 day2

一、函数 1.1函数定义 使用 func 来声明一个函数&#xff0c;使用名字和参数来调用函数。使用 -> 来指定函数返回值的类型。 示例&#xff1a;拼接字符串 //有参数和返回值的函数 func append1(name : String, description : String) -> String {return "\(name)…...

内网、公网(外网)划分

内网、公网&#xff08;外网&#xff09;划分 声明&#xff01; 学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章 笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其…...

【linux】centos7 换阿里云源

相关文章 【linux】CentOS 的软件源&#xff08;Repository&#xff09;学习-CSDN博客 查看yum配置文件 yum的配置文件通常位于/etc/yum.repos.d/目录下。你可以使用以下命令查看这些文件&#xff1a; ls /etc/yum.repos.d/ # 或者 ll /etc/yum.repos.d/备份当前的yum配置文…...

用OMS进行 OceanBase 租户间数据迁移的测评

基本概念 OceanBase迁移服务&#xff08;&#xff0c;简称OMS&#xff09;&#xff0c;可以让用户在同构或异构 RDBMS 与OceanBase 数据库之间进行数据交互&#xff0c;支持数据的在线迁移&#xff0c;以及实时增量同步的复制功能。 OMS 提供了可视化的集中管控平台&#xff…...

【因果分析方法】MATLAB计算Liang-Kleeman信息流

【因果分析方法】MATLAB计算Liang-Kleeman信息流 1 Liang-Kleeman信息流2 MATLAB代码2.1 函数代码2.2 案例参考Liang-Kleeman 信息流(Liang-Kleeman Information Flow)是由 Liang 和 Kleeman 提出的基于信息论的因果分析方法。该方法用于量化变量之间的因果关系,通过计算信息…...

【Java基础知识系列】之Java类的初始化顺序

前言 类的初始化顺序 简单场景 代码示例 public class Person {private String name initName();private String initName() {System.out.println("【父类】初始化实例变量name");return "【父类】史蒂夫";}private int age;private static int staticVa…...

Swift 宏(Macro)入门趣谈(二)

概述 苹果在去年 WWDC 23 中就为 Swift 语言新增了“其利断金”的重要小伙伴 Swift 宏&#xff08;Swift Macro&#xff09;。为此&#xff0c;苹果特地用 2 段视频&#xff08;入门和进阶&#xff09;颇为隆重的介绍了它。 那么到底 Swift 宏是什么&#xff1f;有什么用&…...

vue elementui el-dropdown-item设置@click无效的解决方案

如图&#xff0c;直接在el-dropdown-item上面设置click&#xff0c;相应的method并没有被触发&#xff0c;查找资料发现需要在它的上级 el-dropdown 处使用 command 方法触发。 【template】 <el-dropdown placement"bottom-end" command"handleCommand&quo…...

如何用re从第1排第2个位置中找到两个数字返回(0,1)

以下是使用 Python 的re模块从第1班第2个位置这样的字符串中提取出数字并返回类似(0, 1)这种形式的示例代码&#xff0c;假设数字都是一位数的情况&#xff08;如果是多位数可以按照后续介绍稍作调整&#xff09;&#xff1a; import redef extract_numbers(text):numbers re.…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...