使用dom-to-image-more生成页面截图

项目场景

关于公司自研的低代码开发平台，产品在某个迭代版本里，要求增加设计成果的规范化导出，其中一环是需要在流程设计编辑器保存时，生成截图并上传，了解了几种实现方式后决定用dom-to-image-more来实现。

关于dom-to-image-more

dom-to-image-more是一个可以将任意DOM节点转换为矢量(SVG)或光栅(PNG或JPEG)图像的js库。

安装

/* 使用npm安装 */
npm install dom-to-image-more
/* 使用yarn安装 */
yarn add dom-to-image-more

引入

// 引入mixin，其中包括工程封装的rpc远程调用方法
import mixin from "@m/core/mixin";
// 引入dom-to-image-more暴露的对象，里面包含toJpeg、toPng、toSvg等方法
import domtoimage from 'dom-to-image-more';
// 引入base64转File格式的工具函数
import { base64toFile } from "@m/utils/file";

/**
 * base64转File
 * @param {*} dataUrl base64编码数据
 * @param {*} filename 文件名
 * @return {*}
 */
export function base64toFile(dataUrl, filename = 'file') {
  const arr = dataUrl.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  // suffix是该文件的后缀
  const suffix = mime.split('/')[1];
  // atob 对经过 base-64 编码的字符串进行解码
  const bstr = atob(arr[1]);
  // n 是解码后的长度
  let n = bstr.length;
  // Uint8Array 数组类型表示一个 8 位无符号整型数组 初始值都是 数子0
  const u8arr = new Uint8Array(n);
  // charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  // new File返回File对象 第一个参数是 ArraryBuffer 或 Bolb 或Arrary 第二个参数是文件名
  // 第三个参数是 要放到文件中的内容的 MIME 类型
  return new File([u8arr], `${filename}.${suffix}`, {
    type: mime,
  });
}

使用

async save() {
  console.log("保存前的校验")
  // 生成流程截图并上传，在输出参数中获取服务器保存的图片地址
  const { uploadedFilePath } = await this.svg2Image()
  console.log("参数组装")
  console.log("调用保存流程图的接口")
},

async svg2Image() {
  const node = document.querySelector(".dom_class");
  return domtoimage.toPng(node).then(async (dataUrl) => {
    const uploadFile = base64toFile(dataUrl, "坤图")
    // 通过formData保存文件
    const formData = new FormData();
    formData.append('uploadFile', uploadFile);
    // 设置其他附带参数
    formData.append('sing', this.sing);
    formData.append('dance', this.dance);
    formData.append('rap', this.rap);
    formData.append('basketball', this.basketball);
    const res = await this.rpc.babybaby.uploadAssetImage(formData);
    return res
  })
  .catch(function (error) {
    console.error('crush on you!', error);
  });
},