跳到主要内容

useImage

图片操作, 如预览、获取、压缩等.

何时使用​

当需要对图片进行操作时

API​

const [
  fileInfo,
  { choose, compress, get, preview, previewMedia, save, edit }
] = useImage(option?);

参数说明​

参数说明类型默认值
option初始拾取图片配置(若指定后面可与新的配置合并)ExcludeOption<Taro.chooseImage.Option>-

返回值说明​

返回值说明类型
fileInfo当前选中的图片Omit<Taro.chooseImage.SuccessCallbackResult, 'errMsg'>
choose选择(会话)图片PromiseParamsAction<(option?: ChooseOption \| ExcludeOption<Taro.chooseMessageFile.Option>, messageFile?: boolean) => void, Taro。chooseImage.SuccessCallbackResult \| Taro.chooseMessageFile.SuccessCallbackResult>
compress压缩图片 PromiseParamsAction<(src: string, quality?: number) => void, CompressSuccessResult>
get获取图片资源详情PromiseAction<string, Taro.getImageInfo.SuccessCallbackResult>
preview预览PromiseAction<ExcludeOption<Taro.previewImage.Option>>
previewMedia预览图片和视频PromiseAction<ExcludeOption<Taro.previewMedia.Option>>
save保存图片到系统相册PromiseAction<string>
edit编辑图片接口PromiseAction<string, Taro.editImage.SuccessCallbackResult>

代码演示​

media/useImage/index
import React from 'react';
import { useState } from '@taro-hooks/core';
import { escapeState } from '@taro-hooks/shared';
import { useToast, useImage } from 'taro-hooks';
import { Image } from '@tarojs/components';
import DemoContent from '@src/components/DemoContent';
import { Button, Swiper, Cell } from '@taroify/core';

import './index.less';

export default () => {
  const { show } = useToast({ title: 'useImage', mask: true });
  const [imageInfo, setImageInfo] =
    useState<Taro.getImageInfo.SuccessCallbackResult>();
  const [
    fileInfo,
    { choose, compress, get, preview, previewMedia, save, edit },
  ] = useImage({
    count: 15,
  });

  const handleGetFileInfo = async () => {
    try {
      const info = await get(escapeState(fileInfo)?.tempFilePaths?.[0]);
      setImageInfo(info);
    } catch (e) {
      show({
        title: '获取信息失败',
        icon: 'error',
      });
    }
  };

  const handleCompress = async () => {
    try {
      const info = await compress(escapeState(fileInfo)?.tempFilePaths?.[0]);
      setImageInfo(info);
    } catch (e) {
      show({
        title: '压缩失败',
        icon: 'error',
      });
    }
  };

  return (
    <DemoContent>
      <Swiper className="demo-swiper gap" height={200}>
        {(fileInfo?.tempFilePaths ?? []).map((url) => (
          <Swiper.Item key={url}>
            <Image className="demo-swiper-item" src={url} />
          </Swiper.Item>
        ))}
      </Swiper>
      <Button
        block
        color="primary"
        className="gap"
        onClick={() => choose()}
        shape="square"
      >
        选择图片
      </Button>
      <Button
        block
        color="primary"
        className="gap"
        onClick={() => preview({ urls: fileInfo?.tempFilePaths })}
        shape="square"
      >
        预览照片
      </Button>
      <Button
        block
        color="primary"
        className="gap"
        onClick={() => save(fileInfo?.tempFilePaths?.[0])}
        shape="square"
      >
        保存照片
      </Button>
      <Button
        block
        color="primary"
        className="gap"
        onClick={() => handleGetFileInfo()}
        shape="square"
      >
        获取图片信息
      </Button>
      <Button
        block
        color="primary"
        className="gap"
        onClick={() => choose({}, true)}
        shape="square"
      >
        获取会话文件(仅小程序)
      </Button>
      <Button
        block
        color="primary"
        className="gap"
        onClick={() => edit(fileInfo?.tempFilePaths?.[0])}
        shape="square"
      >
        编辑图片(仅小程序)
      </Button>
      <Button
        block
        color="primary"
        className="gap"
        onClick={() =>
          previewMedia({ sources: [{ url: fileInfo?.tempFilePaths?.[0] }] })
        }
        shape="square"
      >
        预览媒体(仅小程序)
      </Button>
      <Button
        block
        color="primary"
        className="gap"
        onClick={() => handleCompress()}
        shape="square"
      >
        压缩图片
      </Button>
      <Cell.Group title="图片信息">
        {Object.entries(imageInfo ?? {}).map(([key, value]) => (
          <Cell key={key} title={key} brief={JSON.stringify(value)}></Cell>
        ))}
      </Cell.Group>
    </DemoContent>
  );
};

Hook 支持度​

微信小程序H5ReactNative
✔️✔️✔️