[English](./README.md) | 简体中文

# @ray-js/aes-image

## 安装

```shell
$ npm install @ray-js/aes-image
# or
$ yarn add @ray-js/aes-image
```

## Props

该组件使用了 @ray-js/components 中的 [Image](https://developer.tuya.com/cn/ray/components/image) 标签作为图片容器，其属性除 src 外，继承自 [Image](https://developer.tuya.com/cn/ray/components/image) 标签的属性，因此可以使用除 src 外的所有 [Image](https://developer.tuya.com/cn/ray/components/image) 标签属性。

```typescript
import { ImageProps } from '@ray-js/components/lib/Image/props';
export interface AESImageProps extends Omit<ImageProps, 'src'> {
  /**
   * @description.en AES key
   * @description.zh AES 密码
   */
   encryptKey: string
  /**
   * @description.en Encryption image url
   * @description.zh 加密图片 url
   */
   imagePath?: string

   /**
    * @description.en Base64 encrypt data
    * @description.zh base64 加密数据
    */
   base64Data?: string

   /**
    * @description.en Loading component
    * @description.zh 加载中组件
    */
   loading: React.ComponentType
   
   /**
    * @description.en Placeholder component
    * @description.zh 占位组件
    */
   placeHolder: React.ComponentType
   
   /**
    * @description.en Error component
    * @description.zh 错误组件
    */
   renderError: React.ComponentType<{error: Error}>

    /**
      * @description.en Error callback
      * @description.zh 错误回调
      */
    onError?: (event: GenericEvent) => any;
}

```

## 使用

```jsx
    import { AESImage, decryptImage  } from '@ray/aes-image';

    decryptImage(imagePath, encryptKey).then((result) => {
        //todo: result 为解密出图片的 base64 字符串
        }).catch(error => {
        //todo: 解密失败
        })

    <AESImage
        imagePath="https://domain/path/to/crypto_image.jpeg" // 加密图片的链接
        encryptKey="90ac52259387534f" // 加密密钥 key
        style={{ width: 160, height: 160, backgroundColor: 'white' }}
      />
      
    <AESImage
        encryptKey="OQMpT3obElFmXzBMBGgoPw=="
        base64Data={base64Data}
        style={{ width: '300px', height: '200px' }}
    />
```