1 安装canvaskit-wasm

npm install canvaskit-wasm

  或者

yarn add canvaskit-wasm

2 将文件node_modules/canvaskit-wasm/bin/canvaskit.wasm复制到public目录

3 引入到组件中

<template>
  <img :src="imgData"/>
</template>

<script setup>
  import { ref } from 'vue'
  import CanvasKitInit from 'canvaskit-wasm'

  const imgData = ref('')

  CanvasKitInit({
    locateFile: (file) => {
      return `/${file}`
    },
    onRuntimeInitialized: () => {
      console.log('CanvasKit initialized!');
    }
  }).then(CanvasKit => {
    const skcanvas = CanvasKit.MakeCanvas(375, 600);

    const ctx = skcanvas.getContext('2d');
    const rgradient = ctx.createRadialGradient(50, 50, 10, 50, 50, 100);

    // Add three color stops
    rgradient.addColorStop(0, 'red');
    rgradient.addColorStop(0.5, 'white');
    rgradient.addColorStop(1, 'blue');

    ctx.fillStyle = rgradient;
    ctx.globalAlpha = 0.7;
    ctx.fillRect(0, 0, 375, 600);

    imgData.value = skcanvas.toDataURL();
  })

</script>

<style scoped>

</style>

4 预览效果

npm run dev