点击按钮导出SVG或PNG格式
// ==UserScript==
// @name 导出SVG/PNG
// @namespace http://tampermonkey.net/
// @version 2025-03-22
// @description 点击按钮导出SVG或PNG格式
// @author GVMZ
// @match https://www.processon.com/*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant GM_download
// @grant GM_addStyle
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// 插入导出SVG按钮
let svgButton = document.createElement('button');
svgButton.innerHTML = '导出SVG';
svgButton.style.position = 'fixed';
svgButton.style.top = '460px';
svgButton.style.right = '20px';
svgButton.style.zIndex = 9999;
svgButton.style.padding = '10px';
svgButton.style.backgroundColor = '#4CAF50';
svgButton.style.color = 'white';
svgButton.style.border = 'none';
svgButton.style.borderRadius = '5px';
svgButton.style.cursor = 'pointer';
document.body.appendChild(svgButton);
// 插入导出PNG按钮
let pngButton = document.createElement('button');
pngButton.innerHTML = '导出PNG';
pngButton.style.position = 'fixed';
pngButton.style.top = '500px';
pngButton.style.right = '20px';
pngButton.style.zIndex = 9999;
pngButton.style.padding = '10px';
pngButton.style.backgroundColor = '#FF5722';
pngButton.style.color = 'white';
pngButton.style.border = 'none';
pngButton.style.borderRadius = '5px';
pngButton.style.cursor = 'pointer';
document.body.appendChild(pngButton);
// 去除水印的函数
function removeWatermark(svgElement) {
// 查找包含特定文本的 <text> 元素
let watermarkTextElements = svgElement.querySelectorAll('text');
watermarkTextElements.forEach(function(textElement) {
// 检查文本内容是否为水印文本
if (textElement.textContent.includes('ProcessOn.com免费流程图')) {
textElement.remove(); // 移除水印文本
}
});
}
// 导出SVG按钮的点击事件
svgButton.addEventListener('click', function() {
// 获取SVG元素
let allSvgElements = document.querySelectorAll('[id*="SvgjsSvg"]');
let svgElement = allSvgElements[2]; // 获取第三个SVG元素
if (svgElement) {
// 去除水印
removeWatermark(svgElement);
// 获取SVG数据
let svgData = new XMLSerializer().serializeToString(svgElement);
// 修复命名空间问题
svgData = svgData.replace(/xmlns:xlink="http:\/\/www\.w3\.org\/1999\/xlink"/g, '');
// 下载SVG文件
let svgBlob = new Blob([svgData], { type: 'image/svg+xml' });
let svgUrl = URL.createObjectURL(svgBlob);
GM_download({
url: svgUrl,
name: 'exported_image.svg',
saveAs: true
});
} else {
alert('未找到SVG元素');
}
});
// 导出PNG按钮的点击事件
pngButton.addEventListener('click', function() {
// 获取SVG元素
let allSvgElements = document.querySelectorAll('[id*="SvgjsSvg"]');
// 获取第三个SVG元素
let svgElement = allSvgElements[2];
if (svgElement) {
// 去除水印
removeWatermark(svgElement);
// 获取SVG数据
let svgData = new XMLSerializer().serializeToString(svgElement);
// 修复命名空间问题
svgData = svgData.replace(/xmlns:xlink="http:\/\/www\.w3\.org\/1999\/xlink"/g, '');
// 转换为PNG并下载
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
let img = new Image();
img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgData);
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
canvas.toBlob(function(blob) {
let pngUrl = URL.createObjectURL(blob);
GM_download({
url: pngUrl,
name: 'exported_image.png',
saveAs: true
});
}, 'image/png');
};
} else {
alert('未找到SVG元素');
}
});
})();