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：没有组件可以用的话，有什么其他实现方案，麻烦指导一下。