OffscreenCanvas bl.createOffscreenCanvas(object object)

基础库 3.58.0 开始支持

创建离屏 canvas 实例

参数

object object

object.type 的合法值

返回值

OffscreenCanvas

示例代码

<template>
  <div></div>
</template>

<script>
export default {
  onReady() {
    // 创建离屏 2D canvas 实例
    const canvas = bl.createOffscreenCanvas({
      type: "2d",
      width: 300,
      height: 150,
    });
    // 获取 context。注意这里必须要与创建时的 type 一致
    const context = canvas.getContext("2d");

    // 创建一个图片
    const image = canvas.createImage();
    // 等待图片加载
    image.onload = () => {
      // 把图片画到离屏 canvas 上
      context.clearRect(0, 0, 300, 150);
      context.drawImage(image, 0, 0, 300, 150);

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

    image.src = "http://miniapp.bilibili.com/small-app-doc/assets/demo.png"; // 要加载的图片 url
  }
}
</script>

<style lang="less" scoped></style>