使用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