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

旧城等待， 2024-02-05 15:25 13阅读 0赞

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

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

## 基础canvas配置 ##

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

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

<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,宽高太小导致的内容没有画到话不上导致的

![5509628991914795a4ba1e3af312ee47.png][]

[Skyline_--_ -]: https://zhuanlan.zhihu.com/p/653861870
[5509628991914795a4ba1e3af312ee47.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/d134be8744d44998978971bbabbae463.png

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关前端也能获取电池信息，5分钟带你了解奇奇怪怪的知识点

BatteryManager 对象提供了 level、charging、chargingTime 等属性反映电池状态。通过 Battery Status API,前端可以...

淩亂°似流年/ 2024年04月22日 19:21/ 0 赞/ 57 阅读

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

我们这里这里有一个需求，是将当前页面保存为海报分享给朋友或者保存到本地相册，因为是在小程序端开发的，所以不能使用html2canvas这个库，而且微信官方新推出Snapshot

旧城等待，/ 2024年02月05日 15:25/ 0 赞/ 14 阅读

相关使用withRouter报错的问题原因及解决办法

原因是因为你没有把你的Router放在最外面，withRouter不可以放在Router的外面。比如【下方是错误的】： > 在下面的代码中如果你在BasicLayout组

我就是我/ 2023年06月20日 06:25/ 0 赞/ 48 阅读

相关计算机里那些奇奇怪怪的数值问题

Number 计算机里面关于数值的处理自有一套体系理论，与现实生活中我们所习惯使用的不太一样。如果对其不了解，在使用计算机的过程中便可能发生一些意想不到的错误。今天本文就

客官°小女子只卖身不卖艺/ 2023年01月19日 04:40/ 0 赞/ 25 阅读

相关一个tp3.2奇怪的数据保存不完整的问题的解决

保存数据130多行，只保存了60多行进去，仔细排查，发现是有个图片路径的字段的问题，有些图片路径是带90端口的，例如 http://www.x.com:90/a1.jpg

待我称王封你为后i/ 2023年01月16日 12:24/ 0 赞/ 10 阅读

相关 Vue 生成海报的插件vue-canvas-poster

1.npm安装vue-canvas-poster npm i --save vue-canvas-poster 2.在mian.js中引入 imp

古城微笑少年丶/ 2022年09月10日 03:30/ 0 赞/ 538 阅读

相关 Canvas的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />

你的名字/ 2022年08月28日 07:53/ 0 赞/ 123 阅读

相关 PyCharm使用中文注释报错的解决办法

Pycharm中编写python程序，如果使用中文注释，会发生报错，究其原因是字符编码的问题。在文件头加入： -- coding: utf-8 -- 就可以

Dear 丶/ 2022年06月03日 00:15/ 0 赞/ 817 阅读

相关遇到的奇奇怪怪的问题

> 1 无法生成静态文件问题描述：本地环境可以生成静态文件，而测试环境只能生成90%左右，可以确保代码层面没有问题产生原因：测试服务器硬盘用尽 > 2

灰太狼/ 2022年05月18日 03:36/ 0 赞/ 215 阅读

相关 Android Studio 使用中遇到的那些奇奇怪怪的问题

版权声明：1、本BLOG的目的、形式及内容。　　此BLOG为个人维护BLOG，内容均来自原创及互连网转载。最终目的为收集整理自己需要的文章技术等内容，不涉及商业用途。\\r

「爱情、让人受尽委屈。」/ 2022年04月04日 12:14/ 0 赞/ 385 阅读