## Photo

The door lock's album list, alarm list, and log list have the capability to display images. For security reasons, the data provided by Tuya is encrypted, so decryption is required when displaying images.

### Install Dependencies

Please add IPCKit to the developer IDE, and version requirement  of IPCKit: 6.4.5 or higher

### Decrypt and Download Image

Use the API `downloadEncryptionImage` to decrypt the image and download it to the App cache

Implementation in ray

```jsx
import { ipc } from '@ray-js/ray';
import { md5 } from 'js-md5';

const filename = md5(fileUrl); // It is recommended to use md5 encryption to generate the image name
ipc.downloadEncryptionImage({
     url: fileUrl,  // The image address in the album, alarm, or log data
    encryptKey: fileKey, //  The image key in album, alarm, or log data
    deviceId: devId, // Device id
    fileName: `${filename}.png`,
    success: res => {
        console.log('Image address', res.path);
    },
    fail:(err) => {
        console.log('Failed to decrypt and download image', err)
    }
})
```

### Rotate Image

Since the lock's camera may be rotated, the image needs to be rotated accordingly.

Get rotation angle

```jsx

import { getMediaRotate } from '@ray-js/lock-sdk';

// Get image rotation angle
const { imageAngle } = getMediaRotate();

```

To process image dimensions, first get the actual dimensions of the image through `getImageInfo`, then calculate the actual display dimensions of the image by combining the maximum display size and rotation angle.

```jsx
import { getImageInfo } from '@ray-js/ray';

// Maximum display size supported by the image
const { width: originWidth, height: originHeight } = originSize;
// Scaling type: width means width fill priority, height means height fill priority, auto means automatic fill, automatically fill according to width or height
const fillType = 'width';

getImageInfo({
    src: res.path, // Decrypted and downloaded image address
    success: ({ width, height }) => {
        // Process image scaling
        let imageWidth = width;
        let imageHeight = height;
        const ratio = imageWidth / imageHeight;
        let baseSideWidth = originWidth;
        let isWidthPriority = true;
        if (fillType === 'width') {
            if (rotate === 90 || rotate === 270) {
            isWidthPriority = false;
            }
        } else if (fillType === 'height') {
            baseSideWidth = originHeight;
            if (rotate === 0 || rotate === 180) {
            isWidthPriority = false;
            }
        } else if (rotate === 0 || rotate === 180) {
            if (originWidth / originHeight > ratio) {
            baseSideWidth = originHeight;
            isWidthPriority = false;
            }
        } else if (rotate === 90 || rotate === 270) {
            if (originHeight / originWidth > ratio) {
            isWidthPriority = false;
            } else {
            baseSideWidth = originHeight;
            }
        }

        if (isWidthPriority) {
            imageWidth = baseSideWidth;
            imageHeight = imageWidth / ratio;
        } else {
            imageHeight = baseSideWidth;
            imageWidth = imageHeight * ratio;
        }



        return {
            width: `${imageWidth}px`,
            height: `${imageHeight}px`,
            backgroundImage: `url(${res.path})`,
            backgroundSize: '100% 100%',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
        };
    },
    fail: err => {
        console.error(err);
    },
});

```