shareImage

可以把页面中的 dom 转为 base64 或者线上的 cdn 地址，在新闻客户端内还可以分享或者保存图片：

在线样例

您可以访问http://gh-qqnews-shareimage.pages.oa.com，在线查看该组件的使用方法和一些常见问题。

安装(Install)

使用 npm:

$ npm install gh-qqnews-shareimage

$ npm install @tencent/share-image

使用 tnpm:

$ tnpm install gh-qqnews-shareimage

$ tnpm install @tencent/share-image

使用 bower:

$ bower install gh-qqnews-shareimage

$ bower install @tencent/share-image

使用 yarn:

$ yarn add gh-qqnews-shareimage

$ yarn add @tencent/share-image

使用 jsDelivr 的 CDN 地址:

<script src="https://cdn.jsdelivr.net/npm/gh-qqnews-shareimage"></script>

使用 unpkg 的 CDN 地址:

<script src="https://unpkg.com/gh-qqnews-shareimage"></script>

使用说明

import shareImage from 'gh-qqnews-shareimage';

shareImage('.share-image').then(console.log).catch(console.error);

具体使用

不同的功能

该组件可以把页面中的 dom 元素，生成图片的 base64 地址，cdn 地址，新闻客户端内还可以分享或者保存图片；

// 将dom元素转为base64地址
shareImage('.share-image', {
  mode: 'imgbase64',
}).then(console.log); // 输出base64地址

// 获取dom元素的图片的线上地址
shareImage(document.querySelector('.share-image'), {
  mode: 'imgurl',
}).then(console.log); // 输出cdn地址

// 保存图片，只在端内生效
shareImage('.share-image', {
  mode: 'save',
});

// 分享图片，只在端内生效
shareImage('.share-image', {
  mode: 'share',
});

监听进度

可以在配置字段中使用onProgress监听功能的进度，若第一个参数的值为负数，表示失败，4 表示成功：

// 分享图片，监听进度
shareImage('.share-image', {
  mode: 'share',
  onProgress: (progress, message) => {
    console.log(progress);

    if (progress < 0) {
      // 失败
      console.error(message);
    } else if (progress === 4) {
      console.log('success');
    }
  },
});

html2canvas 的配置

当前组件使用了 html2canvas 来将 dom 元素转为图片，这里也可以对生成图片的过程进行配置：

shareImage('.share-image', {
  mode: 'share',
  html2canvas: {
    imagetype: 'image/jpeg', // 默认输出为jpeg
    encoderOptions: 0.6, // 图片质量，默认为0.6
    backgroundColor: '#ffffff', // 背景颜色
  },
});

缓存

若整个生成图片的数据和样式完全没有变化，则可以缓存当前数据，不用每次操作都重新生成一遍，缓存的维度为 dom 元素的 outerHTML 字符串。当指定 dom 元素的 html 结构发生变化时，则会重新执行；若 html 结构没有变动，则使用缓存。

若样式发生变动，但 html 结构没有变动时，还是会使用之前缓存的数据。

shareImage('.share-image', {
  mode: 'imgurl',
  cache: true, // 添加缓存，下次调用时，则使用已缓存的数据
  onProgress: (progress, message) => {
    console.log(progress);

    if (progress < 0) {
      // 失败
      console.error(message);
    } else if (progress === 4) {
      console.log('success');
    }
  },
});

参数说明：

| 参数 | 数据 | 说明 | | -------- | ---------------------------------------------------- | ------------------ | | selector | dom.querySelector('.share-image')'.share-image' | dom 元素或者选择器 | | options | ShareImageOption | 配置 |

interface ShareImageOptions {
  /**
   * 功能
   * imgbase64: 只得到base64地址
   * imgurl: 得到图片的远程地址
   * share: 分享图片，只在端内生效
   * save: 保存图片，只在端内生效
   */
  mode?: 'imgbase64' | 'imgurl' | 'share' | 'save';
  /**
   * 是否开启缓存
   * 开启缓存后，对完全一样的html结构，则不会再重新生成base64和图片的cdn地址
   * 而是使用上次构建的结果
   */
  cache?: boolean;
  /**
   * 是否开启debug日志
   */
  debug?: boolean;
  /**
   * 进度的回调
   * 正数表示进度，4表示完成，
   * 负数表示失败
   *
   * 0: 开始
   * 1: 图片转为base64完成，-1：图片转换base64失败
   * 2: 通过canvase将html结构转为base64图片，-2：html2canvase失败
   * 3. 上传到远程获取到cdn地址完成，-3: 获取远程cdn地址失败
   * 4. 拉起分享面板或者保存成功，或者其他模式成功，-4:拉起面板或者保存失败
   * -5: 其他错误
   */
  onProgress?: (progress: number, message?: string) => void;
  /**
   * html2canvas的配置
   */
  html2canvas?: {
    imagetype?: string, // 图片格式
    encoderOptions?: number, // 图片质量, 0-1
    backgroundColor?: string, // 背景色
  };
}