@logicflow/extension 2.0.17 → 2.0.18

package/lib/tools/snapshot/index.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -62,9 +73,10 @@ var Snapshot = /** @class */ (function () {
             }
         }); }); };
         /* 获取Blob对象 */
-        lf.getSnapshotBlob = function (backgroundColor, fileType) { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
+        lf.getSnapshotBlob = function (backgroundColor, // 兼容老的使用方式
+        fileType, toImageOptions) { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
             switch (_a.label) {
-                case 0: return [4 /*yield*/, this.getSnapshotBlob(backgroundColor, fileType)
+                case 0: return [4 /*yield*/, this.getSnapshotBlob(backgroundColor, fileType, toImageOptions)
                     /* 获取Base64对象 */
                 ];
                 case 1: return [2 /*return*/, _a.sent()
@@ -73,9 +85,10 @@ var Snapshot = /** @class */ (function () {
             }
         }); }); };
         /* 获取Base64对象 */
-        lf.getSnapshotBase64 = function (backgroundColor, fileType) { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
+        lf.getSnapshotBase64 = function (backgroundColor, // 兼容老的使用方式
+        fileType, toImageOptions) { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
             switch (_a.label) {
-                case 0: return [4 /*yield*/, this.getSnapshotBase64(backgroundColor, fileType)];
+                case 0: return [4 /*yield*/, this.getSnapshotBase64(backgroundColor, fileType, toImageOptions)];
                 case 1: return [2 /*return*/, _a.sent()];
             }
         }); }); };
@@ -140,13 +153,329 @@ var Snapshot = /** @class */ (function () {
         }
     };
     /**
-     * 导出画布：导出前的处理画布工作，局部渲染模式处理、静默模式处理
-     * @param fileName
-     * @param toImageOptions
+     * 将图片转换为base64格式
+     * @param url - 图片URL
+     * @returns Promise<string> - base64字符串
      */
-    Snapshot.prototype.getSnapshot = function (fileName, toImageOptions) {
+    Snapshot.prototype.convertImageToBase64 = function (url) {
         return __awaiter(this, void 0, void 0, function () {
-            var curPartial, _a, partial, editConfig;
+            return __generator(this, function (_a) {
+                return [2 /*return*/, new Promise(function (resolve, reject) {
+                        var img = new Image();
+                        img.crossOrigin = 'anonymous'; // 处理跨域问题
+                        img.onload = function () {
+                            var canvas = document.createElement('canvas');
+                            canvas.width = img.width;
+                            canvas.height = img.height;
+                            var ctx = canvas.getContext('2d');
+                            ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(img, 0, 0);
+                            var base64 = canvas.toDataURL('image/png');
+                            resolve(base64);
+                        };
+                        img.onerror = function () {
+                            reject(new Error("Failed to load image: ".concat(url)));
+                        };
+                        img.src = url;
+                    })];
+            });
+        });
+    };
+    /**
+     * 检查URL是否为相对路径
+     * @param url - 要检查的URL
+     * @returns boolean - 是否为相对路径
+     */
+    Snapshot.prototype.isRelativePath = function (url) {
+        return (!url.startsWith('data:') &&
+            !url.startsWith('http://') &&
+            !url.startsWith('https://') &&
+            !url.startsWith('//'));
+    };
+    /**
+     * 处理SVG中的图片元素
+     * @param element - SVG元素
+     */
+    Snapshot.prototype.processImages = function (element) {
+        return __awaiter(this, void 0, void 0, function () {
+            var images, i, image, href, base64, error_1, foreignObjects, i, foreignObject, images_1, j, image, src, base64, error_2;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        images = element.getElementsByTagName('image');
+                        i = 0;
+                        _a.label = 1;
+                    case 1:
+                        if (!(i < images.length)) return [3 /*break*/, 6];
+                        image = images[i];
+                        href = image.getAttributeNS('http://www.w3.org/1999/xlink', 'href') ||
+                            image.getAttribute('href');
+                        if (!(href && this.isRelativePath(href))) return [3 /*break*/, 5];
+                        _a.label = 2;
+                    case 2:
+                        _a.trys.push([2, 4, , 5]);
+                        return [4 /*yield*/, this.convertImageToBase64(href)];
+                    case 3:
+                        base64 = _a.sent();
+                        image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', base64);
+                        image.setAttribute('href', base64);
+                        return [3 /*break*/, 5];
+                    case 4:
+                        error_1 = _a.sent();
+                        console.warn("Failed to convert image to base64: ".concat(href), error_1);
+                        return [3 /*break*/, 5];
+                    case 5:
+                        i++;
+                        return [3 /*break*/, 1];
+                    case 6:
+                        foreignObjects = element.getElementsByTagName('foreignObject');
+                        i = 0;
+                        _a.label = 7;
+                    case 7:
+                        if (!(i < foreignObjects.length)) return [3 /*break*/, 14];
+                        foreignObject = foreignObjects[i];
+                        images_1 = foreignObject.getElementsByTagName('img');
+                        j = 0;
+                        _a.label = 8;
+                    case 8:
+                        if (!(j < images_1.length)) return [3 /*break*/, 13];
+                        image = images_1[j];
+                        src = image.getAttribute('src');
+                        if (!(src && this.isRelativePath(src))) return [3 /*break*/, 12];
+                        _a.label = 9;
+                    case 9:
+                        _a.trys.push([9, 11, , 12]);
+                        return [4 /*yield*/, this.convertImageToBase64(src)];
+                    case 10:
+                        base64 = _a.sent();
+                        image.setAttribute('src', base64);
+                        return [3 /*break*/, 12];
+                    case 11:
+                        error_2 = _a.sent();
+                        console.warn("Failed to convert image to base64: ".concat(src), error_2);
+                        return [3 /*break*/, 12];
+                    case 12:
+                        j++;
+                        return [3 /*break*/, 8];
+                    case 13:
+                        i++;
+                        return [3 /*break*/, 7];
+                    case 14: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * 克隆并处理画布节点
+     * @param svg
+     * @returns
+     */
+    Snapshot.prototype.cloneSvg = function (svg_1) {
+        return __awaiter(this, arguments, void 0, function (svg, addStyle) {
+            var copy, graph, childLength, i, lfLayer, layerClassList, lfBase, style, foreignObject;
+            var _this = this;
+            var _a;
+            if (addStyle === void 0) { addStyle = true; }
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        copy = svg.cloneNode(true);
+                        graph = copy.lastChild;
+                        childLength = (_a = graph === null || graph === void 0 ? void 0 : graph.childNodes) === null || _a === void 0 ? void 0 : _a.length;
+                        if (childLength) {
+                            for (i = 0; i < childLength; i++) {
+                                lfLayer = graph === null || graph === void 0 ? void 0 : graph.childNodes[i];
+                                layerClassList = lfLayer.classList && Array.from(lfLayer.classList);
+                                if (layerClassList && layerClassList.indexOf('lf-base') < 0) {
+                                    graph === null || graph === void 0 ? void 0 : graph.removeChild(graph.childNodes[i]);
+                                    childLength--;
+                                    i--;
+                                }
+                                else {
+                                    lfBase = graph === null || graph === void 0 ? void 0 : graph.childNodes[i];
+                                    lfBase &&
+                                        lfBase.childNodes.forEach(function (item) {
+                                            var element = item;
+                                            _this.removeAnchor(element.firstChild);
+                                            _this.removeRotateControl(element.firstChild);
+                                        });
+                                }
+                            }
+                        }
+                        // 处理图片路径
+                        return [4 /*yield*/, this.processImages(copy)
+                            // 设置css样式
+                        ];
+                    case 1:
+                        // 处理图片路径
+                        _b.sent();
+                        // 设置css样式
+                        if (addStyle) {
+                            style = document.createElement('style');
+                            style.innerHTML = this.getClassRules();
+                            foreignObject = document.createElement('foreignObject');
+                            foreignObject.appendChild(style);
+                            copy.appendChild(foreignObject);
+                        }
+                        return [2 /*return*/, copy];
+                }
+            });
+        });
+    };
+    /**
+     * 获取脚本 css 样式
+     * @returns
+     */
+    Snapshot.prototype.getClassRules = function () {
+        var rules = '';
+        if (this.useGlobalRules) {
+            var styleSheets = document.styleSheets;
+            for (var i = 0; i < styleSheets.length; i++) {
+                var sheet = styleSheets[i];
+                // 这里是为了过滤掉不同源 css 脚本，防止报错终止导出
+                try {
+                    for (var j = 0; j < sheet.cssRules.length; j++) {
+                        rules += sheet.cssRules[j].cssText;
+                    }
+                }
+                catch (error) {
+                    console.log('CSS scripts from different sources have been filtered out');
+                }
+            }
+        }
+        if (this.customCssRules) {
+            rules += this.customCssRules;
+        }
+        return rules;
+    };
+    /**
+     * 将 svg 转化为 canvas
+     * @param svg - svg 元素
+     * @param toImageOptions - 图像选项
+     * @returns Promise<canvas> - 返回 canvas 对象
+     */
+    Snapshot.prototype.getCanvasData = function (svg, toImageOptions) {
+        return __awaiter(this, void 0, void 0, function () {
+            var width, height, backgroundColor, _a, padding, copy, dpr, base, bbox, layoutCanvas, layout, offsetX, offsetY, graphModel, transformModel, SCALE_X, SCALE_Y, TRANSLATE_X, TRANSLATE_Y, safetyFactor, actualWidth, actualHeight, bboxWidth, bboxHeight, canvas, safetyMargin, ctx, img, style, foreignObject;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        width = toImageOptions.width, height = toImageOptions.height, backgroundColor = toImageOptions.backgroundColor, _a = toImageOptions.padding, padding = _a === void 0 ? 40 : _a;
+                        return [4 /*yield*/, this.cloneSvg(svg, false)];
+                    case 1:
+                        copy = _b.sent();
+                        dpr = window.devicePixelRatio || 1;
+                        if (dpr < 1) {
+                            // https://github.com/didi/LogicFlow/issues/1222
+                            // canvas.width = bboxWidth * dpr配合ctx.scale(dpr, dpr)是为了解决绘制模糊
+                            // 比如dpr=2，先让canvas.width放大到等同于屏幕的物理像素宽高，然后自适应缩放适配canvas.style.width
+                            // 由于所有元素都缩放了一半，因此需要ctx.scale(dpr, dpr)放大2倍整体绘制的内容
+                            // 当用户缩放浏览器时，window.devicePixelRatio会随着变小
+                            // 当window.devicePixelRatio变小到一定程度，会导致canvas.width<canvas.style.width
+                            // 由于导出图片的svg的大小是canvas.style.width+canvas.style.height
+                            // 因此会导致导出的svg图片无法完整绘制到canvas（因为canvas.width小于svg的宽）
+                            // 从而导致canvas导出图片是缺失的svg
+                            // 而dpr>=1就能保证canvas.width>=canvas.style.width
+                            // 当dpr小于1的时候，我们强制转化为1，并不会产生绘制模糊等问题
+                            dpr = 1;
+                        }
+                        base = this.lf.graphModel.rootEl.querySelector('.lf-base');
+                        bbox = base.getBoundingClientRect();
+                        layoutCanvas = this.lf.container.querySelector('.lf-canvas-overlay');
+                        layout = layoutCanvas.getBoundingClientRect();
+                        offsetX = bbox.x - layout.x;
+                        offsetY = bbox.y - layout.y;
+                        graphModel = this.lf.graphModel;
+                        transformModel = graphModel.transformModel;
+                        SCALE_X = transformModel.SCALE_X, SCALE_Y = transformModel.SCALE_Y, TRANSLATE_X = transformModel.TRANSLATE_X, TRANSLATE_Y = transformModel.TRANSLATE_Y;
+                        safetyFactor = 1.1 // 安全系数，增加20%的空间
+                        ;
+                        actualWidth = (bbox.width / SCALE_X) * safetyFactor;
+                        actualHeight = (bbox.height / SCALE_Y) * safetyFactor;
+                        copy.lastChild.style.transform = "matrix(1, 0, 0, 1, ".concat((-offsetX + TRANSLATE_X) * (1 / SCALE_X) + padding / dpr, ", ").concat((-offsetY + TRANSLATE_Y) * (1 / SCALE_Y) + padding / dpr, ")");
+                        bboxWidth = Math.ceil(actualWidth);
+                        bboxHeight = Math.ceil(actualHeight);
+                        canvas = document.createElement('canvas');
+                        canvas.style.width = "".concat(bboxWidth, "px");
+                        canvas.style.height = "".concat(bboxHeight, "px");
+                        safetyMargin = 40 // 额外的安全边距
+                        ;
+                        canvas.width = bboxWidth * dpr + padding * 2 + safetyMargin;
+                        canvas.height = bboxHeight * dpr + padding * 2 + safetyMargin;
+                        ctx = canvas.getContext('2d');
+                        if (ctx) {
+                            // 清空canvas
+                            ctx.clearRect(0, 0, canvas.width, canvas.height);
+                            ctx.scale(dpr, dpr);
+                            // 如果有背景色，设置流程图导出的背景色
+                            if (backgroundColor) {
+                                ctx.fillStyle = backgroundColor;
+                                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                            }
+                            else {
+                                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                            }
+                        }
+                        img = new Image();
+                        style = document.createElement('style');
+                        style.innerHTML = this.getClassRules();
+                        foreignObject = document.createElement('foreignObject');
+                        foreignObject.appendChild(style);
+                        copy.appendChild(foreignObject);
+                        return [2 /*return*/, new Promise(function (resolve) {
+                                img.onload = function () {
+                                    var isFirefox = navigator.userAgent.indexOf('Firefox') > -1;
+                                    try {
+                                        if (isFirefox) {
+                                            createImageBitmap(img, {
+                                                resizeWidth: width && height
+                                                    ? (0, utils_1.copyCanvas)(canvas, width, height).width
+                                                    : canvas.width,
+                                                resizeHeight: width && height
+                                                    ? (0, utils_1.copyCanvas)(canvas, width, height).height
+                                                    : canvas.height,
+                                            }).then(function (imageBitmap) {
+                                                // 由于在transform矩阵中已经考虑了padding，这里不再需要额外的padding偏移
+                                                ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(imageBitmap, 0, 0);
+                                                resolve(width && height ? (0, utils_1.copyCanvas)(canvas, width, height) : canvas);
+                                            });
+                                        }
+                                        else {
+                                            // 由于在transform矩阵中已经考虑了padding，这里不再需要额外的padding偏移
+                                            ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(img, 0, 0);
+                                            resolve(width && height ? (0, utils_1.copyCanvas)(canvas, width, height) : canvas);
+                                        }
+                                    }
+                                    catch (e) {
+                                        // 由于在transform矩阵中已经考虑了padding，这里不再需要额外的padding偏移
+                                        ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(img, 0, 0);
+                                        resolve(width && height ? (0, utils_1.copyCanvas)(canvas, width, height) : canvas);
+                                    }
+                                };
+                                /*
+                                因为svg中存在dom存放在foreignObject元素中
+                                svg dom => Base64编码字符串 挂载到img上
+                                fixme: XMLSerializer的中的css background url不会下载图片
+                                */
+                                var svg2Img = "data:image/svg+xml;charset=utf-8,".concat(new XMLSerializer().serializeToString(copy));
+                                var imgSrc = svg2Img
+                                    .replace(/\n/g, '')
+                                    .replace(/\t/g, '')
+                                    .replace(/#/g, '%23');
+                                img.src = imgSrc;
+                            })];
+                }
+            });
+        });
+    };
+    /**
+     * 封装导出前的通用处理逻辑：局部渲染模式处理、静默模式处理
+     * @param callback 实际执行的导出操作回调函数
+     * @param toImageOptions 导出图片选项
+     * @returns 返回回调函数的执行结果
+     */
+    Snapshot.prototype.withExportPreparation = function (callback, toImageOptions) {
+        return __awaiter(this, void 0, void 0, function () {
+            var curPartial, _a, partial, editConfig, result;
             var _this = this;
             return __generator(this, function (_b) {
                 switch (_b.label) {
@@ -160,30 +489,61 @@ var Snapshot = /** @class */ (function () {
                             stopScrollGraph: true,
                             stopMoveGraph: true,
                         });
-                        if (!(curPartial !== partial)) return [3 /*break*/, 1];
+                        _b.label = 1;
+                    case 1:
+                        _b.trys.push([1, , 6, 7]);
+                        if (!(curPartial !== partial)) return [3 /*break*/, 3];
                         this.lf.graphModel.setPartial(partial);
-                        this.lf.graphModel.eventCenter.once('graph:updated', function () { return __awaiter(_this, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                switch (_a.label) {
-                                    case 0: return [4 /*yield*/, this.snapshot(fileName, toImageOptions)
-                                        // 恢复原来渲染模式
-                                    ];
-                                    case 1:
-                                        _a.sent();
-                                        // 恢复原来渲染模式
-                                        this.lf.graphModel.setPartial(curPartial);
-                                        return [2 /*return*/];
-                                }
-                            });
-                        }); });
-                        return [3 /*break*/, 3];
-                    case 1: return [4 /*yield*/, this.snapshot(fileName, toImageOptions)];
+                        return [4 /*yield*/, new Promise(function (resolve) {
+                                _this.lf.graphModel.eventCenter.once('graph:updated', function () { return __awaiter(_this, void 0, void 0, function () {
+                                    var callbackResult;
+                                    return __generator(this, function (_a) {
+                                        switch (_a.label) {
+                                            case 0: return [4 /*yield*/, callback()
+                                                // 恢复原来渲染模式
+                                            ];
+                                            case 1:
+                                                callbackResult = _a.sent();
+                                                // 恢复原来渲染模式
+                                                this.lf.graphModel.setPartial(curPartial);
+                                                resolve(callbackResult);
+                                                return [2 /*return*/];
+                                        }
+                                    });
+                                }); });
+                            })];
                     case 2:
-                        _b.sent();
-                        _b.label = 3;
-                    case 3:
+                        // 等待画布更新完成
+                        result = _b.sent();
+                        return [3 /*break*/, 5];
+                    case 3: return [4 /*yield*/, callback()];
+                    case 4:
+                        // 直接执行回调
+                        result = _b.sent();
+                        _b.label = 5;
+                    case 5: return [3 /*break*/, 7];
+                    case 6:
                         // 恢复原来配置
                         this.lf.updateEditConfig(editConfig);
+                        return [7 /*endfinally*/];
+                    case 7: return [2 /*return*/, result];
+                }
+            });
+        });
+    };
+    /**
+     * 导出画布：导出前的处理画布工作，局部渲染模式处理、静默模式处理
+     * @param fileName
+     * @param toImageOptions
+     */
+    Snapshot.prototype.getSnapshot = function (fileName, toImageOptions) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.withExportPreparation(function () { return _this.snapshot(fileName, toImageOptions); }, toImageOptions)];
+                    case 1:
+                        _a.sent();
                         return [2 /*return*/];
                 }
             });
@@ -207,80 +567,63 @@ var Snapshot = /** @class */ (function () {
                         return [4 /*yield*/, (0, utils_1.updateImageSource)(svg)];
                     case 1:
                         _c.sent();
-                        if (fileType === 'svg') {
-                            copy = this.cloneSvg(svg);
-                            svgString = new XMLSerializer().serializeToString(copy);
-                            blob = new Blob([svgString], {
-                                type: 'image/svg+xml;charset=utf-8',
-                            });
-                            url = URL.createObjectURL(blob);
-                            this.triggerDownload(url);
-                        }
-                        else {
-                            this.getCanvasData(svg, toImageOptions !== null && toImageOptions !== void 0 ? toImageOptions : {}).then(function (canvas) {
-                                // canvas元素 => base64 url   image/octet-stream: 确保所有浏览器都能正常下载
-                                var imgUrl = canvas
-                                    .toDataURL("image/".concat(fileType), quality)
-                                    .replace("image/".concat(fileType), 'image/octet-stream');
-                                _this.triggerDownload(imgUrl);
-                            });
-                        }
-                        return [2 /*return*/];
+                        if (!(fileType === 'svg')) return [3 /*break*/, 3];
+                        return [4 /*yield*/, this.cloneSvg(svg)];
+                    case 2:
+                        copy = _c.sent();
+                        svgString = new XMLSerializer().serializeToString(copy);
+                        blob = new Blob([svgString], {
+                            type: 'image/svg+xml;charset=utf-8',
+                        });
+                        url = URL.createObjectURL(blob);
+                        this.triggerDownload(url);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        this.getCanvasData(svg, toImageOptions !== null && toImageOptions !== void 0 ? toImageOptions : {}).then(function (canvas) {
+                            // canvas元素 => base64 url   image/octet-stream: 确保所有浏览器都能正常下载
+                            var imgUrl = canvas
+                                .toDataURL("image/".concat(fileType), quality)
+                                .replace("image/".concat(fileType), 'image/octet-stream');
+                            _this.triggerDownload(imgUrl);
+                        });
+                        _c.label = 4;
+                    case 4: return [2 /*return*/];
                 }
             });
         });
     };
     /**
-     * 获取base64对象
-     * @param backgroundColor
+     * 获取Blob对象
      * @param fileType
+     * @param toImageOptions
      * @returns
      */
-    Snapshot.prototype.getSnapshotBase64 = function (backgroundColor, fileType) {
+    Snapshot.prototype.getSnapshotBlob = function (backgroundColor, fileType, toImageOptions) {
         return __awaiter(this, void 0, void 0, function () {
-            var svg;
             var _this = this;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0:
-                        svg = this.getSvgRootElement(this.lf);
-                        return [4 /*yield*/, (0, utils_1.updateImageSource)(svg)];
-                    case 1:
-                        _a.sent();
-                        return [2 /*return*/, new Promise(function (resolve) {
-                                _this.getCanvasData(svg, { backgroundColor: backgroundColor }).then(function (canvas) {
-                                    var base64 = canvas.toDataURL("image/".concat(fileType !== null && fileType !== void 0 ? fileType : 'png'));
-                                    // 输出图片数据以及图片宽高
-                                    resolve({
-                                        data: base64,
-                                        width: canvas.width,
-                                        height: canvas.height,
-                                    });
-                                });
-                            })];
+                    case 0: return [4 /*yield*/, this.withExportPreparation(function () { return _this.snapshotBlob(toImageOptions, fileType, backgroundColor); }, toImageOptions)];
+                    case 1: return [2 /*return*/, _a.sent()];
                 }
             });
         });
     };
-    /**
-     * 获取Blob对象
-     * @param backgroundColor
-     * @param fileType
-     * @returns
-     */
-    Snapshot.prototype.getSnapshotBlob = function (backgroundColor, fileType) {
+    // 内部方法处理blob转换
+    Snapshot.prototype.snapshotBlob = function (toImageOptions, baseFileType, backgroundColor) {
         return __awaiter(this, void 0, void 0, function () {
-            var svg;
+            var _a, fileType, svg;
             var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
+                        _a = (toImageOptions !== null && toImageOptions !== void 0 ? toImageOptions : {}).fileType, fileType = _a === void 0 ? baseFileType : _a;
                         svg = this.getSvgRootElement(this.lf);
                         return [4 /*yield*/, (0, utils_1.updateImageSource)(svg)];
                     case 1:
-                        _a.sent();
+                        _b.sent();
                         return [2 /*return*/, new Promise(function (resolve) {
-                                _this.getCanvasData(svg, { backgroundColor: backgroundColor }).then(function (canvas) {
+                                _this.getCanvasData(svg, __assign({ backgroundColor: backgroundColor }, (toImageOptions !== null && toImageOptions !== void 0 ? toImageOptions : {}))).then(function (canvas) {
                                     canvas.toBlob(function (blob) {
                                         // 输出图片数据以及图片宽高
                                         resolve({
@@ -296,182 +639,52 @@ var Snapshot = /** @class */ (function () {
         });
     };
     /**
-     * 获取脚本 css 样式
+     * 获取base64对象
+     * @param backgroundColor
+     * @param fileType
+     * @param toImageOptions
      * @returns
      */
-    Snapshot.prototype.getClassRules = function () {
-        var rules = '';
-        if (this.useGlobalRules) {
-            var styleSheets = document.styleSheets;
-            for (var i = 0; i < styleSheets.length; i++) {
-                var sheet = styleSheets[i];
-                // 这里是为了过滤掉不同源 css 脚本，防止报错终止导出
-                try {
-                    for (var j = 0; j < sheet.cssRules.length; j++) {
-                        rules += sheet.cssRules[j].cssText;
-                    }
-                }
-                catch (error) {
-                    console.log('CSS scripts from different sources have been filtered out');
+    Snapshot.prototype.getSnapshotBase64 = function (backgroundColor, fileType, toImageOptions) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        console.log('getSnapshotBase64---------------', backgroundColor, fileType, toImageOptions);
+                        return [4 /*yield*/, this.withExportPreparation(function () { return _this._getSnapshotBase64(backgroundColor, fileType, toImageOptions); }, toImageOptions)];
+                    case 1: return [2 /*return*/, _a.sent()];
                 }
-            }
-        }
-        if (this.customCssRules) {
-            rules += this.customCssRules;
-        }
-        return rules;
+            });
+        });
     };
-    /**
-     * 将 svg 转化为 canvas
-     * @param svg - svg 元素
-     * @param toImageOptions - 图像选项
-     * @returns Promise<canvas> - 返回 canvas 对象
-     */
-    Snapshot.prototype.getCanvasData = function (svg, toImageOptions) {
+    // 内部方法处理实际的base64转换
+    Snapshot.prototype._getSnapshotBase64 = function (backgroundColor, baseFileType, toImageOptions) {
         return __awaiter(this, void 0, void 0, function () {
-            var width, height, backgroundColor, _a, padding, copy, dpr, base, bbox, layoutCanvas, layout, offsetX, offsetY, graphModel, transformModel, SCALE_X, SCALE_Y, TRANSLATE_X, TRANSLATE_Y, bboxWidth, bboxHeight, canvas, ctx, img, style, foreignObject;
+            var _a, fileType, svg;
+            var _this = this;
             return __generator(this, function (_b) {
-                width = toImageOptions.width, height = toImageOptions.height, backgroundColor = toImageOptions.backgroundColor, _a = toImageOptions.padding, padding = _a === void 0 ? 40 : _a;
-                copy = this.cloneSvg(svg, false);
-                dpr = window.devicePixelRatio || 1;
-                if (dpr < 1) {
-                    // https://github.com/didi/LogicFlow/issues/1222
-                    // canvas.width = bboxWidth * dpr配合ctx.scale(dpr, dpr)是为了解决绘制模糊
-                    // 比如dpr=2，先让canvas.width放大到等同于屏幕的物理像素宽高，然后自适应缩放适配canvas.style.width
-                    // 由于所有元素都缩放了一半，因此需要ctx.scale(dpr, dpr)放大2倍整体绘制的内容
-                    // 当用户缩放浏览器时，window.devicePixelRatio会随着变小
-                    // 当window.devicePixelRatio变小到一定程度，会导致canvas.width<canvas.style.width
-                    // 由于导出图片的svg的大小是canvas.style.width+canvas.style.height
-                    // 因此会导致导出的svg图片无法完整绘制到canvas（因为canvas.width小于svg的宽）
-                    // 从而导致canvas导出图片是缺失的svg
-                    // 而dpr>=1就能保证canvas.width>=canvas.style.width
-                    // 当dpr小于1的时候，我们强制转化为1，并不会产生绘制模糊等问题
-                    dpr = 1;
-                }
-                base = this.lf.graphModel.rootEl.querySelector('.lf-base');
-                bbox = base.getBoundingClientRect();
-                layoutCanvas = this.lf.container.querySelector('.lf-canvas-overlay');
-                layout = layoutCanvas.getBoundingClientRect();
-                offsetX = bbox.x - layout.x;
-                offsetY = bbox.y - layout.y;
-                graphModel = this.lf.graphModel;
-                transformModel = graphModel.transformModel;
-                SCALE_X = transformModel.SCALE_X, SCALE_Y = transformModel.SCALE_Y, TRANSLATE_X = transformModel.TRANSLATE_X, TRANSLATE_Y = transformModel.TRANSLATE_Y;
-                copy.lastChild.style.transform = "matrix(1, 0, 0, 1, ".concat((-offsetX + TRANSLATE_X) * (1 / SCALE_X), ", ").concat((-offsetY + TRANSLATE_Y) * (1 / SCALE_Y), ")");
-                bboxWidth = Math.ceil(bbox.width / SCALE_X);
-                bboxHeight = Math.ceil(bbox.height / SCALE_Y);
-                canvas = document.createElement('canvas');
-                canvas.style.width = "".concat(bboxWidth, "px");
-                canvas.style.height = "".concat(bboxHeight, "px");
-                // 宽高值 默认加padding 40，保证图形不会紧贴着下载图片
-                canvas.width = bboxWidth * dpr + padding * 2;
-                canvas.height = bboxHeight * dpr + padding * 2;
-                ctx = canvas.getContext('2d');
-                if (ctx) {
-                    // 清空canvas
-                    ctx.clearRect(0, 0, canvas.width, canvas.height);
-                    ctx.scale(dpr, dpr);
-                    // 如果有背景色，设置流程图导出的背景色
-                    if (backgroundColor) {
-                        ctx.fillStyle = backgroundColor;
-                        ctx.fillRect(0, 0, canvas.width, canvas.height);
-                    }
-                    else {
-                        ctx.clearRect(0, 0, canvas.width, canvas.height);
-                    }
-                }
-                img = new Image();
-                style = document.createElement('style');
-                style.innerHTML = this.getClassRules();
-                foreignObject = document.createElement('foreignObject');
-                foreignObject.appendChild(style);
-                copy.appendChild(foreignObject);
-                return [2 /*return*/, new Promise(function (resolve) {
-                        img.onload = function () {
-                            var isFirefox = navigator.userAgent.indexOf('Firefox') > -1;
-                            try {
-                                if (isFirefox) {
-                                    createImageBitmap(img, {
-                                        resizeWidth: width && height
-                                            ? (0, utils_1.copyCanvas)(canvas, width, height).width
-                                            : canvas.width,
-                                        resizeHeight: width && height
-                                            ? (0, utils_1.copyCanvas)(canvas, width, height).height
-                                            : canvas.height,
-                                    }).then(function (imageBitmap) {
-                                        ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(imageBitmap, padding / dpr, padding / dpr);
-                                        resolve(width && height ? (0, utils_1.copyCanvas)(canvas, width, height) : canvas);
+                switch (_b.label) {
+                    case 0:
+                        _a = (toImageOptions !== null && toImageOptions !== void 0 ? toImageOptions : {}).fileType, fileType = _a === void 0 ? baseFileType : _a;
+                        svg = this.getSvgRootElement(this.lf);
+                        return [4 /*yield*/, (0, utils_1.updateImageSource)(svg)];
+                    case 1:
+                        _b.sent();
+                        return [2 /*return*/, new Promise(function (resolve) {
+                                _this.getCanvasData(svg, __assign({ backgroundColor: backgroundColor }, (toImageOptions !== null && toImageOptions !== void 0 ? toImageOptions : {}))).then(function (canvas) {
+                                    var base64 = canvas.toDataURL("image/".concat(fileType !== null && fileType !== void 0 ? fileType : 'png'));
+                                    resolve({
+                                        data: base64,
+                                        width: canvas.width,
+                                        height: canvas.height,
                                     });
-                                }
-                                else {
-                                    ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(img, padding / dpr, padding / dpr);
-                                    resolve(width && height ? (0, utils_1.copyCanvas)(canvas, width, height) : canvas);
-                                }
-                            }
-                            catch (e) {
-                                ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(img, padding / dpr, padding / dpr);
-                                resolve(width && height ? (0, utils_1.copyCanvas)(canvas, width, height) : canvas);
-                            }
-                        };
-                        /*
-                        因为svg中存在dom存放在foreignObject元素中
-                        svg dom => Base64编码字符串 挂载到img上
-                        fixme: XMLSerializer的中的css background url不会下载图片
-                        */
-                        var svg2Img = "data:image/svg+xml;charset=utf-8,".concat(new XMLSerializer().serializeToString(copy));
-                        var imgSrc = svg2Img
-                            .replace(/\n/g, '')
-                            .replace(/\t/g, '')
-                            .replace(/#/g, '%23');
-                        img.src = imgSrc;
-                    })];
+                                });
+                            })];
+                }
             });
         });
     };
-    /**
-     * 克隆并处理画布节点
-     * @param svg
-     * @returns
-     */
-    Snapshot.prototype.cloneSvg = function (svg, addStyle) {
-        var _this = this;
-        var _a;
-        if (addStyle === void 0) { addStyle = true; }
-        var copy = svg.cloneNode(true);
-        var graph = copy.lastChild;
-        var childLength = (_a = graph === null || graph === void 0 ? void 0 : graph.childNodes) === null || _a === void 0 ? void 0 : _a.length;
-        if (childLength) {
-            for (var i = 0; i < childLength; i++) {
-                var lfLayer = graph === null || graph === void 0 ? void 0 : graph.childNodes[i];
-                // 只保留包含节点和边的基础图层进行下载，其他图层删除
-                var layerClassList = lfLayer.classList && Array.from(lfLayer.classList);
-                if (layerClassList && layerClassList.indexOf('lf-base') < 0) {
-                    graph === null || graph === void 0 ? void 0 : graph.removeChild(graph.childNodes[i]);
-                    childLength--;
-                    i--;
-                }
-                else {
-                    // 删除锚点
-                    var lfBase = graph === null || graph === void 0 ? void 0 : graph.childNodes[i];
-                    lfBase &&
-                        lfBase.childNodes.forEach(function (item) {
-                            var element = item;
-                            _this.removeAnchor(element.firstChild);
-                            _this.removeRotateControl(element.firstChild);
-                        });
-                }
-            }
-        }
-        // 设置css样式
-        if (addStyle) {
-            var style = document.createElement('style');
-            style.innerHTML = this.getClassRules();
-            var foreignObject = document.createElement('foreignObject');
-            foreignObject.appendChild(style);
-            copy.appendChild(foreignObject);
-        }
-        return copy;
-    };
     Snapshot.pluginName = 'snapshot';
     return Snapshot;
 }());