图片base64压缩工具

这两天调试一个前端Demo，找到一个图片base64压缩工具网站，记录一下，方便以后再用时查询。
https://c.runoob.com/front-end/59
概述
图片转BASE64编码工具提供了 PNG转换Base64，GIF转换Base64，JPEG转换Data64等各种图片的格式转换,你只需拖动图片到指定区域，即可完成操作！
Base64格式

1

data:[][;charset=][;base64],

Base64 在CSS中的使用

1

.demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); }

Base64 在HTML中的使用

1

<img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />

图片base64好与坏

• 1
  弊端主要不在于 base64 编码后比原图要大，
  而是因为如果把大图片编码到 html / css 中，会造成后者体积明显增加，明显影响网页的打开速度。
  如果用外链图片的话，图片可以在页面渲染完成后继续加载，不会造成阻塞。
  如果 base64 是被编码到 css/js 中，是可以缓存的，因为 css/js 文件可以缓存。
  使用 base64 的另外一个弊端是 IE 的兼容性问题。IE 8 以下不支持 data url，IE 8 开始支持 data url，却有大小限制，32k（未测试）。
• 2
  我又要来安利 webpack 了：url-loader 可以自动根据文件大小决定要不要做成内联 base64 webpack/url-loader · GitHub
• 3
  使用base64一般会比原图要大一些，比较适合用于小图标，大一点的图片就免了…

参考链：

https://c.runoob.com/front-end/59
https://www.zhihu.com/question/31155574

这两天调试一个前端Demo，发现Demo加载有jquery且是从本地加载，疑似会影响Demo的加载效率，找了个CDN的链来加速。
记录一下，方便以后再用时查询。

https://www.bootcdn.cn/
稳定、快速、免费的前端开源项目 CDN 加速服务
关于 BootCDN
BootCDN 是 Bootstrap 中文网支持并维护的前端开源项目免费 CDN 服务，致力于为 Bootstrap、jQuery、Angular、Vuejs 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。BootCDN 所收录的开源项目主要同步于 cdnjs 仓库。
自2013年10月31日上线

环境

• 2台PC 都是 Windows10系统
• 1台PC 的 USB 连网络打印机并共享，要确认打印机已开机且已共享
• 另1台PC 添加网络打印机

在需要添加网络打印机的PC上操作如下

• 1文件共享支持
  在控制面板中找到（程序和功能）-点击右边的（打开或关闭WINDOWS功能）-下拉找到（SMB1.0/CIFS 文件共享支持）点击勾选。
• 2开启来宾账户
  同时按下微软键和R键在弹出的输入框输入gpedit.msc。在计算机配置中点击管理模板-网络-右侧的“Lanman工作站”,找到“启用不安全的来宾登录”。点击左边的已启用。
  另外，在 计算机管理 -> 系统工具 -> 本地用户组 -> 用户 -> Guest 确认未勾选账户已禁用
• 3开启下面两个服务
  接着：window +R 组合快捷键，输入 services.msc，开启“服务”；
  确认开启下面两个服务：
  Computer Browser
  Print Spooler
• 4添加
  在开始菜单中进入“设置“
  在设置菜单中选中“设备“进入
  左边选择“打印机和扫描仪“
  右边点击“添加打印机或扫描仪“自动进行搜索打印设备
  如果搜索不到，点击下面的“我需要的打印机不在列表中“
  到这一步，我们就可以选择自己的打印机位置地址，如果是共享的打印机，点选“按名称选择共享打印机“然后输入地址，或者浏览中找到连接。
  此处我输入共享打印机PC电脑的IP地址

参考链：

https://jingyan.baidu.com/article/48206aead02b57216bd6b372.html
https://blog.csdn.net/heatting/article/details/85989705
https://blog.csdn.net/elie_yang/article/details/87799550

Mac系统中的.DS_Store文件

.DS_Store是Mac OS用来存储这个文件夹的显示属性的，被作为一种通用的有关显示设置的元数据（比如图标位置等设置）为Finder、Spotlight用。所以在不经意间就会修改这个文件。
而文件共享时为了隐私关系将.DS_Store文件删除比较好，因为其中有一些信息在不经意间泄露出去。

让git忽略.DS_Store文件(Mac系统环境) 方案一：项目设置.gitignore

仅针对git的处理最naive的想法就是设置.gitignore文件。
.gitignore文件用于忽略文件，官网介绍在这里( https://git-scm.com/docs/gitignore )，规范如下：

1
2
3
4
5
6
7
8

所有空行或者以注释符号 ＃ 开头的行都会被 git 忽略，空行可以为了可读性分隔段落，# 表明注释。
第一个 / 会匹配路径的根目录，举个栗子，”/*.html”会匹配”index.html”，而不是”d/index.html”。
通配符 * 匹配任意个任意字符，? 匹配一个任意字符。需要注意的是通配符不会匹配文件路径中的 /，举个栗子，”d/*.html”会匹配”d/index.html”，但不会匹配”d/a/b/c/index.html”。
两个连续的星号 ** 有特殊含义：
    以 **/ 开头表示匹配所有的文件夹，例如 **/test.md 匹配所有的test.md文件。
    以 /** 结尾表示匹配文件夹内所有内容，例如 a/** 匹配文件夹a中所有内容。
    连续星号 ** 前后分别被 / 夹住表示匹配0或者多层文件夹，例如 a/**/b 匹配到 a/b 、a/x/b 、a/x/y/b 等。
前缀 ! 的模式表示如果前面匹配到被忽略，则重新添加回来。如果匹配到的父文件夹还是忽略状态，该文件还是保持忽略状态。如果路径名第一个字符为 ! ，则需要在前面增加 \ 进行转义。

对于一些常用的系统、工程文件的.gitignore文件可以参考这个网站进行设置，这里有很多模板。
针对.DS_Store文件，在git工程文件夹中新建.gitignore文件，在文件中设置：

1
2

.gitignore
**/.DS_Store

对于已经提交的内容，希望git能够忽略，但同时并不会删除本地文件，需要在terminal输入以下命令：

1

$ git rm -r --cached $file_path

这个方案的优点就是方便、快捷、最容易想到，缺点就是每个git项目都要重复一遍。

让git忽略.DS_Store文件(Mac系统环境) 方案二：全局设置忽略

虽然每个项目配.gitignore文件可以成功，但是每个项目都需要配，嗯，有点烦。我们可以在git的全局进行配置来忽略.DS_Store文件。
设置之前我们先看下现在的git config配置情况（git config官方文档说明）：

1

$ git config --list

实际上git配置情况可以在 ~/.gitconfig 文件中查看。

1

$ vi ~/.gitconfig

通过 :q! 退出后，我们需要建立一个文件，把需要全局忽略的文件路径写入其中。该文件起名为.gitignore_global：

1

$ touch ~/.gitignore_global

然后对这个文件进行修改。

1
2

# Mac OS
**/.DS_Store

然后对git进行全局设置，让git忽略.gitignore_global中的所有文件：

1

$ git config --global core.excludesfile ~/.gitignore_global

这样就不用每个git目录都设置忽略.DS_Store文件了！

参考链：

https://orianna-zzo.github.io/sci-tech/2018-01/mac%E4%B8%ADgit%E5%BF%BD%E7%95%A5.ds_store%E6%96%87%E4%BB%B6/

去除图片中的exif数据(在线工具)

使用地址

http://codepo8.github.io/image-data-cleaner/

开源工具源码

https://github.com/codepo8/image-data-cleaner

参考链：

https://github.com/codepo8/image-data-cleaner
http://codepo8.github.io/image-data-cleaner/