uniapp+vue3使用canvas保存海报的使用示例,各种奇奇怪怪的问题解决办法

我们这里这里有一个需求,是将当前页面保存为海报分享给朋友或者保存到本地相册,因为是在小程序端开发的,所以不能使用html2canvas这个库,而且微信官方新推出Snapshot.takeSnapshot这个api还不是很完善,如果你是纯小程序开发的,可以看这篇文章:微信小程序渲染引擎Skyline小试牛刀--快书 - 知乎

我这里使用uniapp开发的,所以只能使用传统的方式开发,就是使用canvas自己画一个出来,这个过程中遇到了也是很多的挑战和问题,这里记录一下。

基础canvas配置

需要在template中添加一个canvas画布,并且配置id和canvas-id:

千万不要多此一举加上类型 type="2d" 这些参数,因为会没有任何反应还会一堆问题

  <!-- 绘制海报的canvas --><canvas class="share-content" id="myCanvas" canvas-id="myCanvas" />

因为我开发环境是vue3,所以创建画布和保存图片都不需要传递this或者instance实例: 

  // 创建画布:const canvasId = "myCanvas"const ctx = uni.createCanvasContext(canvasId);

 

问题:canvasToTempFilePath: fail canvas is empty

1.可能是你加上了 type="2d"这个参数导致的。

2.可能是canvas的id或者id没有配置正确,没有和js中的id一致导致的。

3.可能是canvas还没渲染出来,你就开始使用导致的。

4.可能是你没有加上this或者instance导致的。vue2中要加上this,vue3中可以使用getCurrentInstance 这个vue中的函数获取实例对象。

import { getCurrentInstance } from "vue";const instance = getCurrentInstance() as any
// 换整个圆环
const ctx = uni.createCanvasContext("circlefCanvas", instance);

问题:画出来的图片是空白

1.可能是你ctx.draw()之后,没有等一会就开始生成图片,出来就是空白。

2.可能是你画布设置的尺寸太小,或者canvasToTempFilePath中传递的参数x,y,宽高太小导致的内容没有画到话不上导致的

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

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

相关文章

如果一个嵌套类需要在单个方法之外仍然是可见,或者它太长,不适合放在方法内部,就应该使用成员类。

当一个嵌套类需要在单个方法之外仍然是可见&#xff0c;或者它太长不适合放在方法内部时&#xff0c;可以考虑使用成员类&#xff08;成员内部类&#xff09;。成员类是声明在类的内部但不是在方法内部的类&#xff0c;可以访问外部类的实例成员。 以下是一个示例&#xff0c;…

【问题处理】—— lombok 的 @Data 大小写区分不敏感

问题描述 今天在项目本地编译的时候&#xff0c;发现有个很奇怪的问题&#xff0c;一直提示某位置找不到符号&#xff0c; 但是实际在Idea中显示确实正常的&#xff0c;一开始以为又是IDEA的故障&#xff0c;所以重启了IDEA&#xff0c;并执行了mvn clean然后重新编译。但是问…

ASF-YOLO开源 | SSFF融合+TPE编码+CPAM注意力,精度提升!

目录 摘要 1 Introduction 2 Related work 2.1 Cell instance segmentation 2.2 Improved YOLO for instance segmentation 3 The proposed ASF-YOLO model 3.1 Overall architecture 3.2 Scale sequence feature fusion module 3.3 Triple feature encoding module …

【Python网络爬虫入门教程3】成为“Spider Man”的第三课:从requests到scrapy、爬取目标网站

Python 网络爬虫入门&#xff1a;Spider man的第三课 写在最前面从requests到scrapy利用scrapy爬取目标网站更多内容 结语 写在最前面 有位粉丝希望学习网络爬虫的实战技巧&#xff0c;想尝试搭建自己的爬虫环境&#xff0c;从网上抓取数据。 前面有写一篇博客分享&#xff0…

【实用技巧】从文件夹内批量筛选指定文件并将其复制到目标文件夹

原创文章&#xff0c;转载请注明出处&#xff01; 从文件夹中批量提取指定文件。 使用DOS命令&#xff0c;根据TXT文件中列出指定文件名&#xff0c;批量实现查找指定文件夹里的文件并复制到新的文件夹。 文中给出使用DOS命令和建立批处理文件两种方法。 文件准备 工作文件…

vite(一)——基本了解和依赖预构建

文章目录 一、什么是构建工具&#xff1f;1.为什么使用构建工具&#xff1f;2.构建工具的作用&#xff1f;3.构建工具怎么用&#xff1f; 二、经典面试题&#xff1a;webpack和vite的区别1.编译方式不同2.基础概念不同3.开发效率不同4.扩展性不同5.应用场景不同6.总结&#xff…

vue 组件实现v-model

ChatgGPT4.0国内站点: 海鲸AI 在Vue中&#xff0c;可以通过使用v-model指令来实现双向数据绑定。如果你想在自定义组件中使用v-model&#xff0c;需要做一些额外的工作。 首先&#xff0c;在组件的props中定义一个名为value的属性&#xff0c;用于接收父组件传递的值。然后&a…

QT- QT-lximagerEidtor图片编辑器

QT- QT-lximagerEidtor图片编辑器 一、演示效果二、关键程序三、下载链接 功能如下&#xff1a; 1、缩放、旋转、翻转和调整图像大小 2、幻灯片 3、缩略图栏&#xff08;左、上或下&#xff09;&#xff1b;不同的缩略图大小 4、Exif数据栏 5、内联图像重命名 6、自定义快捷方式…

MybatisPlus的分页插件

PaginationInnerInterceptor 此插件是核心插件,目前代理了 Executor#query 和 Executor#update 和 StatementHandler#prepare 方法。 在SpringBoot环境中配置方式如下&#xff1a; /*** author giserDev* description 配置分页插件、方言、mapper包扫描等* date 2023-12-13 …

删除一个字符串中的指定字母,如:字符串 “aca“,删除其中的 a 字母。

#include<stdio.h> #include<stdlib.h> #include<string.h> // 删除字符串中指定字母函数 char* deleteCharacters(char * str, char * charSet) { int hash [256]; if(NULL charSet) return str; for(int i 0; i < 256; i) …

B - Team Gym - 102801B ( 网络流问题)

题目链接 先占个坑&#xff0c;有空写一下思路 #include <bits/stdc.h> using namespace std; #define pi acos(-1) #define xx first #define yy second #define endl "\n" #define lowbit(x) x & (-x) #define int long long #define ull unsigned lo…

Vue3安装使用Mock.js--解决跨域

首先使用axios发送请求到模拟服务器上&#xff0c;再将mock.js模拟服务器数据返回给客户端。打包工具使用的是vite。 1.安装 npm i axios -S npm i mockjs --save-dev npm i vite-plugin-mock --save-dev 2.在vite.config.js文件中配置vite-plugin-mock等消息 import { viteMo…

RedisHelper

Redis面试题&#xff1a; 1、什么是事务&#xff1f;2、Redis中有事务吗&#xff1f;3、Redis中的事务可以回滚吗&#xff1f; 答&#xff1a; 1、事务是指一个完整的动作&#xff0c;要么全部执行&#xff0c;要么什么也没有做 2、Redis中有事务&#xff0c;Redis 事务不是严…

分页操作中使用LIMIT和OFFSET后出现慢查询的原因分析

事情经过 最近在做批量数据处理的相关业务&#xff0c;在和下游对接时&#xff0c;发现拉取他们的业务数据刚开始很快&#xff0c;后面会越来越慢&#xff0c;40万数据一个小时都拉不完。经过排查后&#xff0c;发现对方用了很坑的分页查询方式 —— LIMIT OFFSET&#xff0c;…

【前端学习记录】Vue前端规范整理

文章目录 前言一、文件及文件夹命名二、钩子顺序三、注释规范四、组件封装五、CSS编码规范六、JS编码规范 前言 优秀的项目源码&#xff0c;即使是多人开发&#xff0c;看代码也如一人之手。统一的编码规范&#xff0c;可使代码更易于阅读&#xff0c;易于理解&#xff0c;易于…

mysql中NULL值

mysql中NULL值表示“没有值”&#xff0c;它跟空字符串""是不同的 例如&#xff0c;执行下面两个插入记录的语句&#xff1a; insert into test_table (description) values (null); insert into test_table (description) values ();执行以后&#xff0c;查看表的…

harmonyOS鸿蒙内核概述

内核概述 内核简介 用户最常见到并与之交互的操作系统界面&#xff0c;其实只是操作系统最外面的一层。操作系统最重要的任务&#xff0c;包括管理硬件设备&#xff0c;分配系统资源等&#xff0c;我们称之为操作系统内在最重要的核心功能。而实现这些核心功能的操作系统模块…

2023年全国职业院校技能大赛信息安全管理与评估正式赛(模块三理论技能)

2023年全国职业院校技能大赛&#xff08;高等职业教育组&#xff09;“信息安全管理与评估”理论技能 理论技能与职业素养&#xff08;100分&#xff09; 【注意事项】 1.理论测试前请仔细阅读测试系统使用说明文档&#xff0c;按提供的账号和密码登录测试系统进行测试&…

【经验分享】gemini-pro和gemini-pro-vision使用体验

Gemini Gemini已经对开发者开放了Gemini Pro的使用权限&#xff0c;目前对大家都是免费的&#xff0c;每分钟限制60条&#xff0c;至少这比起CloseAI的每个账户5刀限速1min3条要香的多&#xff0c;目前已于第一时间进行了体验 一句话总结&#xff0c;google很大方&#xff0c;但…

【Spring】@SpringBootApplication注解解析

前言&#xff1a; 当我们第一次创建一个springboot工程时&#xff0c;我们会对启动类&#xff08;xxxApplication&#xff09;有许多困惑&#xff0c;为什么只要运行启动类我们在项目中自定义的bean无需配置类配置&#xff0c;扫描就能自动注入到IOC容器中&#xff1f;为什么我…