本帖最后由 夸克逃逸 于 2023-8-26 09:48 编辑
——————————————————
好看的LOGO要收费？一个插件就搞定！
——————————————————
插件现在支持导出海报了！内容运营者福利！新帖移步：https://www.52pojie.cn/thread-1722970-1-1.html
强烈建议给项目一个star或者fork，以后会根据反馈持续更新~
项目地址是https://github.com/quarkape/free-canvas
提示：LOGO或海报很多图片、字体或者素材都有版权，帖子和插件仅供技术交流，插件下载的LOGO和海报在官方未授权时请勿商用，由未授权而商用导致的版权纠纷问题，由LOGO和海报使用者承担所有责任。
某网站可以在线生成LOGO，并支持编辑，效果还不错，但是保存和下载需要注册、登录和收费。
如果希望获取LOGO，并且确保自己不会用于商用的话，这个帖子也许能帮到你！
一、核心思路
其实在线编辑的LOGO都是用SVG实现的。而我们可以直接把SVG的内容取出来，生成一个SVG文件，就足够在PPT和WEB中使用了。因此我们需要分析网站结构。
1. 首先进入该网站的LOGO编辑页面，打开开发者工具，定位LOGO的代码，发现并不是SVG代码，而是DIV标签：
01
这说明网站在LOGO上面放了一层DIV，防止用户直接定位到LOGO代码区。我们将这行代码删除，重新定位，就能找到SVG代码了。
2. 然后我们需要分析SVG里面有些什么内容：
02
简单分析不难看出，有一个LOGO背景，还有一个水印。LOGO背景一般来说并不需要，因为我们常见的LOGO都是PNG格式的。但是这个网站有的LOGO是带有背景色的，LOGO依赖于背景色，因此这个背景色的部分我们不着急删除，不过这个水印肯定得删除。
3. 我们需要一定的方法找到这个SVG元素。经过实验，可以采用以下这种方法：
const svg_part = document.getElementsByClassName("card__upper")[0].parentNode.childNodes[0].children[1];
也就是说先找到card__upper这个节点，然后通过父节点去找他的兄弟节点，他的兄弟节点里面的第二个子节点就是我们要找的SVG代码了。
4. 我们需要对SVG代码进行处理：
第一个处理是删除水印，第二个处理是根据用户实际需求删除背景，第三个处理是根据用户实际需求重新设置SVG尺寸。总之代码如下：
chrome.runtime.onMessage.addListener((req, sender, resp) => {
console.log('processing...')
// 判断用户输入
let widthset = req.widthset === '' ? 680 : parseInt(req.widthset);
let keepbg = req.keepbg;
if (widthset < 34 || widthset > 6800) {
resp('请确保值介于34~6800');
return;
}
// 寻找svg节点
const svg_part = document.getElementsByClassName("card__upper")[0].parentNode.childNodes[0].children[1];
// 复制节点，防止对原节点造成破坏
const svg_part_copy = svg_part.cloneNode(true);
// 重新设置节点尺寸
svg_part_copy.setAttribute("width", widthset);
svg_part_copy.setAttribute("height", parseInt(widthset * 25 / 34));
// 删除水印、根据用户需求决定是否需要删除背景
const bg = svg_part_copy.children[0];
const wm = svg_part_copy.children[1];
if (bg.nodeName === 'rect' || bg.className === 'background') {
if (!keepbg) {
svg_part_copy.removeChild(bg);
}
}
if (wm.nodeName === 'rect' || wm.classname === 'watermarklayer') {
svg_part_copy.removeChild(wm);
}
dl(svg_part_copy.outerHTML);
console.log('succeed!')
resp('操作成功')
})
上述代码第一行是与浏览器插件的开发相关的，dl()是一个生成SVG文件的函数。
5. 需要设置用户点击插件的一个弹窗页面：
这个页面允许用户选择是否需要保留LOGO背景，是否需要重新设置LOGO尺寸两个设置。
<!DOCTYPE html>
<html>
<head>
<title>popup</title>
<meta charset="utf-8" />
<link href="css/popup.css" rel="stylesheet" type="text/css">
</head>
<body>
<input id="guidence" value="使用教程[必看!!]" type="button" />
<span>(可选)LOGO宽度(34~6800):</span><br/>
<input id="widthset" type="number" maxlength="5" placeholder="建议设置为34的倍数,默认680" />
<div id="keepbgdiv">
<input type="checkbox" id="keepbg" name="keepbg"><span>保留LOGO背景(默认不保留且透明)</span><br/>
</div>
<input id="execute" value="开始处理" type="button" />
<div id="ans" style="margin-top:24px;color:red"></div>
</body>
<script src="js/popup.js" type="text/javascript"></script>
</html>
其实就是一个输入框用于接收用户定义的LOGO宽度，一个输入框用于接收用户是否选择保留背景。
6. 这个弹窗需要将用户的设置传递给content.js，因此需要再用到一个popup.js：
document.getElementById("execute").addEventListener("click", () => {
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
if (tabs[0].url !== 'https://www.logosc.cn/edit') {
document.getElementById("ans").innerText = "当前页面并不适合使用该插件，请点击上方使用教程查看本插件适用网站与页面";
return;
}
let opt = {
'widthset': document.getElementById("widthset").value,
'keepbg': document.getElementById('keepbg').checked
}
chrome.tabs.sendMessage(tabs[0].id, opt, (resp) => {
document.getElementById("ans").innerText = resp;
})
})
})
上述代码主要的作用是监听用户点击开始处理的事件，同时读取用户的设置内容，并将参数传递到content.js当中。同时对当前页面进行判断，如果不是LOGO设计网站的编辑页面，就给出提示。
7. 浏览器插件开发的相关配置，需要mainfest.json文件：
{
"manifest_version": 3,
"name": "Logo Thief",
"version": "1.0",
"description": "快速获取LOGO部分的SVG内容。插件更新地址：https://github.com/quarkape/logo_thief.git",
"author": "quarkape",
"action": {
"default_title": "LOGO_THIEF",
"default_popup": "popup.html"
},
"icons": {
"16": "img/logo_thief.png",
"48": "img/logo_thief.png",
"128": "img/logo_thief.png"
},
"permissions": ["tabs"],
"homepage_url": "https://github.com/quarkape/logo_thief.git",
"content_scripts": [
{
"matches": ["https://www.logosc.cn/edit"],
"js": ["js/content.js"]
}
]
}
最近一年该文件的版本升级到了V3，需要的小伙伴可以前往官网查看教程：https://developer.chrome.com/docs/extensions/mv3/manifest/
二、插件预览
-----
三、使用说明（详见项目地址下方说明）
1. LOGO的大小没必要越大越好，个人认为：（1）如果用作网页favicon图标，用34就够了；（2）如果用作一般的网页或者作品的LOGO，用340就行了；（3）如果要用作打印，A4纸大小，340~4000就行了；（4）如果要打印大的海报，且LOGO占很大面积，可以试试最大6800
2. 经过测试，更大的宽度，比如34000，在用IE转换为.png格式的时候会报错“意外的调用了属性或方法”，因此将最大宽度限定于6800。不过应该也够用了。如果有特殊需求的，例如只需要svg文件并且希望更大宽度的，可以单独提issue。当然你也可以自行修改最大宽度，只需要：（1）找到js/content.js文件并打开；（2）将第7行的6800修改为你想要的最大值就可以了，最大能多大我不清楚，不过我试过34000，可以导出svg，但是用Edge转PNG的时候会失败；（3）注意修改之后需要在扩展程序管理页面刷新这个插件；或者把这个插件移除了，再重新添加进来。
3. 编辑好的logo一般会居于整个图片中间，可以自行使用PS等工具裁剪。
四、安装使用
1. 首先去下载该项目：项目地址是https://github.com/quarkape/free-canvas。进入项目页面后，点击页面中Code按钮，然后点击最后一项”Download ZIP“即可下载压缩包。在项目下方也有安装使用的详细介绍和配置说明。
2. 将项目解压。
3. 打开浏览器的扩展程序管理页面，开启开发者模式，然后加载解压的扩展程序，选择刚解压得到的文件夹即可。
4. 使用的时候，先进入目标网站（网站链接详见项目地址下方说明），然后根据网站指引进入LOGO编辑页面，编辑完成后点击插件，做好配置，点击开始处理即可。
5. 得到的SVG文件可以直接用于PPT和WEB中，也可以用Edge打开，然后使用Edge的IE模式去加载页面，另存为图片并选择PNG格式。
6. 如果还不会使用的话，可以看看视频操作教程：https://www.bilibili.com/video/BV1t84y1r71B?share_source=copy_web
五、其他
1. 如果大家觉得好用的话，我可以再去看看创客贴的相关功能，看能不能做一个类似的插件（不过我刚看了一下，可能工作量有点儿大，也不一定能实现）。
2. 另外其实这个教程涉及浏览器插件开发的相关知识，我自己也并不擅长，所以教程可能稍微显得不太能理解。感兴趣的小伙伴建议可以把源码下载下来，再摸索摸索，欢迎帖子下留言交流~
具体实现过程我发过一个视频，感兴趣的小伙伴可以去看看：https://www.bilibili.com/video/BV1ZN411R7xm?share_source=copy_web
| 
[复制链接]
发表于 2022-11-26 18:41
|
发表于 2022-11-26 21:46
