---
title: 图片
summary: 门锁相册、告警、日志中加密图片的解密、下载与旋转展示方案，包括 downloadEncryptionImage API 及 getMediaRotate 获取旋转角度。
---

## 图片

门锁的相册列表、告警列表、日志列表中会有需要展示图片的能力，由于安全考虑，涂鸦提供的数据是经过加密处理的，在展示图片时，需要进行解密处理。

### 安装依赖

请在开发者开发工具（IDE）中加入 IPCKit，且版本要求： `6.4.5以上`

### 解密并下载图片

需要使用 API `downloadEncryptionImage` 对图片进行解密，并下载到 App 缓存中

ray 中实现

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

const filename = md5(fileUrl); // 建议使用 md5 加密生成图片名称
ipc.downloadEncryptionImage({
    url: fileUrl,  // 相册、告警、日志数据中的图片地址
    encryptKey: fileKey, //  相册、告警、日志数据中的图片 key
    deviceId: devId, // 设备 id
    fileName: `${filename}.png`,
    success: res => {
        console.log('图片地址', res.path);
    },
    fail:(err) => {
        console.log('解密并下载图片失败', err)
    }
})
```

### 旋转图片

由于锁的摄像头会存在旋转的情况，此时就需要对图片做旋转处理。

获取旋转角度

```jsx

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

// 获取图片旋转角度
const { imageAngle } = getMediaRotate();

```

处理图片尺寸，需要先通过 `getImageInfo` 获取到图片的实际尺寸，然后结合图片展示最大尺寸和旋转角度计算出图片实际的展示尺寸。

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

// 图片支持的最大展示尺寸
const { width: originWidth, height: originHeight } = originSize;
// 缩放类型：width 表示宽度填满优先 height 表示高度填满优先，auto 表示自动填充，根据宽度或高度自动填充
const fillType = 'width';

getImageInfo({
    src: res.path, // 解密并下载的图片地址
    success: ({ width, height }) => {
        // 处理图片缩放
        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);
    },
});

```