+
95
-

回答

可以通过canvas和uni.canvasToTempFilePath的destWidth与destHeight实现图片放大或缩小输出,示例代码如下:

<template>
  <view class="container">
    <canvas canvas-id="myCanvas" id="myCanvas" class="canvas"></canvas>
    <button type="primary" @click="exportImage">导出大图</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      canvasWidth: 300, // Canvas 宽度
      canvasHeight: 300, // Canvas 高度
      scale: 3 // 放大倍数
    };
  },
  methods: {
    drawCanvas() {
      const ctx = uni.createCanvasContext('myCanvas', this);
      ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
      ctx.fillStyle = 'red';
      ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
      ctx.draw(true);
    },
    exportImage() {
      const scale = this.scale;
      const width = this.canvasWidth * scale;
      const height = this.canvasHeight * scale;

      uni.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: this.canvasWidth,
        height: this.canvasHeight,
        destWidth: width,
        destHeight: height,
        canvasId: 'myCanvas',
        success: (res) => {
          console.log('导出图片成功', res.tempFilePath);
          // 可以在这里处理导出的图片路径
        },
        fail: (err) => {
          console.error('导出图片失败', err);
        }
      }, this);
    }
  },
  onReady() {
    this.drawCanvas();
  }
};
</script>

<style>
.container {
  padding: 20px;
}

.canvas {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
}
</style>

网友回复

我知道答案,我要回答