Taro.createOffscreenCanvas(options)

创建离屏 canvas 实例

支持情况：

[参考文档](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createOffscreenCanvas.html

有两个版本的写法：

• createOffscreenCanvas(options) 从 2.16.1 起支持
• createOffscreenCanvas(width, height, this) 从 2.7.0 起支持)

类型

(options: Option) => OffscreenCanvas

参数

参数	类型
options	Option

Option

参数	类型	默认值	必填	说明
type	"webgl" or "2d"	: 'webgl'	否	创建的离屏 canvas 类型
height	number		否	画布高度
width	number		否	画布宽度
compInst	TaroGeneral.IAnyObject		否	在自定义组件下，当前组件实例的 this，以操作组件内 canvas 组件

示例代码

// 创建离屏 2D canvas 实例
const canvas = Taro.createOffscreenCanvas({type: '2d', width: 300, height: 150})
// 获取 context。注意这里必须要与创建时的 type 一致
const context = canvas.getContext('2d')

// 创建一个图片
const image = canvas.createImage()
// 等待图片加载
await new Promise(resolve => {
  image.onload = resolve
  image.src = IMAGE_URL // 要加载的图片 url
})

// 把图片画到离屏 canvas 上
context.clearRect(0, 0, 300, 150)
context.drawImage(image, 0, 0, 300, 150)

// 获取画完后的数据
const imgData = context.getImageData(0, 0, 300, 150)