类型
Default
Description
filter
Function
——
以DOM节点为参数的函数。如果通报的节点应包含在输出中，则应返回true(打消节点意味着也打消其子节点)
bgcolor
String
——
背景色的字符串值，任何有效的CSS颜色值。
height
Number
——
渲染前运用于节点的高度（以像素为单位）。
width
Number
——
渲染前运用于节点的宽度（以像素为单位）。
style
Object
——
object工具，其属性在渲染之前要复制到节点的样式中。
quality
Number
1.0
介于0和1之间的数字，表示JPEG图像的图像质量(例如0.92=>92%)。默认值为1.0（100%）
cacheBust
Boolean
false
设置为true可将当前韶光作为查询字符串附加到URL要求以启用打消缓存。
imagePlaceholder
Boolean
undefined
获取图片失落败时利用图片的数据URL作为占位符。默认为未定义，并将在失落败的图像上引发缺点。
事理dom-to-image利用SVG的一个特性，它许可在标记中包含任意HTML内容。
递归地克隆原始DOM节点打算节点和每个子节点的样式，并将其复制到相应的克隆 创建伪元素，由于它们不因此任何办法克隆的嵌入web字体 查找所有@font face声明的web字体 解析文件URL，下载相应文件 base64编码的内联作为data：URLs 将所有已处理的CSS放入中，然后将其附加到克隆嵌入图片 在嵌入图片URL 利用backgroundCSS属性的图片，方法类似于字体将克隆的节点序列化为XML将XML包装到标记中，然后包装到SVG中，然后使其成为data URL或者，要以Uint8Array的形式获取PNG内容或原始像素数据，可以创建一个以SVG为源的图像元素，并将其呈现在已经创建的canvas上，从canvas读取内容部分源码剖析dom-to-image.js
// Default impl optionsvar defaultOptions = { // Default is to fail on error, no placeholder imagePlaceholder: undefined, // Default cache bust is false, it will use the cache cacheBust: false};var domtoimage = { toSvg: toSvg, toPng: toPng, toJpeg: toJpeg, toBlob: toBlob, toPixelData: toPixelData, impl: { fontFaces: fontFaces, images: images, util: util, inliner: inliner, options: {} }};if (typeof module !== 'undefined') module.exports = domtoimage;else global.domtoimage = domtoimage;defaultOptions设置默认options选项domtoimage的核心api:toSvgtoPngtoJpegtoBlobtoPixelData例：toJpeg：将draw函数返回的canvas实例，利用canvas的toDataURL方法天生jpeg图片。toSvg函数将递归地克隆原始DOM节点, 将克隆的节点序列化为XML,将XML包装到标记中，然后包装到SVG中，然后使其转成dataURL。
function toJpeg(node, options) { options = options || {}; return draw(node, options) .then(function (canvas) { return canvas.toDataURL('image/jpeg', options.quality || 1.0); });}复制代码
function draw(domNode, options) { return toSvg(domNode, options) .then(util.makeImage) .then(util.delay(100)) .then(function (image) { var canvas = newCanvas(domNode); canvas.getContext('2d').drawImage(image, 0, 0); return canvas; }); function newCanvas(domNode) { var canvas = document.createElement('canvas'); canvas.width = options.width || util.width(domNode); canvas.height = options.height || util.height(domNode); if (options.bgcolor) { var ctx = canvas.getContext('2d'); ctx.fillStyle = options.bgcolor; ctx.fillRect(0, 0, canvas.width, canvas.height); } return canvas; }}
function toSvg(node, options) { options = options || {}; copyOptions(options); return Promise.resolve(node) .then(function (node) { return cloneNode(node, options.filter, true); }) .then(embedFonts) .then(inlineImages) .then(applyOptions) .then(function (clone) { return makeSvgDataUri(clone, options.width || util.width(node), options.height || util.height(node) ); }); function applyOptions(clone) { if (options.bgcolor) clone.style.backgroundColor = options.bgcolor; if (options.width) clone.style.width = options.width + 'px'; if (options.height) clone.style.height = options.height + 'px'; if (options.style) Object.keys(options.style).forEach(function (property) { clone.style[property] = options.style[property]; }); return clone; }}
作者：知其https://juejin.cn/post/6988045156473634852
