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

2023-12-14 20:35:08

我们这里这里有一个需求,是将当前页面保存为海报分享给朋友或者保存到本地相册,因为是在小程序端开发的,所以不能使用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,宽高太小导致的内容没有画到话不上导致的

文章来源:https://blog.csdn.net/weixin_44786530/article/details/135002300
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。