uniapp写了一个把图片转成canvas来实现固定尺寸的方法报错?

export const cropImage = (filePath:string): Promise<string> => {
  return new Promise((resolve, reject) => {
    uni.getImageInfo({
      src: filePath,
      success(res) {
        let sx, sy, sw, sh, imgRatio, canvasRatio;
        const ctx = uni.createCanvasContext('canvas', this);
        canvasRatio = 2/3
        imgRatio = res.width / res.height
        if(imgRatio <= canvasRatio){
          sw = 1200
          sh = sw / canvasRatio
          sx = 0
          sy = (res.height - sh) / 2
        } else{
          sh = 1800
          sw = sh * canvasRatio
          sx = (res.width - sw) / 2
          sy = 0
        }
        ctx.drawImage(res.path, sx, sy, sw, sh, 0, 0, 1200, 1800);
        // @ts-ignore
        ctx.draw(false, setTimeout(() => {
          uni.canvasToTempFilePath({
            canvasId: 'canvas',
            success: (res) => {
              resolve(res.tempFilePath)
            },
            fail: (error) => {
              console.log('error', error);
              reject('')
            }
          }, this)
        }, 500))
      },
      fail() {
        reject('')
      }
    })
  })
}

我的项目有个功能选择相册中的一张图片,给他转成固定的尺寸。写完之后发现uni.canvasToTempFilePath总是报这个错误,不知道是哪里出现了问题?

<script lang="ts" setup>
import { ref } from 'vue'
// @ts-ignore
import { useUser } from '@/stores/app'
import { cropImage } from '@/utils/index'

const user = useUser()
const imgs = ref<string []>([])
user.photo.forEach(async item => {
  imgs.value.push(await cropImage(item.path as string));
})

errMsg: "canvasToTempFilePath:fail fail canvas is empty"
image.png

阅读 2.3k
1 个回答
export const cropImage = (filePath:string, context:any): Promise<string> => {
  return new Promise((resolve, reject) => {
    uni.getImageInfo({
      src: filePath,
      success(res) {
        let sx, sy, sw, sh, imgRatio, canvasRatio;
        const ctx = uni.createCanvasContext('canvas', context);
        canvasRatio = 2/3
        imgRatio = res.width / res.height
        if(imgRatio <= canvasRatio){
          sw = 1200
          sh = sw / canvasRatio
          sx = 0
          sy = (res.height - sh) / 2
        } else{
          sh = 1800
          sw = sh * canvasRatio
          sx = (res.width - sw) / 2
          sy = 0
        }
        ctx.drawImage(res.path, sx, sy, sw, sh, 0, 0, 1200, 1800);
        ctx.draw(false, setTimeout(() => {
          uni.canvasToTempFilePath({
            canvasId: 'canvas',
            success: (res) => {
              resolve(res.tempFilePath)
            },
            fail: (error) => {
              console.log('error', error);
              reject('')
            }
          }, context)
        }, 500))
      },
      fail() {
        reject('')
      }
    })
  })
}

let that = this;
uni.chooseImage({
    sourceType: ['album'],
    success (res) {
      cropImage(res.tempFiles[0].path, that)
    }
});
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Microsoft
子站问答
访问
宣传栏