canvas.uvue

<template>
  <view class="page" id="page-canvas">
    <canvas id="canvas" class="canvas-element"></canvas>
    <scroll-view class="scroll-view">
      <!-- #ifdef WEB -->
      <button class="canvas-drawing-button" @click="canvasToBlob">canvasToBlob</button>
      <!-- #endif -->
      <button class="canvas-drawing-button" @click="canvasToDataURL">canvasToDataURL</button>
      <text>{{dataBase64}}</text>
    </scroll-view>
  </view>
</template>

<script>
  function hidpi(canvas : UniCanvasElement) {
    const context = canvas.getContext("2d")!;
    const dpr = uni.getDeviceInfo().devicePixelRatio ?? 1;
    canvas.width = canvas.offsetWidth * dpr;
    canvas.height = canvas.offsetHeight * dpr;
    context.scale(dpr, dpr);
  }

  export default {
    data() {
      return {
        title: 'Context2D',
        canvas: null as UniCanvasElement | null,
        canvasContext: null as CanvasRenderingContext2D | null,
        canvasWidth: 0,
        canvasHeight: 0,
        dataBase64: '',
        // 仅测试
        testToBlobResult: false,
        testToDataURLResult: false
      }
    },
    onReady() {
      let canvas = uni.getElementById("canvas") as UniCanvasElement
      this.canvasContext = canvas.getContext("2d");
      hidpi(canvas);
      this.canvasWidth = this.canvasContext!.canvas.width;
      this.canvasHeight = this.canvasContext!.canvas.height;

      // #ifdef WEB
      canvas.toBlob((blob : Blob) => {
        this.testToBlobResult = (blob.size > 0 && blob.type == 'image/jpeg')
      }, 'image/jpeg', 0.95)
      // #endif
      this.testToDataURLResult = canvas.toDataURL().startsWith('data:image/png;base64')

      this.canvas = canvas;
    },
    methods: {
      // #ifdef WEB
      canvasToBlob() {
        this.canvas!.toBlob((blob : Blob) => {
          this.testToBlobResult = (blob.size > 0 && blob.type == 'image/jpeg')
        }, 'image/jpeg', 0.95)
      },
      // #endif
      canvasToDataURL() {
        this.dataBase64 = this.canvas!.toDataURL()
      }
    }
  }
</script>

<style>
  .page {
    flex: 1;
    height: 100%;
    overflow: hidden;
  }

  .scroll-view {
    flex: 1;
  }

  .canvas-element {
    width: 100%;
    height: 250px;
    background-color: #ffffff;
  }

  .grid-view {
    padding: 10px;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .btn-to-image {
    margin: 10px;
  }
</style>