English | 简体中文

@ray-js/aes-image

Installation

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

Props

This component use Image which from @ray-js/component as image container, so all of Image props except 'src' can be used.

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;
}

Usage

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

    decryptImage(imagePath, encryptKey).then((result) => {
        //todo: result is decrypted base64 string
        }).catch(error => {
        //todo: decrypt fail
        })
    <AESImage
        imagePath="https://domain/path/to/crypto_image.jpeg" // encrypted image url
        encryptKey="90ac52259387534f" // encrypt key
        style={{ width: 160, height: 160, backgroundColor: 'white' }}
      />
    <AESImage
        encryptKey="OQMpT3obElFmXzBMBGgoPw=="
        base64Data={base64Data}
        style={{ width: '300px', height: '200px' }}
    />