react-native - 图像绘制中使用的图像比例 react-native

Question

我有一个应用程序，我可以在其中拍照并将其绘制到 pdf 文件中。

我一直在努力让它们保持正确的比例。如果我把所有的照片都拍成水平的，那就没问题了。如果我把所有照片都竖着拍就好了。问题是，当我同时拍摄垂直和水平时，最后一张照片的比例适用于所有照片。

我将图像比例保存到 AsyncStorage，我在其他组件中得到它。

问题是：双向拍摄时如何保持原始比例？

相机组件 -> takePicture 功能：

takePicture = async() => {
    
    if (this.camera) {
        const options = { quality: 0.5, base64: true , fixOrientation: true};
        const data = await this.camera.takePictureAsync(options);
        console.log(data.uri);


        Image.getSize(data.uri, (width, height) => { // Get image height and width
            let imageWidth = width;
            let imageHeight = height;

            let stringImageWidth = '' + imageWidth; // Convert to string for AsyncStorage saving
            let stringImageHeight = '' + imageHeight;

            const horizontalRatioCalc = () => { // return ratio for own variable
                return (imageWidth/imageHeight);
              };
            
            
            const verticalRatioCalc = () => {
                return (imageWidth/imageHeight);
            };

            horizontalImageRatio = horizontalRatioCalc();
            verticalImageRatio = verticalRatioCalc();
        
            stringHorizontalImageRatio = '' + horizontalImageRatio;
            stringVerticalImageRatio = '' + verticalImageRatio;

            console.log(`Size of the picture ${imageWidth}x${imageHeight}`);



            horizontalRatio = async () => {
                if (imageHeight>imageWidth) {

                    verticalRatioCalc();

                    try {
                        AsyncStorage.setItem("imageVerticalRatio", stringVerticalImageRatio),
                        AsyncStorage.setItem("asyncimageWidth", stringImageWidth),
                        AsyncStorage.setItem("asyncimageHeight", stringImageHeight),
                        
                        console.log(`Vertical ratio saved! It's ${stringVerticalImageRatio}`),
                        console.log(`Image Width saved! It's ${stringImageWidth}`),
                        console.log(`Image height saved! It's ${stringImageHeight}`)
    
                    }   catch (e) {
                        console.log(`AsyncStorage saving of image vertical ratio cannot be done.`)
                    }
                }if (imageHeight<imageWidth) {
                    
                    horizontalRatioCalc();

                    try {
                        AsyncStorage.setItem("imageHorizontalRatio", stringHorizontalImageRatio),
                        AsyncStorage.setItem("asyncimageWidth", stringImageWidth),
                        AsyncStorage.setItem("asyncimageHeight", stringImageHeight),

                        console.log(`Horizontal ratio saved! It's ${stringHorizontalImageRatio}`),
                        console.log(`Image Width saved! It's ${stringImageWidth}`),
                        console.log(`Image height saved! It's ${stringImageHeight}`)
    
                    }   catch (e) {
                        console.log(`AsyncStorage saving of image vertical ratio cannot be done.`)
                    }
                }
            }
            horizontalRatio();


            }, (error) => {
            console.error(`Cannot size of the image: ${error.message}`);
            
        });
        back(data.uri)
        //CameraRoll.saveToCameraRoll(data.uri).then((data) => {
        //    console.log(data)
            //back(data);

        //}).catch((error) => {
            //console.log(error)
      //})
    }

CreatePdf 组件 -> PDF 绘图功能：

readData = async () => {
        try {
          kuvakorkeus = await AsyncStorage.getItem('asyncimageHeight')
          kuvaleveys = await AsyncStorage.getItem('asyncimageWidth')

          vertikaaliratio = await AsyncStorage.getItem('imageVerticalRatio')
          horisontaaliratio = await AsyncStorage.getItem('imageHorizontalRatio')
      
          if (kuvakorkeus !== null) {
            return kuvakorkeus;
            return kuvaleveys;
            return vertikaaliratio;
            return horisontaaliratio;
          }
        } catch (e) {
          alert('Failed to fetch the data from storage')
        }
      }
      readData ();

      kuvanpiirto = () => {

                    pdfKuvaKorkeus = 100;

                    if(kuvakorkeus>kuvaleveys) { // VERTICAL / PYSTYKUVA
                        page.drawImage(arr[i].path.substring(7),'jpg',{
                            x: imgX,
                            y: imgY,
                            width: pdfKuvaKorkeus*vertikaaliratio,
                            height: pdfKuvaKorkeus,
                        })
                    }
                    if(kuvakorkeus<kuvaleveys) { // Horizontal / Vaakakuva
                        page.drawImage(arr[i].path.substring(7),'jpg',{
                            x: imgX,
                            y: imgY,
                            width: pdfKuvaKorkeus*horisontaaliratio,
                            height: pdfKuvaKorkeus,
                        })
                    }
                }
                kuvanpiirto();

标签： react-native