山东教育行业网站建设推荐,养老保险2023价格表,免费微商城怎么开通?,沈阳seo网站推广优化我们这里这里有一个需求#xff0c;是将当前页面保存为海报分享给朋友或者保存到本地相册#xff0c;因为是在小程序端开发的#xff0c;所以不能使用html2canvas这个库#xff0c;而且微信官方新推出Snapshot.takeSnapshot这个api还不是很完善#xff0c;如果你是纯小程序…我们这里这里有一个需求是将当前页面保存为海报分享给朋友或者保存到本地相册因为是在小程序端开发的所以不能使用html2canvas这个库而且微信官方新推出Snapshot.takeSnapshot这个api还不是很完善如果你是纯小程序开发的可以看这篇文章微信小程序渲染引擎Skyline小试牛刀--快书 - 知乎
我这里使用uniapp开发的所以只能使用传统的方式开发就是使用canvas自己画一个出来这个过程中遇到了也是很多的挑战和问题这里记录一下。
基础canvas配置
需要在template中添加一个canvas画布并且配置id和canvas-id
千万不要多此一举加上类型 type2d 这些参数因为会没有任何反应还会一堆问题 !-- 绘制海报的canvas --canvas classshare-content idmyCanvas canvas-idmyCanvas /
因为我开发环境是vue3所以创建画布和保存图片都不需要传递this或者instance实例 // 创建画布const canvasId myCanvasconst ctx uni.createCanvasContext(canvasId); 问题canvasToTempFilePath: fail canvas is empty
1.可能是你加上了 type2d这个参数导致的。
2.可能是canvas的id或者id没有配置正确没有和js中的id一致导致的。
3.可能是canvas还没渲染出来你就开始使用导致的。
4.可能是你没有加上this或者instance导致的。vue2中要加上thisvue3中可以使用getCurrentInstance 这个vue中的函数获取实例对象。
import { getCurrentInstance } from vue;const instance getCurrentInstance() as any
// 换整个圆环
const ctx uni.createCanvasContext(circlefCanvas, instance); 问题画出来的图片是空白
1.可能是你ctx.draw()之后没有等一会就开始生成图片出来就是空白。
2.可能是你画布设置的尺寸太小或者canvasToTempFilePath中传递的参数x,y,宽高太小导致的内容没有画到话不上导致的
