chooseCropImage裁剪后的图片模糊

jie_73 · 2024年 Oct 30日 16:32

场景描述：

页面有一个图片显示容器，元素尺寸为屏幕宽度的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`);
      },
    });