Tuya Developer Forum

场景描述：

页面有一个图片显示容器，元素尺寸为屏幕宽度的70%，高度为屏幕高度的35%，内有一个<Image />显示组件（宽高100%）【下方代码1】，通过chooseCropImage选择一张图片并进行裁剪后，渲染到<Image />图片显示很模糊，通过saveImageToPhotosAlbum将裁剪后的图片存到本地相册进行查看，从而确定裁剪过后的图片很模糊【下方代码2】。

• 代码1

  Code: Select all

          <View
            className={styles.imgContainer}
            style={{ width: imgContainerWidth, height: `${imgContainerHeight}px` }}
          >
            <Image src={localImgUrl} className={styles.backgroudImage}></Image>
          </View>
  

• 代码2

  Code: Select all

      // 权限编码
      const permissionCode = 'scope.writePhotosAlbum';
      /**
       * @description: 申请系统权限
       * @docUrl https://developer.tuya.com/cn/miniapp/develop/ray/api/authorize/authorize
       */
      authorize({
        scope: permissionCode,
        success: e => {
          const params = {
            sourceType: ['album'],
            success: res => {
              console.log('chooseCropImage--success :>> ', res);
              // 更新图片预览
              const { path } = res;
              setLocalImgUrl(path);
              setIsShowSaveBtn(true);
              const imgParams = {
                filePath: path,
                success: () => {
                  console.log('saveImageToPhotosAlbum--success :>> ', '保存成功');
                },
                fail: err => {
                  console.log('saveImageToPhotosAlbum--fail :>> ', err);
                },
              }
              saveImageToPhotosAlbum(imgParams);
            },
            fail: err => {
              console.log('chooseCropImage--fail :>> ', err);
            },
            complete: () => {
              console.log('chooseCropImage--complete :>> ', 'complete');
            },
          };
          chooseCropImage(params);
        },
        fail: err => {
          console.log(`authorize ${permissionCode} fail`, err);
        },
        complete: () => {
          console.log(`authorize ${permissionCode} complete`);
        },
      });
  

• 问题1：经过裁剪后的图片模糊怎么解决？

  • 原图

    

  • 裁剪范围

    

  • 裁剪后（保存到相册后）

    

  • 页面显示效果

    

• 问题2：chooseCropImage能否支持指定裁剪框的大小，比如说，我只想要 裁剪框 固定是 图片显示容器 一样的大小且不可改变大小？

• 问题3：若使用chooseCropImage满足不了场景，有什么其他裁剪组件可以用？

• 问题4：没有组件可以用的话，有什么其他实现方案，麻烦指导一下。

目前剪裁框是固定大小, 客户端没有提供自定义框大小的能力。剪裁框位置是固定居中, 只能移动下面的图片。有强烈需要的话，我们安排一下。

muhai 2024年 Nov 4日 09:33

目前剪裁框是固定大小, 客户端没有提供自定义框大小的能力。剪裁框位置是固定居中, 只能移动下面的图片。有强烈需要的话，我们安排一下。

你说的和实际情况不一样吧，目前裁剪框是可以缩放改变大小的，拖动的也是裁剪框并非底部的图片。
我目前需要的是你描述的这种，自定义裁剪框大小(不可缩放改变)、位置固定居中，移动底图进行裁剪。另外，目前裁剪出来的图片模糊是为什么，如果后续能够指定裁剪尺寸，裁剪出来的图片还会模糊吗？