uni-app harmony next uni.canvasToTempFilePath返回{"errMsg":"canvasToTempFilePath:ok"}

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

uni-app harmony next uni.canvasToTempFilePath返回{“errMsg”:“canvasToTempFilePath:ok”}

示例代码：

<template>
<u-nav-bar title="编辑头像" transparent />
<u-page-view classes="content" block>
<image class="avatar" :src="userInfo?.avatar || state.logo" mode="aspectFill" />
<u-text class="edit-tips" block size="small">
您可自定义设置头像，如果图片包含不适当的内容，它将无法更换成功或被默认图片替换
<u-text size="small" color="#55d091" @click="onMore">了解更多</u-text>
</u-text>
<button class="travel-btn-primary" @click="onChange">更换头像</button>
</u-page-view>
<l-clipper v-if="state.clipper" @success="onSuccess" :image-url="state.filePath" />
</template> 

<script setup lang="ts">
import { useRouteGuards } from '@/core/hooks'
import { prefixs } from '@/core/apis/configs'
import { updateAuditAvatar } 

const obs = ref(prefixs.obs)
const state = reactive<{
logo: string
filePath: string
clipper: boolean
}>({
logo: `${obs}/mine/default-avatar.png`,
filePath: '',
clipper: false,
})
const { userStore } = useRouteGuards()
const { userInfo } = userStore 

const onChange = () => {
uni.chooseImage({
count: 1,
success(res) {
state.filePath = res?.tempFilePaths?.[0]
if (state.filePath) {
state.clipper = true
}
},
})
}

const onSuccess = async (event: { url: string; height: number; width: number }) => {
userInfo.avatar = event.url
const next = await updateAuditAvatar(userInfo.avatar)
if (next) {
userStore.setUserinfo(userInfo)
}
state.clipper = false
}

const onMore = () => {
uni.navigateTo({ url: '/pages/mine/settings/about/index' })
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style> 

deep(.content) {
.avatar {
width: 750rpx;
height: 750rpx;
margin: 12rpx 0 72rpx;
}
.edit-tips {
background: url(https://onetravel-web.onetravelgz.com/onecode-travel/miniprogram/mine/tips-icon.png) no-repeat left top;
background-size: 32rpx 32rpx;
margin-bottom: 48rpx;
padding-left: 48rpx;
font-size: 24rpx;
color: #000000;
font-weight: 400;
display: block;
}
.travel-btn-primary,
.edit-tips {
margin-left: 56rpx;
margin-right: 56rpx;
}
}

操作步骤：

直接使用

预期结果：

应该返回图片路径

实际结果：

{"errMsg":"canvasToTempFilePath:ok"}

bug描述：

  1. uni.canvasToTempFilePath在harmony next下返回值为{"errMsg":"canvasToTempFilePath:ok"}
  2. 此外CanvasContext.draw函数的callback在harmony next下不触发，因此代码中进行了延迟600毫秒的处理

使用了图片裁剪插件，其中包含canvasToTempFilePath函数，针对harmony next进行了部分代码修改，下面是插件链接： 插件链接

下面提供代码样本附件，对harmony进行了兼容处理：


Harmonyos Next教程
3 回复

cli 使用的什么版本？在页面中使用 canvs 组件，调用 uni.canvasToTempFilePath 能返回路径吗？


sdk版本3.0.0-4020920240930001，刚刚试了，还是一样的。harmony 模版使用HBuilderX 4.29自动生成的app-harmony@1.3.7

在处理uni-app Harmony（Next）版本中的uni.canvasToTempFilePath方法时，如果它返回了{"errMsg":"canvasToTempFilePath:ok"}，这通常意味着调用是成功的，并且图片已经成功生成并保存到了临时文件路径中。然而，这个返回值本身并不包含实际的文件路径，你需要从调用结果的tempFilePath字段中获取实际的文件路径。

以下是一个完整的代码示例，展示了如何在uni-app中使用uni.canvasToTempFilePath方法，并处理其返回的结果：

// 假设你已经在页面上创建了一个canvas元素，并且给它设置了id="myCanvas"
Page({
  data: {
    canvasId: 'myCanvas',
    imagePath: ''
  },
  
  onLoad: function () {
    this.drawCanvas();
  },
  
  drawCanvas: function () {
    const ctx = uni.createCanvasContext(this.data.canvasId, this);
    
    // 在这里绘制你的内容，例如：
    ctx.setFillStyle('red');
    ctx.fillRect(10, 10, 150, 75);
    ctx.draw(false, () => {
      this.convertCanvasToImage();
    });
  },
  
  convertCanvasToImage: function () {
    uni.canvasToTempFilePath({
      canvasId: this.data.canvasId,
      success: (res) => {
        if (res.errMsg === 'canvasToTempFilePath:ok') {
          // 获取到临时文件路径
          const tempFilePath = res.tempFilePath;
          // 更新data中的数据，以便在页面上显示
          this.setData({
            imagePath: tempFilePath
          });
          console.log('Generated image path:', tempFilePath);
        } else {
          console.error('Failed to generate image:', res.errMsg);
        }
      },
      fail: (err) => {
        console.error('Failed to convert canvas to image:', err);
      }
    });
  }
});

// 在页面的wxml文件中，你可以这样显示生成的图片：
// <canvas canvas-id="{{canvasId}}" style="width: 300px; height: 200px;"></canvas>
// <image src="{{imagePath}}" style="width: 300px; height: 200px; margin-top: 20px;"></image>

在这个示例中，我们首先使用uni.createCanvasContext获取canvas的绘图上下文，并绘制了一些内容。然后，我们调用ctx.draw方法，并在回调中调用uni.canvasToTempFilePath来将canvas内容转换为图片。如果转换成功，我们将临时文件路径保存到页面的data中，并在页面上显示生成的图片。

请注意，这个示例假设你已经在页面上创建了一个canvas元素，并且已经给它设置了相应的id。同时，你还需要在页面的wxml文件中添加相应的canvas和image元素来显示内容。

回到顶部