Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >PicGo 安装图片压缩插件，减少图床原图大小

PicGo 安装图片压缩插件，减少图床原图大小

zinyan.com

发布于 2023-07-13 09:03:56

发布于 2023-07-13 09:03:56

1.5K0

举报

文章被收录于专栏：zinyanzinyan

1.介绍

今天再次收到了来自OSS的费用单，当我们购买了OSS对象存储后一般都会有指定的容量。这个容量的费用在选择开通对象存储后，就进行了支付。而之后产生的费用多是流量费用。

而流量费用就和我们的图床上传的图片尺寸大小有直接关系了。

所以，当我们在写博客时通过PicGo插件实时上传图片，如果能够在上传操作前对图片进行压缩应该可以说刚需了。

那么，PicGo能不能进行压缩呢？答案是可以，有大神提供了相关压缩插件。

本篇就介绍我在Windows环境下的安装过程。

2. 安装 Compress 插件

我的本地环境和相关插件的版本

windows 11
PicGo -2.3.0
compress 1.3.6
nodejs 16.14.2

2.1 第一步-安装nodejs 16.14.2

前面的PicGo的安装这里就不进行介绍了，想了解可以参考这篇文章：阿里云OSS+Typora+PicGo 2.3.0 +Halo 实现图床搭建 (zinyan.com)

当我们在PicGo的插件设置界面中，搜索compress后，点击安装会提示

所以，从Node.js 的安装开始介绍

访问官网：Node.js (nodejs.org)

通常会有两个版本让我们选择，一个是LTS 大众稳定版本，一个是Current 最新版本。建议选择稳定版本进行安装。

Node.js 是一个基于Chrome 的V8 JavaScript引擎的 JavaScript运行库

然后会出现可选编译模板，在下面的面板中,需要选择并安装（会给我们安装 Python，Visual studio Build Tools ,Chocolatey）

如果忘记安装也可以通过下面的进行重新安装,否则我们之后执行npm命令的时候会出现Python 错误。

那么，我们安装的时候没有安装上面的模板，那么可以通过下面的命名进行安装：

node安装完毕后，我们通过命令行输入node 就能看到安装版本信息。

2.2 安装 picgo-plugin-compress 插件

重启PicGo，然后再尝试安装compress插件。（注意不要使用PicGO自带的重启应用功能，可能会出现状态错误）

我们在PicGo的插件设置中搜索compress然后点击该插件的安装按钮。

PS1：如果你发现插件列表搜索不出来任何的插件。那么很大的可能就是我们当前设备无法访问GitHub。

不能访问GitHub的话。那么插件设置功能对于你来说就没有用了。因为所有的插件都搜不到。

PS2:安装完毕后，不能访问GitHub，并不影响已将安装的插件的使用。除非你的插件本身功能需要GitHub支持

然后点击安装后，就会出现安装中的状态了。

但是，我一直安装不成功。后面就尝试npm 通过命令行的形式进行安装。

2.2.1 采用npm 安装

（采用这个方法的前提条件是我们的node已经安装才行）

第一步：我们先在PicGo的安装目录下，创建一个plugin-compress 的文件夹，效果图如下：

建立这个文件夹的主要原因就是，我们安装的插件需要手动配置到PicGo的配置文件中去。否则插件安装完毕后PicGo找不到插件。（PS：这个文件夹的位置和名称都可以自定义，我们想配置什么名称都可以。）

第二步：我们将命令行切换plugin-compress 目录下，进行安装picgo-plugin-compress

在plugin-compress目录下，执行：npm install picgo-plugin-compress --save --registry=https://registry.npm.taobao.org 示例如下：

--registry=https://registry.npm.taobao.org 其实可以不用的。这只是告诉我们从阿里云的镜像进行安装。

如果我们本地的npm配置了相关镜像，那么这个就可以省略了。如果没有错误，那么就会安装成功了。

安装完毕的插件，在本地目录下的显示如上图所示。我们这个时候如果打开PicGo的插件设置是看不到插件的。

需要我们配置该文件地址到PicGo的配置文件中，告诉PicGo有哪些插件安装了启动的时候一起加载吧。

第三步：配置插件到PicGo

PicGo的默认配置文件是在以下目录：

windows ：C:\Users\用户名\AppData\Roaming\picgo

我们在该目录下，执行以下配置：npm install "D:\Program Files\PicGo\plugin-compress"

就可以安装完毕了。

3.参考

安装过程中参考的一些资料如下：

插件测试与发布 | PicGo-Core

Node.js (nodejs.org)

安装不上去。· Issue #2 · JuZiSang/picgo-plugin-compress (github.com)

npm安装依赖包出错问题处理 - stardsd - 博客园 (cnblogs.com)

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-03-30，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 zinyan 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

jquery当中$(function() 与“$(document).ready(function(){})和 window onload的区别

马克-to-win：$(function() 与“$(document).ready(function(){})”是一样的，（二者都存在时，谁在前面谁先执行。）只不过头者是简写，二者都是document加载完就执行，不过不包括图片或视频。这一点与window.onload不一样。（no experiment support）例 1.2_b: <html> <head> <title></title> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> $(document).ready(function(){ alert("$(document).ready(function()"); }) $(function(){ alert("$(function()"); }); </script> </head> <body> <h2><a href="#">马克-towin</a>内容</h2> <h2>内容<a href="#">马克-towin</a></h2> </body> </html>

马克java社区

2021/02/01

5550

jquery当中$(function() 与“$(document).ready(function(){})和 window onload的区别

jquery当中NodeList的用法

例 1.2（NodeList.html） <html> <head> <title></title> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> window.onload = function(){ var oEle = $("h2 a"); //选出两个符合条件的 for(var i=0;i<oEle.length;i++) /*马克-to-win：注意oElements[i]虽然是个jquery对象,他也可以用innerHTML*/ oEle[i].innerHTML = "mark to win"+i.toString(); } </script> </head> <body> <h2><a href="#">马克-to-win</a>内容</h2> <h2>内容<a href="#">马克-to-win</a></h2> </body> </html> 例 1.2_a: <html> <head> <title></title> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> $(function(){ var oEle = $("h2 a"); //选出两个符合条件的 for(var i=0;i<oEle.length;i++) /*注意oElements[i]虽然是个jquery对象,他也可以用innerHTML*/ oEle[i].innerHTML = "mark to win"+i.toString(); }); </script> </head> <body> <h2><a href="#">马克-towin</a>内容</h2> <h2>内容<a href="#">马克-towin</a></h2> </body> </html>

马克java社区

2021/01/30

9050

jquery当中NodeList的用法

jquery当中toggleClass的用法

例 1.4（toggleClass.html） <html> <head> <title>toggleClass()方法</title> <style type="text/css">  </style> <script language="javascript" src="jquery.js"></script> <script language="javascript"> $(function(){ //当点击<P>标签时触发事件 $("p").click(function(){ //this表标jquery对象$("p") //点击的时候不断切换,当有qieClass样式时就去掉样式，否则添加样式。 /*通过下面的方法可以回到传统的模式*/ alert(this.firstChild.nodeValue); $(this).toggleClass("qieClass"); }); }); </script> </head> <body> <p>点击这里</p> <p>点击这里2</p> </body> </html>

马克java社区

2021/02/01

5880

jquery当中toggleClass的用法

jquery当中append的用法

例 1.5（appendhtml.html） <html> <head> <title>append()方法</title> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> $(function(){ //马克-to-win：add就是又多加了一个元素到集合当中。 $("p:eq(4)").add("p:eq(0)").append("<b>这段应出现在最后</b>"); }); </script> </head> <body> <p>这是第一行</p> <p>这是第二行</p> <p>这是第三行</p> <p>这是第四行</p> <p>马克-to-win</p> </body> </html>

马克java社区

2021/02/01

1.6K0

jquery当中append的用法

jquery如何改变多选框的值？

例 1.13（selectChangeMultiple.html） <html> <head> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> function dis(){ var mulValues = $("#num").val(); // alert(multipleValues); /*html的参数必须是个String类型*/ $("p").html(""+mulValues); } $(function(){ $("select").change(dis); }); </script> </head> <body> <p></p> <select id="num" multiple="multiple" style="height:40px;"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </body> </html>

马克java社区

2021/02/06

2.6K0

jquery如何改变多选框的值？

jquery当中如何给某个属性赋值

例 1.7（attrSet.html） <html> <head> <title>attr(name,value)方法</title> <style type="text/css">  </style> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> function DisableBack(){ //选择第2个和第3个button /*<input type="text" name='aa[]' disabled="disabled" value='11'>*/ $("button:gt(0)").attr("disabled","disabled"); } </script> </head> <body> <button οnclick="DisableBack()">第一个</button>  <button>第二个</button>  <button>第三个</button>  </body> </html>

马克java社区

2021/02/01

4.8K0

jquery当中如何给某个属性赋值

jquery当中获取某个属性值的方法

例 1.6（attr.html） <html> <head> <title>attr(name)方法</title> <style type="text/css">  </style> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> $(function(){ var sContent = $("em:eq(1)").attr("content"); //获取第二个<em>元素的title属性值 $("span").text(sContent); //将sContent的内容放在<span>标签内 }); </script> </head> <body> <p>我们马克-to-win<em content="javaC">java</em>有段时间了</p> <p>javascript<em content="javascriptC">刚学</em>所以难</p> <p>Content属性的值是：<span></span></p> </body> </html>

马克java社区

2021/02/01

4.1K0

jquery当中获取某个属性值的方法

jquery当中each type text的用法

例 1.11（each&add&[type&text.html） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script language="javascript" src="jquery.min.js"></script> </head> <body> <input value="11" /> + <input value="22" /> <input type="button" value="=" /> <label>0</label> <script type="text/javascript"> $("input[type='button']").click(function(){ var sum = 0; $("input[type='text']").each(function(){//每个都执行一遍function sum += parseInt($(this).val()); }); $('label').text(sum); }); </script> </body> </html>

马克java社区

2021/02/02

7670

jquery当中each type text的用法

jquery当中grep怎么用

例 2.3 <html> <head> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> var aAr = [1, 9, 5, 6, 3]; var aRe = $.grep(aAr,function(value,index){ return (value > 5 && index > 2); }); document.write("aAr: " + aAr + "<br>"); document.write("aRe: " + aRe); </script> </head> <body> </body> </html>

马克java社区

2021/02/08

7190

jquery当中grep怎么用

jquery当中css的用法

例 1.9 <html> <head> <title></title> <style>  </style> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> $(function(){ $("table.dl tr:odd").addClass("myrow"); var o=$("table.dl tr:even"); o.css("backgroundColor","blue"); }); </script> </head> <body> <table class="dl" > <tr> <td>马克-to-win</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> <td>35</td>

马克java社区

2021/02/02

1.5K0

jquery当中如何Set和Get文本

例 1.3（SetGetinnerHtml.html） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> </TITLE> <script src="jquery.js"></script> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <div id="info">mark</div> <INPUT TYPE="BUTTON" ONCLICK="getHTML()" value="获取"> <INPUT TYPE="BUTTON" ONCLICK="setHTML()" value="设置"> </BODY> </HTML>

马克java社区

2021/02/01

9430

jquery当中如何Set和Get文本

jquery当中mouseover和Mouseout 和mousemove的用法是什么？

例 1.12（mouseoverMouseout$Document.html） <html> <head> <title>设置opacity</title> <style type="text/css">  </style> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> $(function(){ //设置透明度，兼容性很好 $("img").mouseover(function(){ $(this).css("opacity","0.6"); }); $("img").mouseout(function(){ $(this).css("opacity","1.0"); }); /*下面头两段程序在火狐下效果完全一样，都能运行，（2在火狐下可以，3火狐不行。但ie下2不行，1，3两段在ie上是一样的），这个例子最重要的是让我看到了$(document)和document的区别。但 jquery会更兼容 */ $(document).mousemove(function(event){ $("span").text(event.clientX + ", " + event.clientY); }); // document.οnmοusemοve=function(event){ // $("span").text(event.clientX + ",, " + event.clientY); // }; /* document.οnmοusemοve=function(){ $("span").text(event.clientX + ",,， " + event.clientY); }; */ });

马克java社区

2021/02/06

1.1K0

jquery当中mouseover和Mouseout 和mousemove的用法是什么？

jquery当中bind和unbind，pageX，pageY，.screenX， screenY是怎么用的？

例 2.2（e.pageXscreenX.html） <html> <head> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> $(function(){ /*马克-to-win：和原来一样，pageX指窗口里，screenX指屏幕，所以多了一个上面的菜单。*/ $("body").bind("click", fn1 = function(e){ var posPage = "(" + e.pageX + "," + e.pageY + ")"; var posScreen = "(" + e.screenX + "," + e.screenY + ")"; $("span").html("<br>Page: " + posPage + "<br>Screen: " + posScreen); }); $("input[type=button]").click(function(){ $("body").unbind("click",fn1); //移除事件监听myFunc1 }); }); </script> </head> <body> sgkls<br> sfdgsdg<br> gf<br> fsdf<br> fgdsf<br> sdf<br> sdfdsf<br> sdfsd<br> <input type="button" value="移除事件1"> <span></span> </body> </html>

马克java社区

2021/02/08

5970

jquery当中bind和unbind，pageX，pageY，.screenX， screenY是怎么用的？

jquery Ajax的helloworld例子

例 3.5 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <script src="jquery.js"></script> <script type="text/javascript"> function check() { var txt = $("#item").val(); /* 参数： url (String): 装入页面的URL地址。 params (Map): （可选）发送到服务端的键／值对参数。 callback (Function): （可选）当数据装入完成时执行的函数. */ $.post("jqueryservlet35",{word:txt},function(data){ $("#info").html(data) }) } </script> </head> <body> <input type="text" id="item" value="鱼"> <input type="button" value="test" οnclick="check()"> <span id="info"></span> </body> </html>

马克java社区

2021/02/08

6450

jquery Ajax的helloworld例子

jQuery学习---核心函数和静态方法

编程算法腾讯云测试服务 jquery html

jQuery([selector,[context]]) 接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素,并包装成 jQuery 对象

syy

2020/05/21

1.1K0

jquery和servlet如何传递JSON数组？

例 3.7（AjaxJsonArray.jsp） <html> <head> <script src="jquery.js"></script> <script type="text/javascript"> function getP(id) { $.getJSON("jqueryservlet37", { id : id }, function(arr) { for ( var i = 0; i < arr.length; i++) { var obj = arr[i]; for ( var pro in obj) { document.getElementById(pro).innerHTML = obj[pro]; } } /* document.getElementById(pro).innerHTML = obj[pro];和下一句一样。 $("#"+pro).html(obj[pro]); */ }) } </script> </head> <body> <table width="340" border="1"> <tr> <td id="1" οnclick="getP('1')">点这1</td> <td id="2" οnclick="getP('2')">点这2</td> </tr> </table>

马克java社区

2021/02/09

1.6K0

jquery和servlet如何传递JSON数组？

jquery当中冒号选择器的用法

例 1.8（colonSelector1.html） <html> <head> <title>属性选择器</title> <style type="text/css">  </style> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> $(function(){ /*:has(selector) 匹配含有选择器所匹配的元素的元素 */ $("ul li ul li:has(a)").addClass("myCla"); }); </script> </head> <body> <ul> <li><a href="#">马克-to-win</a> <ul> <li>淘宝</li> <li><a href="#">淘宝</a>内容</li> <li><a href="#">淘宝</a>内容</li> <li><a href="c.html">淘宝</a>内容</li> </ul> </li> </ul> </body> </html>

马克java社区

2021/02/02

1.1K0

jquery当中冒号选择器的用法

文本选择window.getSelection

8.文本选择window.getSelection 例 1.8（文本选择IEFF.html) <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript"> function fun1(){ if(window.getSelection){//DOM,FF,Webkit,Chrome,IE10 alert("马克-to-win：火狐click事件包括鼠标点下和抬起两个动作，不抬起不算结束，所以可以选择文本。 window.getSelection is "+window.getSelection); selectionText = window.getSelection(); }else if(document.getSelection){//IE10 selectionText = document.getSelection(); }else if(document.selection){//IE6+10- selectionText = document.selection.createRange().text; }else{ selectionText = ""; } strlen = selectionText.toString(); alert(strlen); // alert(document.selection.createRange().text); } </script> <body> <body οnclick="fun1();"> <p>Select this textsfsadfsdafsdagfsadgsagsadgfsd</p> sdgsagsadgsafghgfhfh gsadgsaghfghfhgfhf sabhhfghgfhfghfh gsfdghf sdaggfhf gdhfghdf sdagdhg </body> </body> </html>

马克java社区

2021/01/13

8700

文本选择window.getSelection

jquery当中Ajax的基础原理是什么？

例 3.1（AjaxPrerequ1.html） <html> <head> <script> /* 马克-to-win：这个例子和jquery没任何关系。就是自己如何从头做一个jquery。the following is a json format, which can have a function as a pair. */ var $={ name:'马克-to-win', getById:function(obj){ return document.getElementById(obj); }, set:function(){ /*下面的$可以换成this,结果是一样的*/ $.getById('show').innerHTML = "哈苏大苏打靠近哈快速地结合看 "+this.name; } } </script>

马克java社区

2021/02/08

4200

jquery当中Ajax的基础原理是什么？

javascript当中mouseDown事件，mouseUp,和mouseClick执行顺序

11.mouseDown事件，mouseUp,和mouseClick执行顺序马克-to-win：下例仔细剖析了mouseDown和mouseClick的关系。当两个对象重叠在一起，（比如这里document和span），一定是先执行所有元素的mouseDown事件，之后所有元素的mouseUp,之后执行所有元素的mouseClick。（有一点切记注意，本例子测试过程中不能用alert，如用alert，down事件后不会再执行click事件了。事件就被alert打断了。）例 11.1 <html> <head> <title>根据实验，本例仔细剖析了mouseDown和mouseClick的关系。当两个对象重叠在一起，（比如这里document和span），一定是先执行所有元素的mouseDown事件，之后所有元素的mouseUp,之后执行所有元素的mouseClick</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <SCRIPT language=JavaScript> function linkClickHandler(event) { // alert(event.srcElement+"is event.srcElement"); // alert(event.target+"is event.target"); var t =event.srcElement||event.target; // alert(t.id+" qq1 "); sss2.innerHTML += t.id+" click "; } function linkDownHandler(event) { // alert(event.srcElement+"ddddddddis event.srcElement"); // alert(event.target+"is event.target"); var t =event.srcElement||event.target; // alert(t.id+" qq1 "); sss2.innerHTML += t.id+" down "; } function documClickHandler(event) { if (document.all) { }else{ // alert("event.currentTarget is "+event.currentTarget+" event.type is "+event.type+" event.eventPhase is "+event.eventPhase+"eventPhase等于3是冒泡阶段不是capture阶段"); /*Event.CAPTURING_PHASE 1 Event.AT_TARGET 2 Event.BUBBLING_PHASE*/ sss2.innerHTML += " event.type is "+event.type+" event.eventPhase is "+event.eventPhase+"eventPhase等于3是冒泡阶段不是capture阶段"+" document click ";

马克java社区

2020/12/17

1.3K0

javascript当中mouseDown事件，mouseUp,和mouseClick执行顺序

相关推荐

jquery当中$(function() 与“$(document).ready(function(){})和 window onload的区别

更多 >

马克java社区0

LV.4

马克java社区CTO

作者相关精选

换一批

目录

1.介绍

2. 安装 Compress 插件
- 2.1 第一步-安装nodejs 16.14.2
- 2.2 安装 picgo-plugin-compress 插件
- 2.2.1 采用npm 安装

3.参考

加入讨论

的问答专区 >

相关课程

一站式学习中心 >

轻量应用构建训练营

轻量应用服务器

数字化IT从业者知识体系

微信公众号在线学习平台搭建实践_《硅谷课堂》