本帖最后由 夸克逃逸 于 2022-12-6 00:26 编辑
——————————————————————————————
【运营福利】一键免费下载高清无水印海报或LOGO，支持自动裁剪
——————————————————————————————
之前有发过一个支持一键下载LOGO的浏览器插件，后来陆陆续续更新了很多功能，修复了很多bug。
但是仅仅是LOGO是不足以满足日常需求的，尤其对于运营来说！
现在插件支持某网站的海报导出了！该网站支持的内容还挺多的，比如招聘海报、电商banner、公众号首图等。相关网站详见项目地址里面的说明！
总所周知，创客t下载海报是有水印的。无水印要会员！这个网站的海报或许没有创客t那么丰富，但是轻度使用应该是足够了！
之前的相关帖子：https://www.52pojie.cn/thread-1719160-1-1.html
提示：LOGO或海报很多图片、字体或者素材都有版权，帖子和插件仅供技术交流，插件下载的LOGO和海报在官方未授权时请勿商用，由未授权而商用导致的版权纠纷问题，由LOGO和海报使用者承担所有责任。
先给出插件地址：
https://github.com/quarkape/free-canvas
进不去或者访问慢的小伙伴可以访问国内的：
https://gitee.com/quarkape/free-canvas
接下来说一下思路：
1、分析网站的代码结构。我们使用浏览器自带的开发者工具，定位海报的位置，发现定位到的是DIV标签，而不是svg、g等标签，可以认为该网站在相关的元素上面覆盖了一层DIV。为了更好的分析SVG的代码结构，我们把DIV节点删除即可定位到SVG代码的位置
01
2、海报的导出。按照原理，直接把海报整体的SVG复制下来，放到一个新建的txt文件中，然后把文件后缀改为svg即可。如果要PNG格式，就用IE浏览器或者Edge的IE模式去另存为PNG格式文件。
02
我们也可以用函数来实现导出：
[Asm] 纯文本查看 复制代码 function dl(content) {
const el = document.createElement("a");
el.setAttribute('download', 'free_logo.svg');
const blob = new Blob([content])
el.setAttribute('href', URL.createObjectURL(blob));
el.style.display = 'none';
document.body.appendChild(el);
el.click();
document.body.removeChild(el);
}
3、海报的放大。默认导出的海报尺寸在打印后往往无法满足实际的需求，这时候就需要将海报放大。这个比较简单，直接修改最顶层SVG节点的width属性和height
属性即可。主要两者要相对于原倍数一起增大，防止海报导出后变形。
03
在代码中，我们一般想要获取svg节点，然后使用setAttribute()函数快速的修改尺寸！
[Asm] 纯文本查看 复制代码 function resizeLogo(newWidth, newHeight) {
// 修改画布尺寸
if (posterPage) {
svg_part_copy.setAttribute("width", widthset);
svg_part_copy.setAttribute("height", parseFloat(widthset * newHeight / newWidth).toFixed(2));
afterHeight = parseFloat(widthset * newHeight / newWidth).toFixed(2);
} else if (tab_type === 2 && (cutlogo || cutsquare)) {
svg_part_copy.setAttribute("viewBox", `0 0 ${newWidth} ${newHeight}`);
svg_part_copy.setAttribute("width", widthset);
svg_part_copy.setAttribute("height", widthset * newHeight / newWidth);
afterHeight = parseInt(widthset * newHeight / newWidth);
} else {
// 普通情况下修改尺寸
svg_part_copy.setAttribute("width", widthset);
svg_part_copy.setAttribute("height", parseInt(widthset * conf_list[tab_type].h / conf_list[tab_type].w));
afterHeight = parseInt(widthset * conf_list[tab_type].h / conf_list[tab_type].w);
}
}
4、海报的图片问题。在实际的使用中，我们会发现有的素材在导出后显示不出来，分析发现，在网站上设计的时候，图片的地址省略了https:，依然可以显示图片。但是导出后打开时，图片则无法正常加载。因此我们可以先把svg的文本内容导出，再使用替换的方法解决！
[Asm] 纯文本查看 复制代码 // 处理当使用一些图片素材的时候，连接不是严格的http格式的问题
let outerHTML = svg_part_copy.outerHTML;
outerHTML = outerHTML.replaceAll("xlink:href=\"//", "xlink:href=\"https://");
5、怎么判断当前页面是海报设计页面还是LOGO设计页面呢？这个问题其实涉及浏览器插件的开发问题。由于LOGO的导出和海报的导出并不是一套代码，并且LOGO导出可以裁剪，而海报不需要裁剪，因此我们的插件还需要根据当前页面的类型来显示或者隐藏某些内容。这时候我们可以看网页标签的信息，比如名称、网址是否有区别。在这个网站中，并没有区别！我们还可以看两个页面是否有不同的功能组成。在本例中，经过观察，海报设计页面和logo涉及页面有两个地方的功能是不一样的，里面的节点的class名称也是不一样的，这说明我们可以通过判断页面是否含有包含某个class样式名称的节点来判断页面类型。
[Asm] 纯文本查看 复制代码 // 去掉无用区域，仅适用于标智客登陆后的类型
if (tab_type === 2) {
// 判断当前页面是海报还是logo
let iconNode = document.getElementsByClassName("icon-page");
let pageNode = document.getElementsByClassName("my-home");
if (iconNode.length !== 0 && pageNode.length === 0) { // 当前是logo页面
if (cutlogo) {
svgBoxNodes = document.getElementById("rectBox");
dealCutFit();
} else if (cutsquare) {
svgBoxNodes = document.getElementById("rectBox");
dealCutSquare();
} else {
resizeLogo();
}
} else if (iconNode.length === 0 && pageNode.length !== 0) { // 海报页面
posterPage = !posterPage;
basicDeal();
// 获取原尺寸
let width = parseFloat(svg_part_copy.getAttribute("width"));
let height = parseFloat(svg_part_copy.getAttribute("height"));
resizeLogo(width, height);
}
} else {
resizeLogo();
}
关于插件的具体使用方法，大家可以看项目下面详细的说明，包括：使用方法，可用的网站，常见的问题，配置的建议等等！ | 
[复制链接]
发表于 2022-12-5 18:23
|
发表于 2022-12-5 19:13
感谢分享，边翻书边对照边学习ing 
