uni-app 不支持 wx.editImage 和 wx.cropImage

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

uni-app 不支持 wx.editImage 和 wx.cropImage

测试过的手机:

  • 苹果
  • 安卓

操作步骤:

  • app不支持wx.editImage和wx.cropImage,什么时候可以支持,急需这个功能?

预期结果:

  • app不支持wx.editImage和wx.cropImage,什么时候可以支持,急需这个功能?

实际结果:

  • app不支持wx.editImage和wx.cropImage,什么时候可以支持,急需这个功能?

bug描述:

  • app不支持wx.editImage和wx.cropImage,什么时候可以支持,急需这个功能?

| 项目名称       | 值           |
|----------------|--------------|
| 产品分类       | uniapp/App   |
| PC开发环境     | Windows      |
| PC开发环境版本 | win11        |
| HBuilderX类型  | 正式         |
| HBuilderX版本  | 4.26         |
| 手机系统       | 全部         |
| 手机系统版本   | Android 15   |
| 手机厂商       | 华为         |
| 页面类型       | vue          |
| vue版本        | vue2         |
| 打包方式       | 云端         |
| 项目创建方式   | HBuilderX    |

2 回复

官方短期应该没这计划,自己到插件市场找找三方插件来满足需求吧。


在uni-app中,确实没有直接提供类似于微信小程序中的wx.editImagewx.cropImage的API。不过,你可以通过一些替代方案来实现图片编辑和裁剪的功能。通常,这涉及到使用canvas或者调用第三方插件。

以下是一个使用canvas进行简单图片裁剪的示例代码:

<template>
  <view>
    <image :src="originalImage" style="width: 300px; height: 300px;" @click="chooseImage"></image>
    <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
    <image :src="croppedImage" v-if="croppedImage" style="width: 300px; height: 300px;"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      originalImage: '',
      croppedImage: ''
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.originalImage = res.tempFilePaths[0];
          this.cropImage(res.tempFilePaths[0], 100, 100, 200, 200); // 裁剪为200x200的图片,从(100,100)开始
        }
      });
    },
    cropImage(src, x, y, width, height) {
      uni.getImageInfo({
        src: src,
        success: (imageInfo) => {
          const ctx = uni.createCanvasContext('myCanvas');
          ctx.drawImage(src, x, y, width, height, 0, 0, width, height);
          ctx.draw(false, () => {
            uni.canvasToTempFilePath({
              canvasId: 'myCanvas',
              destWidth: width,
              destHeight: height,
              success: (res) => {
                this.croppedImage = res.tempFilePath;
              },
              fail: (err) => {
                console.error('canvasToTempFilePath失败:', err);
              }
            });
          });
        },
        fail: (err) => {
          console.error('getImageInfo失败:', err);
        }
      });
    }
  }
};
</script>

<style>
/* 样式根据需要调整 */
</style>

在这个例子中,用户点击图片后,会触发chooseImage方法选择图片,然后选择的图片会显示在页面上。cropImage方法使用canvas对图片进行裁剪,并将裁剪后的图片显示在页面上。

请注意,这个示例仅展示了基本的裁剪功能,对于更复杂的需求(如旋转、滤镜等),你可能需要更复杂的canvas操作或者考虑使用第三方插件。在uni-app社区或者npm上,你可以找到一些专门为图片编辑设计的插件,它们可能提供了更全面的功能。

回到顶部