地址

项目地址:tinypng-upload

有兴趣的可以玩一玩,因为平时经常会用到图片压缩,上传,如果你也觉得很繁琐的话,这个将会解决你的痛点。

关于 tinypng-upload

这是一个基于 electron的图片压缩上传工具,压缩过程主要通过调用tinypng提供的API完成。上传配置参考iView的文件上传配置。

因为是桌面端,所以很方便我们将图片拖拽到任务托盘进行压缩上传,极大地提升了前端的工作效率,可以让我们更专注于业务开发。

操作过程:

压缩前后体积对比(图片压缩完成已自动上传到指的CDN):

使用

1. 下载可执行文件

因为暂时没有发布到应用商店,所以需要自己编译出可执行文件:

git clone https://github.com/muwoo/tinypng-upload.git
cd tinypng-upload
npm i
npm run build

然后会在build目录下生成对应的可执行文件,运行改文件即可

2. 配置tinypng API key

因为该项目压缩过程是通过调用 tinypng API来实现的,所以我们需要去tinypng网站上注册一个API key

然后将该值粘贴到我们的配置一栏中:

只不过有一点限制,免费的每个月可以压缩 500 张图片。github 上也有人通过循环注册的过程,生成了多个账户API key达到近似于不限制压缩次数的目的。有兴趣也可以了解一下~

3. 配置压缩后图片上传请求

压缩完成之后,我们希望图片可以直接上传到我们公司的CDN上,tiny-png upload上传参考了iView的图片上传参数和设置:上传 upload

Property Decription Type Default
action Upload request URL, required. String -
headers Upload request header. Object {}
data Extra data with upload request. Object {}
name The key in upload request targeting to the file. String file
with-credentials Enable certification info in Cookie or not. Boolean false

灵感来源

之前在掘金上看了一篇关于electron图片上传的工具PicGo,很感谢作者提供的文章参考PicGo的star数破1000的心路历程

tinypng upload一键压缩上传工具,告别人肉的更多相关文章

  1. spring boot 文件上传工具类(bug 已修改)

    以前的文件上传都是之前前辈写的,现在自己来写一个,大家可以看看,有什么问题可以在评论中提出来. 写的这个文件上传是在spring boot 2.0中测试的,测试了,可以正常上传,下面贴代码 第一步:引 ...

  2. HTML5 图片本地压缩上传插件「localResizeIMG」

    移动应用中用户往往需要上传照片,但是用户上传的照片尺寸通常很大,而手机的流量却很有限,所以在上传前对图像进行压缩是很有必要的. 原生应用可以直接对文件进行处理,网页应用就没有这个优势了.不过 canv ...

  3. PHP 图片上传工具类(支持多文件上传)

    ====================ImageUploadTool======================== <?php class ImageUploadTool { private ...

  4. Html5+asp.net mvc 图片压缩上传

    在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...

  5. swfupdate flash上传工具

    引用:http://baike.baidu.com/view/1332553.htm 下载地址:http://code.google.com/p/swfupload/ 什么是SWFUpload? SW ...

  6. 小白日记20:kali渗透测试之后渗透测试阶段(一)--上传工具

    后渗透测试阶段--上传工具 为防止管理员将漏洞补上后,我们无法再通过该漏洞控制对方主机,所以需要进行后渗透测试阶段 1.上传各种工具 2.提权:为了全面控制目标系统 3.擦除攻击痕迹:防止管理员通过日 ...

  7. 文件上传工具swfupload[转]

    转至:http://zhangqgc.iteye.com/blog/906419 文件上传工具swfupload 示例: 1.JavaScript设置SWFUpload部分(与官方例子类似): var ...

  8. js 图片压缩上传(纯js的质量压缩,非长宽压缩)

    下面是大神整理的demo,很实用,这里存一下备用,感谢大神! 此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下 <!DOCTYPE ht ...

  9. H5图片压缩上传

    1.所用到技术 HTML5 API:filereader.canvas 以及 formdata 目前来说,HTML5的各种新API都在移动端的webkit上得到了较好的实现.本次使用到的FileRea ...

随机推荐

  1. Python常用模块—— Colorama模块

    简介 Python的Colorama模块,可以跨多终端,显示字体不同的颜色和背景,只需要导入colorama模块即可,不用再每次都像linux一样指定颜色. 1. 安装colorama模块 pip i ...

  2. “玲珑杯”ACM比赛 Round #18---图论你先敲完模板(DP+思维)

    题目链接 DESCRIPTION INPUT OUTPUT SAMPLE INPUT 2 3 2 3 5 7 3 10 3 5 7 SAMPLE OUTPUT 12 26 HINT 官方题解: 代码如 ...

  3. web自动化测试(java)---环境搭建

    java的测试环境搭建相较于python还简单些,只要把相关的jar包导入即可了 1.安装java 从官网下载最新的java安装程序,双击安装(java1.8) 2.下载java版的selenium的 ...

  4. Android_自适应布局

    1.屏幕相关概念1.1分辨率是指屏幕上有横竖各有多少个像素1.2屏幕尺寸指的是手机实际的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸android将屏幕大小分为四个级别(smal ...

  5. Golang标准库——io-接口

    接口 Read相关 Reader Reader接口用于包装基本的读取方法. type Reader interface { //将数据读入到p中,直到读满p或者读取的过程中遇到错误,此时返回的n< ...

  6. Java并发编程笔记之Semaphore信号量源码分析

    JUC 中 Semaphore 的使用与原理分析,Semaphore 也是 Java 中的一个同步器,与 CountDownLatch 和 CycleBarrier 不同在于它内部的计数器是递增的,那 ...

  7. leetcode — letter-combinations-of-a-phone-number

    import java.util.*; /** * Source : https://oj.leetcode.com/problems/letter-combinations-of-a-phone-n ...

  8. css3学习--select怎么去掉默认样式

    select { 2. /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ 3. border: solid 1px #000; 4. /*很关键:将默认的select选择框样式 ...

  9. Netty 超时机制及心跳程序实现

    Netty 超时机制的介绍 Netty 的超时类型 IdleState 主要分为: ALL_IDLE : 一段时间内没有数据接收或者发送 READER_IDLE : 一段时间内没有数据接收 WRITE ...

  10. asp.net MVC 5 Scaffolding多层架构代码生成向导开源项目(邀请你的参与)

    Visual Studio.net 2013 asp.net MVC 5 Scaffolding代码生成向导开源项目 提高开发效率,规范代码编写,最好的方式就是使用简单的设计模式(MVC , Repo ...