uni-app中uni.canvasToTempFilePath不执行。

发布于 1周前 作者 yuanlaile 来自 Uni-App

uni-app中uni.canvasToTempFilePath不执行。

示例代码

模板部分

<template>
  <view class="container">
    <canvas
      canvas-id="screenshot"
      id="screenshot"
      style="width: 300px; height: 200px; background-color: aqua;"
    />
    <button @click="saveToAlbum" style="margin-top: 20px;">保存到相册</button>
  </view>
</template>

脚本部分

<script setup>
import { ref, onMounted } from 'vue'

const tempImagePath = ref('')

const drawText = () => {
  console.log('开始绘制文字')
  const ctx = uni.createCanvasContext('screenshot')
  
  ctx.setFillStyle('aqua')
  ctx.fillRect(0, 0, 300, 200)
  
  ctx.setFillStyle('black')
  ctx.setFontSize(20)
  ctx.setTextAlign('center')
  ctx.setTextBaseline('middle')
  
  ctx.fillText('你好中国', 150, 100)
  
  ctx.draw(false, () => {
    console.log('绘制完成')
    // 绘制完成后，立即将 canvas 保存为图片
    uni.canvasToTempFilePath({
      canvasId: 'screenshot',
      success: (res) => {
        console.log('Canvas转图片成功:', res.tempFilePath)
        tempImagePath.value = res.tempFilePath
      },
      fail: (err) => {
        console.error('Canvas转图片失败:', JSON.stringify(err))
      }
    })
  })
}

const saveToAlbum = () => {
  console.log('保存到相册按钮被点击')
  if (!tempImagePath.value) {
    console.error('临时图片路径不存在')
    uni.showToast({ title: '图片未准备好', icon: 'none' })
    return
  }

  uni.showLoading({ title: '正在保存...' })

  // #ifdef HarmonyOS
  const photoAccessHelper = globalThis.PhotoAccessHelper;
  if (photoAccessHelper) {
    photoAccessHelper.showAssetsCreationDialog({
      fileList: [{
        filePath: tempImagePath.value,
        displayName: '你好中国.png',
        mimeType: 'image/png'
      }],
      success: (data) => {
        console.log('图片保存成功:', JSON.stringify(data))
        uni.hideLoading()
        uni.showToast({ title: '保存成功', icon: 'success' })
      },
      fail: (err) => {
        console.error('图片保存失败:', JSON.stringify(err))
        uni.hideLoading()
        uni.showModal({
          title: '保存失败',
          content: '错误信息: ' + JSON.stringify(err),
          showCancel: false
        })
      }
    })
  } else {
    console.error('PhotoAccessHelper not available')
    uni.hideLoading()
    uni.showModal({
      title: '保存失败',
      content: 'PhotoAccessHelper not available',
      showCancel: false
    })
  }
  // #endif

  // #ifndef HarmonyOS
  uni.saveImageToPhotosAlbum({
    filePath: tempImagePath.value,
    success: () => {
      console.log('图片保存成功')
      uni.hideLoading()
      uni.showToast({ title: '保存成功', icon: 'success' })
    },
    fail: (err) => {
      console.error('图片保存失败:', JSON.stringify(err))
      uni.hideLoading()
      uni.showModal({
        title: '保存失败',
        content: '错误信息: ' + JSON.stringify(err),
        showCancel: false
      })
    }
  })
  // #endif
}

onMounted(() => {
  console.log('组件已挂载')
  drawText()
})
</script>

样式部分

<style scoped>
.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

问题描述

uni.canvasToTempFilePath 不执行succes也不执行fail。请帮忙看下。谢谢


Harmonyos Next教程
3 回复

HBuilderX 4.31.2024102414-alpha 已修复。


4.31 修复

在uni-app中，uni.canvasToTempFilePath 方法用于将画布内容导出为图片文件并获取其临时文件路径。如果你发现这个方法没有执行，可能是由于几个常见原因，比如参数设置不正确、画布未正确绘制或者调用时机不对。以下是一个完整的代码示例，展示了如何正确使用 uni.canvasToTempFilePath：

<template>
  <view>
    <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
    <button @click="drawAndExport">绘制并导出图片</button>
    <image v-if="tempFilePath" :src="tempFilePath" style="width: 300px; height: 300px;"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tempFilePath: ''
    };
  },
  methods: {
    drawAndExport() {
      const ctx = uni.createCanvasContext('myCanvas');
      
      // 绘制矩形
      ctx.setFillStyle('red');
      ctx.fillRect(10, 10, 280, 280);
      
      // 绘制文字
      ctx.setFontSize(20);
      ctx.setFillStyle('white');
      ctx.fillText('Hello, uni-app!', 50, 150);
      
      // 绘制完成
      ctx.draw(false, () => {
        // 导出图片
        uni.canvasToTempFilePath({
          canvasId: 'myCanvas',
          success: (res) => {
            console.log('导出成功', res.tempFilePath);
            this.tempFilePath = res.tempFilePath;
          },
          fail: (err) => {
            console.error('导出失败', err);
          }
        });
      });
    }
  }
};
</script>

<style>
/* 添加一些简单的样式 */
</style>

关键点说明：

  1. 画布绘制：在 drawAndExport 方法中，使用 uni.createCanvasContext 获取画布上下文，并绘制一些简单的图形和文字。
  2. 绘制完成回调：ctx.draw 的第二个参数是一个回调函数，当绘制完成后会执行这个回调。确保在这个回调中调用 uni.canvasToTempFilePath。
  3. 导出图片：在 success 回调中，你可以获取到生成的临时文件路径，并将其保存到组件的 data 中，以便在页面上显示。

如果 uni.canvasToTempFilePath 仍然不执行，请检查以下几点：

  • 确保 canvasId 正确无误。
  • 确保画布已经绘制完成，即 ctx.draw 的回调已经执行。
  • 检查是否有其他异步操作或错误处理逻辑干扰了执行流程。
  • 查看控制台输出，检查是否有错误信息。

以上代码提供了一个基本的实现框架，希望能帮助你解决问题。

回到顶部