自由画布 - 一键免费下载高清无水印LOGO v4.2.0

夸克逃逸

历史文章：【运营福利】一键免费下载高清无水印海报和LOGO，支持自动裁剪

插件Github项目地址：https://github.com/quarkape/free-canvas

----------

Free Canvas更新了！此次更新版本为4.2.0，重要更新如下：

1. 修复了标智客官网代码修改，导致浏览器拓展程序不能正常导出LOGO和海报的问题
2. 优化了UI界面
3. 删除了非登录状态下标智客导出的功能（该网站在非登录状态下功能受限）


----------


主要代码逻辑：


1. 定位网站LOGO位置
2. 将LOGO的网页代码另存为 .svg 文件

其中，特别要注意裁剪为正方形功能，需要判断logo的边界，然后确定logo合适的移动方向和距离，最后确定是否需要移动背景。主要代码如下：

function calcEdge() {
    let svgRect = svg_part_copy.getBoundingClientRect();
    let leftMin = Number.MAX_SAFE_INTEGER, topMin = Number.MAX_SAFE_INTEGER;
    let rightMax = Number.MIN_SAFE_INTEGER, bottomMax = Number.MIN_SAFE_INTEGER;
    let nodes = svg_part_copy.children;
    let boxNodes = svgBoxNodes.children;
    // 对应的删除rect-box里面的内容
    let placeCount = -1;
    // 判断是否存在
    // 由于已经去除了水印，所以克隆节点的节点数比原节点少一个，如果勾选了去除背景，那就少两个
    let nodesNum = keepbg ? 2 : 1;
    if ((nodes.length - nodesNum) !== boxNodes.length) {
      resp('检测到插件不适用于此logo，请检查logo中是否有文字素材。如果有，请单击文字素材，然后点击左上角取消编组，重复此过程直到logo中所有文字素材都取消了编组。');
      return false;
    }
    // 排除一些非g标签对index的影响
    for (let index=0;index<nodes.length;index++) {
      // 计算上下左右边界      
        if (nodes[index].nodeName.toLowerCase() === 'defs') {
          continue;
        }
        placeCount++;
        let transAttr = nodes[index].getAttribute("transform");
        let transl = transAttr.match(pat)[0].split(",");
        let transLeft = parseFloat(transl[0]), transTop = parseFloat(transl[1]), transRight = 0, transBottom = 0;

        // 消除rect对实际宽高的影响
        let innersvg_part_copys = nodes[index].firstChild.children;

        // 部分组件的参考点不是左上角，需要对比处理
        // 这里要注意index+1，因为克隆的那个背景被去掉了，因此要在克隆的节点的基础上加上1才能得到原始节点的数据
        let boxTrans = boxNodes[placeCount].style.transform.match(patBox)[0].split(",");

        /**
         * box的translate属性一定是正确的，参考点一定是左上角，所以需要与之判断，进而确定svg节点是不是以左上角为参考点
         * 在做对比看参考点的时候，用原来的的svg与原来的box比较，但是最后是在克隆的svg上面做修改
         * 如果参考点x为0（假设此时y的参考点也为0）
         * 这里的判断方法并非完美
         */

        if (Math.abs(parseInt(transLeft) - parseInt(boxTrans[0])) <= 1) {
          if (innersvg_part_copys[0].nodeName !== "rect") {
            // 第一层没有第二层有
            let finalsvg_part_copys = innersvg_part_copys[0].children;
            if (finalsvg_part_copys.length > 1 && finalsvg_part_copys[0].nodeName === "rect") {
              let gRect = finalsvg_part_copys[1].getBoundingClientRect();
              transLeft = gRect.left - svgRect.left;
              transTop = gRect.top - svgRect.top;
              // 上面已经计算了部分内容，下面只需要加上width就够了
              transRight = transLeft + gRect.width;
              transBottom = transTop + gRect.height;
            } else {
              // 第一层没有第二层也没有
              transRight = transLeft + parseFloat(innersvg_part_copys[1].getAttribute("width"));
              transBottom = transTop + parseFloat(innersvg_part_copys[1].getAttribute("height"));
            }
          } else {
            // 第一层有
            transRight = transLeft + parseFloat(innersvg_part_copys[1].getAttribute("width"));
            transBottom = transTop + parseFloat(innersvg_part_copys[1].getAttribute("height"));
          }
        } else { // 参考点x不为0
          if (innersvg_part_copys[0].nodeName !== "rect") {
            let finalsvg_part_copys = innersvg_part_copys[0].children;
            // 第一层没有第二层有
            if (finalsvg_part_copys.length > 1 && finalsvg_part_copys[0].nodeName === "rect") {
              let gRect = innersvg_part_copys[0].lastChild.getBoundingClientRect();
              transLeft = gRect.left - svgRect.left;
              transTop = gRect.top - svgRect.top;
              // 上面已经计算了部分内容，下面只需要加上width就够了
              transRight = transLeft + gRect.width;
              transBottom = transTop + gRect.height;
            } else {
              // 第一层没有第二层也没有
              let itemRect = nodes[index].getBoundingClientRect();
              transLeft = itemRect.left - svgRect.left;
              transTop = itemRect.top - svgRect.top;
              transRight = transLeft + itemRect.width;
              transBottom = transTop + itemRect.height;
            }
          } else {
            // 第一层有
            // let itemRect = nodes[index].getBoundingClientRect();
            // 这里默认第二个元素不再是rect，而且是svg
            let itemRect = innersvg_part_copys[1].getBoundingClientRect();
            transLeft = itemRect.left - svgRect.left;
            transTop = itemRect.top - svgRect.top;
            transRight = transLeft + itemRect.width;
            transBottom = transTop + itemRect.height;
          }
        }
        if (transLeft < leftMin) {
          leftMin = transLeft;
        }
        if (transTop < topMin) {
          topMin = transTop;
        }
        if (transRight > rightMax) {
          rightMax = transRight;
        }
        if (transBottom > bottomMax) {
          bottomMax = transBottom;
        }
    }
    const conf = {
      'leftMin': leftMin,
      'topMin': topMin,
      'rightMax': rightMax,
      'bottomMax': bottomMax
    }
    return conf;
  }

----------


未来发展：


目前，项目一直开源，已经累积了298个star。从22年底第一次开源项目以来，受到了一些朋友的关注，也陆陆续续收到了一些反馈。未来，我还是想要继续把这个插件做下去，主要包括几个方面的发展：
1. 增加更多可用的网站
2. 增加更多功能，例如圆形裁剪、裁剪自定义留白等

-----------

因为LOGO官网代码更新，插件需要不断维护，维护成本不小。未来想要在谷歌浏览器商店上面推出插件，开放基础功能。用户可以通过一次性付费开通高级功能，并持续获得更新后的代码~~

落日惊鸿

我下载下来怎么几个元素全部挤到一起了？宽度那里测试了一下，用默认和调整到很高都是这样的

XiaoZouYu

感谢老哥分享，学习啦

jfy168

开发者不易，收费势在必行。

777444

收费，我第一个支持！

zhangxiaoxiao

感谢分享，这个方便多了

wln0546

开发者不易，收费势在必行

fantso

开发者不易

宜城小站

感谢分享
能下载还没logo好啊

Corgibro

真厉害啊，看着就感觉技术力很强

HUHU666

可以，非常不错啊！