npm package: @shihuo/image-component
Description: 可代替传统img图片的图片扩展组件
Latest version: 3.0.0

# 加强版图片基础组件

@shihuo/image-component

可代替原生的 img 标签

## API

| 参数名             | 说明                                       | 必填 | 类型         | 默认值     | 备注                                                         |
| ------------------ | ------------------------------------------ | ---- | ------------ | ---------- | ------------------------------------------------------------ |
| component          | 指定图片外侧容器                           |      | string       | div        |                                                              |
| src                | 图片地址                                   | 必填 | string       |            | 可支持动态修改                                               |
| width              | 设置图片宽度                               |      | number       | 100        |                                                              |
| height             | 设置图片高度                               |      | number       |            | 不设置默认图片自动适应高度                                   |
| objectFit          | 图片裁剪模式                               |      | Enum         | scale-down | contain \| cover \| fill \| none <br />\| revert \| scale-down |
| imageRef           | 图片标签引用                               |      |              |            | { current: img }                                             |
| onLoad             | 图片加载成功回调                           |      | function     |            | args:<br />image: 图片 dom 对象<br /> naturalWidth 原始宽度<br /> naturalHeight 原始高度<br /> renderWidth 渲染宽度<br /> renderHeight 渲染高度<br /> ...包含其他 dom 属性 |
| onError            | 图片加载失败回调                           |      |              |            |                                                              |
| hasBorder          | 显示边框                                   |      | boolean      | false      | v1.1.1                                                       |
| toolbar            | 显示工具栏                                 |      | boolean      | false      | v1.1.1                                                       |
| hasPreview         | 显示预览工具                               |      | boolean      | true       | v1.1.1                                                       |
| onPreview          | 预览回调                                   |      | function     |            | v1.1.1 默认新开窗口显示图片                                  |
| hasEdit            | 显示编辑工具                               |      | boolean      | true       | v1.1.1                                                       |
| onEdit             | 编辑回调                                   |      | function     |            | v1.1.1                                                       |
| hasDelete          | 显示删除工具                               |      | boolean      | true       | v1.1.1                                                       |
| onDelete           | 删除回调                                   |      | function     |            | v1.1.1                                                       |
| renderToolbar      | 自定义渲染工具栏                           |      | function     |            | v1.1.1<br /><br />ps: v1.2.0后不推荐使用，可使用`toolbarConfig`进行自定义工具栏配置 |
| lazyLoad           | 懒加载                                     |      | boolean      | false      | V1.1.7                                                       |
| onShow             | 懒加载开启后渲染时回调                     |      | function     |            | v1.1.7                                                       |
| onHide             | 懒加载开启后不渲染时回调                   |      | function     |            | v1.1.7                                                       |
| onImageClick       | 点击图片 dom 节点触发                      |      | function     |            | v1.1.11 新增                                                 |
| square             | 设置方形容器(当前height属性无效时方才生效) |      | boolean      | false      | v1.1.12 新增                                                 |
| score              | 图片右上角展示图片分数                     |      | number       |            | 渲染结果将四舍五入取整<br />v1.1.15新增                      |
| highlight          | 图片状态是否展示高亮                       |      | boolean      | false      | 渲染结果为边框（hasBorder=true）和图片分数（传入score）高亮。<br />v1.1.15新增 |
| balloon            | 鼠标移入后图片放大                         |      | boolean      | false      | 基于fusionUI中的Balloon组件实现<br />v1.1.18新增             |
| balloonAlign       | balloon方位                                |      | enum         | r          | 同Balloon组件设定的方位一致<br />v1.1.18新增                 |
| magnifier          | 放大镜功能                                 |      | boolean      | false      | 图片开启放大境功能，该功能优先级较高，开启后，以下能力默认失效：<br />放大浮层`balloon` 高亮状态`highlight` 工具栏`toolbar` 等<br />1、建议容器手动设置为方形容器，且宽高尺寸适中`推荐500px`<br />2、当前图片尺寸若小于容器时，默认放大镜失效<br />v1.1.20新增 |
| toolbarConfig      | 自定义图片工具栏配置                       |      | array        |            | 替代`renderToolbar`<br />同时设置时，`toolbarConfig`优先级高于`renderToolbar`<br />当`toolbar`开启时生效，且其他工具栏默认配置如`hasEdit` `hasDelete`等将失效<br />详细配置可看下方片段。<br />v1.2.0新增 |
| draggable          | 图片元素是否可被拖动                       |      | boolean      | true       | v1.2.3新增                                                   |
| preventContextMenu | 阻止图片右键菜单                           |      | boolean      | false      | V1.2.4新增<br />v3.0.0废弃                                   |
| customContextMenu  | 开启自定义右键菜单                         |      | boolean      | false      | v2.0.0新增<br />v3.0.0废弃                                   |
| crossOrigin        | 图片crossOrigin配置                        |      | string       |            | V2.0.4新增                                                   |
| balloonDelay       | 开启balloon时，设置延时弹出时间            |      | number       |            | 单位：ms<br /><br />v2.0.9新增                               |
| mask               | 图片自定义蒙层                             |      | ReactNode    |            | v2.3.0新增                                                   |
| balloonSize        | 放大浮层显示大小                           |      | number       | 450        | v2.3.1新增                                                   |
| balloonOptions     | 支持balloon组件全部配置                    |      |              |            | v2.3.1新增                                                   |
| longGraph          | 是否渲染长图模式                           |      | boolean      | false      | v2.0.0新增                                                   |
| scoreAlign         | 图片显示位置                               |      | left / right | right      | v3.0.0新增                                                   |

#### 片段

##### toolbarConfig配置

```javascript
// 配置一
const toolbarConfig = [
  {
    children: '按钮1',
    onClick: (src, imageObject) => {
      console.log('图片地址：%s，图片dom对象：%o', src, imageObject);
    },
    attr: {}, // 其他标签属性配置。多用于注册无痕埋点属性
  },
  ...
];

// 配置二（多用于悬浮到工具栏按钮时，当前按钮具备其他附属按钮场景（如服饰类上身图，包含正面和背面，那么此时可把正面和背面图设置成附属按钮））
const toolbarConfig2 = [
  {
    list: [
      {
        children: '附属按钮1',
        attr: {}, // 其他标签属性配置。多用于注册无痕埋点属性
      },
      ...
    ],
		children: '按钮1',
    onClick: (src, imageObject, button) => {
      console.log('图片地址：%s，图片dom对象：%o，选中的附属按钮对象：%o', src, imageObject, button);
    },
  },
  ...
]
```