PicUploader: 一个还不错的图床工具

PicUploader: 一个还不错的图床工具

PicUploader

PicUploader-logo.png

PicUploader 是一个用php编写的图床工具,它能帮助你快速上传你的图片到云图床,并自动返回Markdown格式链接到剪贴板。配置完成后,要获取一个可用于markdown的图片外链只需要:

  • 方式一: 右击电脑本地图片→点击你的自定义上传菜单→系统通知图片上传成功→到Markdown编辑器中粘贴!
  • 方式二: 截图并点击复制到剪贴板→按上传快捷键→系统通知图片上传成功→到Markdown编辑器中粘贴!
  • 方式三: 右击网页中的图片→点击复制图片→按上传快捷键→系统弹出上传成功通知→到Markdown编辑器中粘贴!
  • 方式四: 使用网页版上传,包括拖放上传(支持多文件)、复制本地图片文件后粘贴上传、截图后粘贴上传、复制网页上的图片后粘贴上传、点击上传按钮选择图片后上传(支持多文件)。

主要功能

  • 支持Mac和Windows(也可用于Linux服务器端);
  • 支持图片压缩后上传(支持jpg/png/webp,gif/bmp不支持压缩);
  • 支持添加水印后上传(支持文字水印、图片水印、自定义水印颜色/透明度/角度/位置,支持jpg/png/bmp/webp,gif不支持水印);
  • 返回的链接可自定义(如原始链接、Markdown格式链接、可点击的Markdown格式链接、完全自定义的链接);
  • 可作为MWeb的API使用,可作为PicGo的自定义图床,可作为ShareX的自定义图床使用;
  • 支持快捷键上传剪贴板中的图片(需要配合PicUploaderHelper/Alfred使用);
  • 支持Web端拖放、粘贴、或直接选择上传图片;
  • 支持Web端设置所有参数;
  • 支持上传任意格式文件(不只是图片);
  • 目前支持16个图床:七牛云/腾讯云/网易云/百度云/阿里云/京东云/又拍云/sm.ms/Imgur/Ucloud/QingCloud/Github/Gitee(码云)/微博/Nextcloud/Cloudinary/sftp/本地服务器(即PicUploader所在服务器)。

Mac演示
Mac-demo.gif

Win10演示
Win10-demo.gif

Win7演示
demo-win7.gif

Web版演示

注册存储服务器账号

注册各个云存储的方法具体请查看:PicUploader: 各图床获取上传图片参数的方法

如果有自己的服务器,建议参考我这篇文章:使用nginx负载均衡+多个云的免费额度打造免费markdown图床

安装

下载PicUploader

方式一:使用git下载(推荐,因为方便更新):

git clone https://github.com/xiebruce/PicUploader.git

方式二: 直接下载(不推荐,因为每次更新了你都要手动下载→解压→覆盖一次)
注意下载后把它解压放到一个相对稳定一点的目录,以后最好不要移动,否则又要修改配置。

PS: 好用的话麻烦 github 给个star呀!

填写配置

方式一(推荐): 在Web端设置,请查看:
在Mac上使用Web版
在Windows上使用Web版

方式二: 手动修改配置文件(如果使用了web端配置则不需要该方式):
– 把PicUploader/config/config.php文件command+D复制一份,命名为config-local.php,然后在config-local.php中修改你的配置(你想用哪个云就配置哪个)即可。
– 如果使用sm.ms,那就不需要修改配置了,直接使用!
– 以配置七牛云存储为例,在config-local.php文件中找到以下代码,填好AK/SK/bucket/domain四个参数,如果不知道参数怎么来,请查看PicUploader: 各图床获取上传图片参数的方法

//Qiniu Cloud
'qiniu' => [
    'name' => '七牛云',
    //七牛云AppKey
    'AK' => 'ASG********************************0AoF',
    //七牛云AppSecret
    'SK' => 'Uo*********************************lkEy',
    //七牛云对象存储空间名
    'bucket' => 'markdown',
    //七牛云外链域名(域名要自己绑定,因为默认域名30天后会被回收)
    'domain' => 'http://pe5scgdex.bkt.clouddn.com',
    //七牛优化参数,直接加在链接后面,但是不会优化原图,只会优化输出的图片,如果不需要可以不配置该项(即注释掉)
    'optimize' => '?imageMogr2/thumbnail/800x/strip/quality/80',
    //存储目录,可使用年月日点位符,如 {Y}/{m}/{d},真正被解析出来的时候会被替换成当前的年月日(如 2019/05/10)
    //{Y}表示当前的年(注意Y是大写),{m}表示当前月(有前导0,即1-9月会显示成01-09),{d}会被替换为当前日期,有前导0(即1-9日会替换为01-09)
    'directory' => '',
],

注意,支持设置directory的云服务器,都可以用{Y}代表年(注意Y大写),{m}代表月,{d}代表日,例:

# 最后加斜杠是因为后面要跟着文件名,如果不加,日期将会和文件名连着。
'directory' => 'travel/{Y}/{m}/{d}/',

真正上传的时候,travel/{Y}/{m}/{d}/的值将会变成这种形式travel/2019/05/10/(即{Y}/{m}/{d}被替换成了当前的年月日)。

搜索storageType(注意是storageType,而不是storageTypes),并在=>后设置您当前要使用哪个云,如我要使用七牛云:

'storageType' => 'Qiniu',

支持同时上传到多个云,只需逗号隔开即可,比如我现在就同时上传到6个云(多个云会使用最后一个云的域名作为返回域名):

'storageType' => 'Qiniu,Tencent,Netease,Upyun,Qingcloud,Ucloud',

也许你会觉得奇怪,同时上传到那么多云干嘛?看了这篇文章你就知道了:使用nginx负载均衡+多个云的免费额度打造免费markdown图床

水印及其他配置直接参考配置文件的注释。

在macOS上使用

按下图操作

(看不清楚可点击图片放大)注意每一个需要选择的地方都不要选错,其中最后一步保存的文件名,将出现在右键菜单上,你可以自己取一个自己喜欢的名字,比如『获取Markdown外链』。
添加一个服务.gif

export LC_CTYPE="zh_CN.UTF-8"
/usr/bin/php /Users/xxxxx/www/PicUploader-master/index.php "[email protected]" | pbcopy

注意/usr/bin/php这个路径,最好在终端用which php命令来查看它的路径,确认一下是否正确,如果执行which php命令后输出的不是/usr/bin/php,则以which php命令输出的为准。

把/Users/xxxxx/www/PicUploader-master/index.php 的路径换成你自己的index.php路径,怎么看你的index.php路径呢?打开终端,把index.php文件拖到终端上,终端就会显示出它的路径。

特别注意:Mac自带php缺少freetype扩展,导致gd库处理图片的时候报错,如果你是做php开发的,那这个问题你肯定解决了,如果不是,那你需要解决这个问题,先用这下边这个命令看看有没有内容输出,如果什么都没有输出,那就确定是缺少freetype

php -i | grep configure | grep freetype

确定缺少freetype之后,如果你不用水印功能,则可以不理会,如果你要使用水印功能,请使用以下命令重装php(否则会报错),重装后,上面的/usr/bin/php请直接改成/usr/local/bin/php,不需要看which php的结果了(如果你以前没有这么安装过,安装时间可能会稍长,请保持电脑不要自动睡眠):

brew install php

该命令需要使用到brew命令,如果你不知道什么是brew并且没有安装过,请先安装:Mac安装Homebrew并更换国内镜像源

php需要安装fileinfogdcurlexifpdo_sqlitepdo_mysql这几扩展,查看php有哪些扩展的命令:

php -m

安装扩展请查看:Mac Homebrew1.5以后安装php扩展的方法

上传任意格式文件:
需要注意的是,上传非图片的其他任意格式文件时,选择的存储服务器不能是Smms/Imgur/Weibo,因为这三个本身就只接受上传图片,而其他的除了github/gitee/sftp/local外,都是对象存储,能存储任意文件,当然github/gitee/sftp/local也是可以存任意文件的。

除了视频和音频可设置返回格式外,其他格式文件都返回Markdown格式链接(与图片的Markdown链接相比只少一个感叹号),并且Web版未对图片以外的文件做处理,所以Web版目前只能上传图片。

上传试试

右击任意一张图片,最后一个按钮是不是就是你刚刚保存的Services名称?如果你电脑上没看见,是因为你电脑上超过5个这种类似的菜单,它就自动收到二级菜单下了,其实很多菜单根本用不到,你可以到系统偏好设置键盘快捷键服务(Services)里面找到对应的按钮,把它们的勾去掉就行:
Xnip2018-09-07_23-58-26.png

如果一切正常,你对着图片右击,并点击右键菜单中的获取Markdown链接后,你将会在Mac顶部工具栏那里看到一个小齿轮在转动,说明图片正在上传,当小齿轮停止转动(不需要等它消失),即说明上传已经完成,同时右上角会弹出通知,此时剪贴板已经有你上传的图片地址了,直接到markdown编辑器command+v粘贴试试吧。

为你的服务创建快捷键

系统偏好设置键盘快捷键服务(Services)→找到你的自定义菜单添加快捷键即可,添加快捷键后,假设你双手都在键盘上,用空格预览一张图后,决定把它上传,那么只要使用方向键选中它,然后直接按快捷键即可,当然喜欢用鼠标搞定的童鞋也可以不创建。
screenshot_upload_tmp.jpeg

查看上传日志

如果你搭建了Web版本,直接在Web上看,非常方便:
Xnip2019-05-01_00-59-45.jpg

否则就可能自己看日志文件了:因为在配置文件中的logPath可以配置日志显示在桌面,’logPath’ => ‘desktop’ ,所以不出意外,你的桌面装会有一个如下图所示的文件夹,这里保存了你上传的图片的Markdown外链地址,你在七牛云(或者其他服务器)是能找到对应的图片的,如果你觉得哪张图片不想要,可以在对应服务器中把它删除了。

这个日志文件也是markdown格式,所以你可以用markdown编辑器查看它,日志是倒序添加的,即最新上传的图片在最前面。

为防止一时忘了粘贴又不小心复制了其他的内容,可以使用Alfred的历史记录功能找到,当然也可以用Paste剪贴板记录软件找到。

在Windows上使用

安装php

由于phpstudy安装简单,遇到问题也有很多解决方法,所以推荐安装phpstudy,如果你已经有php环境,这一步可以略过(不过要保证开始这四个扩展php_fileinfophp_curlphp_gd2php_exif、如果你要使用网页版查看历史记录,还需要开启php_pdo_sqlite(使用sqlite3数据库保存上传历史记录,php_pdo_mysql(使用mysql保存上传历史记录)))。

进入phpstudy官网,点击下载phpstudy2018:
Xnip2019-03-26_15-44-30

解压后双击打开,它会问你要解压到哪个盘,一般默认就行:
Xnip2019-03-26_15-46-00

安装完成后,双击打开phpstudy如果提示你更新,那就更新到最新版本:
-w1024

更新完之后,如果你没有安装VC9、VC11运行库,它有可能会有以下提示(缺什么你就装什么,点击确定会自动打开phpstudy网站的下载页面,不过下载页面要微信登录并且先评论后下载):
Xnip2019-03-26_14-53-03

如下图,点击其他选项菜单PHP扩展及设置PHP扩展
Xnip2019-03-26_15-54-46

勾选php_curlphp_exifphp_fileinfophp_gd2php_pdo_sqlitephp_pdo_mysql,然后关掉即可,如果你是自己安装的php环境,也要保证有这四个扩展,设置完之后,就可以关掉phpstudy了:
Xnip2019-03-26_15-58-13

然后去你安装phpstudy的那个目录中找php在哪,假如你安装在D盘,那么请进入D:\phpStudy\PHPTutorial\php(其他盘类似),如下图找到最高版本,然后点击进入,php.exe就在里面,它就是接下来要用到的:
Xnip2019-03-26_14-59-28

另外,如果你等下准备要配置Web版,请现在就把PicUploader放到phpStudy安装目录下的以下位置D:\phpStudy\PHPTutorial\WWW\PicUploader(假设你的PhpStudy安装在D盘,反正一定要放在PhpStudy下边的WWW目录下)。

在使用微博/Imgur/Github/smms做图床时,可能会有以下报错:

Fatal error: Uncaught GuzzleHttp\Exception\RequestException: cURL error 60: SSL certificate problem: unable to get local issuer certificate (see http://curl.haxx.se/libcurl/c/libcurl-errors.html) in D:\PicUploader\vendor\guzzlehttp\guzzle\src\Handler\CurlFactory.php:186
Stack trace:
#0 D:\PicUploader\vendor\guzzlehttp\guzzle\src\Handler\CurlFactory.php(149): GuzzleHttp\Handler\CurlFactory::createRejection(Object(GuzzleHttp\Handler\EasyHandle), Array)
#1 D:\PicUploader\vendor\guzzlehttp\guzzle\src\Handler\CurlFactory.php(102): GuzzleHttp\Handler\CurlFactory::finishError(Object(GuzzleHttp\Handler\CurlHandler), Object(GuzzleHttp\Handler\EasyHandle), Object(GuzzleHttp\Handler\CurlFactory))
#2 D:\PicUploader\vendor\guzzlehttp\guzzle\src\Handler\CurlHandler.php(43): GuzzleHttp\Handler\CurlFactory::finish(Object(GuzzleHttp\Handler\CurlHandler), Object(GuzzleHttp\Handler\EasyHandle), Object(GuzzleHttp\Handler\CurlFactory))
#3 D:\PicUploader\vendor\guzzlehttp\guzzle\src\Handler\Proxy.php(28): GuzzleHttp\Handler\CurlHandler->__invo in D:\PicUploader\vendor\guzzlehttp\guzzle\src\Handler\CurlFactory.php on line 186

解决上述报错的办法,点击CA certificates extracted from Mozilla,下载cacert.pem
Xnip2019-04-01_13-17-08.jpg

把刚才下载的cacert.pem文件放到php.exe所在的目录下,并在该目录下找到php.ini,打开它,找到以下位置:

[curl]
; A default value for the CURLOPT_CAINFO option. This is required to be an
; absolute path.
;curl.cainfo =

cacert.pem的绝对路径(右击→属性→安全→复制路径)设置到curl.cainfo =选项中并把它前面的;号删除,设置完如下:

[curl]
; A default value for the CURLOPT_CAINFO option. This is required to be an
; absolute path.
curl.cainfo = "D:\phpStudy\PHPTutorial\php\php-7.2.1-nts\cacert.pem"

设置完之后就不会有这个问题了。

添加右键菜单

在PicUploader的accessorys文件夹中找到add-right-click-menu.bat,右击→点击以管理员身份运行
Xnip2019-03-26_15-39-57

点击
Xnip2019-03-26_15-40-28

把前面说到的php.exe的路径和PicUploader的index.php路径粘贴到这里,然后按y回车确定添加,最后回车退出(其中的菜单文字可以不填,不填默认是“获取Markdown链接”):
Xnip2019-03-26_15-29-49
怎么粘贴地址呢?其实win7你可以直接把文件拖过去就能自动粘贴路径,但win10我这里是没法拖动,不知道是系统问题还是所有win10都不能拖动,不能拖动,你只能右击php.exeindex.php,然后点击属性安全→然后就能看到路径,复制粘贴即可。

如果粘贴后出现以下类似乱码的字符,请把它删除:
Xnip2019-03-26_15-29-00

右键菜单文字就是创建右键菜单后,菜单上的文字,比如我写的是“上传图片”,创建后就是“上传图片”:
Xnip2019-03-26_16-06-34

现在就可以右击图片,点击上传图片试试了,正常的话它会弹出cmd黑色窗口并稍等一会儿自动消失,消失了就是图片上传完了,如果图片上传时间比较长,它停留的时间也比较长,等cmd黑色窗口消失后,就可以去粘贴了,如果粘贴出来的是报错,请自己尝试解决,如果无法解决,请在我的github上提issue。

当然了,这个菜单还是命名为“上传文件”好点,因为前面也说过了,只要你存储服务器不设置sm.ms、Imgur、微博,那么就可以上传任意格式的文件。

查看日志

Win7的话如果你配置了把日志显示在桌面,上传后,桌面就会有一个日志文件夹,Win10由于权限原因,无法给logs文件夹创建快捷方式到桌面,你必须自己发送到桌面快捷方式。
-w755

原理

其实使用add-right-click-menu.bat添加右键菜单,是往注册表添加了一个选项,win+R打开运行→输入regedit回车即可打开注册表:
Xnip2019-03-26_15-03-37

打开注册表后,找到这个路径HKEY_CLASSES_ROOT*shell,添加菜单就是往这里添加了一个目录,目录名就是菜单名,然后目录里的command有一个默认值,这个值就是调用php执行PicUploader,并把当前右击的文件路径传给它,php上传完后会输出返回的地址,然后通过管道符|输出到系统剪贴板clip,这就是为什么上传完了,你能直接去粘贴的原因:
Xnip2019-03-26_16-15-04

删除菜单

如果你重新执行添加了菜单,而且添加的菜单名和之前的不一样,那么就会出现两个菜单,此时你只要到注册表里,找到原来的菜单,右击→删除即可,如果没有出来,你可以点查看刷新
Xnip2019-03-26_15-31-04

另外由于Windows系统原因,在windows系统下你只能右击一张图片上传,不能像在Mac系统下一样可以选中多张之后,右击同时上传多张,不过好在我们平时写文章插截图都是一张一张的传,所以这个关系倒不大!

Web版-效果预览

Web端上传图片示例:支持拖拽上传、截图粘贴上传、复制图片文件粘贴上传:

使用Web端配置参数,简单直观:

在Mac上使用Web版

安装Homebrew

如果你没有安装过Homebrew,请先安装:Mac安装Homebrew并更换国内镜像源

设置默认打开方式:
(一定要做这一步,否则下边命令可能无法使用)使用文本编辑软件新建一个文件,保存成任意名字到任意地方(但要你在访达中能找到),然后找到你保存的文件,把它的后缀名修改成.conf,然后右击→显示简介打开方式,如下图,选择“文本编辑.app”为打开方式,并点击全部更改,弹出问你是否继续,点继续,这样就搞定了,这个文件是没用的,等下边的东西设置好了,就可以删掉。
Xnip2019-04-17_14-01-24

安装php

使用Homebrew安装php

brew install php

修改php-fpm运行用户和组(注意其中的7.3以后可能变成7.4,7.5,未必是7.3):

open /usr/local/etc/php/7.3/php-fpm.d/www.conf

打开后,找到以下代码位置(cmd+F搜索即可):

user = _www
group = _www

把它们修改成以下这样然后保存退出:

user = 你的用户名
group = staff

你的用户名,用whoami命令可以获取(注意当前不要是root用户,不能填root)。

启动php-fpm:

brew services start php

或者你之前启动了,那就重启:

brew services restart php

安装nginx

在终端工具下执行以下命令以安装nginx:

brew install nginx

配置nginx

修改nginx的运行用户和组

open /usr/local/etc/nginx/nginx.conf

在它的第一行应该有一个#user nobody;,把它改成:user 你的用户名 staff;,那你的用户名是什么呢?在终端运行whoami命令即可获取。
比如我的就是:

user bruce staff;

创建一个虚拟主机文件夹

mkdir /usr/local/etc/nginx/servers

在访达中打开该文件夹:

open /usr/local/etc/nginx/servers

把以下配置保存成api.picuploader.com.conf文件,注意保存的时候要把root /Users/bruce/www/personal/PicUploader;中的PicUploader路径修改成你的PicUploader所在路径,然后把保存的文件拖到到前边打开的文件夹(/usr/local/etc/nginx/servers)中:

server {
    listen 80;
    server_name api.picuploader.com;

    client_header_timeout 60s;
    client_body_timeout 60s;
    send_timeout 60s;
    keepalive_timeout  65s;

    access_log /usr/local/var/log/nginx/api.picuploader.com.error.log combined;
    error_log /usr/local/var/log/nginx/api.picuploader.com.error.log error;

    root /Users/bruce/www/personal/PicUploader;

    location / {
        index dashboard.php;
        try_files $uri $uri/ index.php$is_args$args;
    }

    location ~ \.php$ {
        fastcgi_pass 127.0.0.1:9000;
        fastcgi_index index.php;
        include fastcgi.conf;
    }
}

特别注意: 由于index.php之前已经使用,所以网页的index文件并非index.php,而是dashboard.php,所以上边的location里,一定要写index dashboard.php;,我提供的配置文件已经这么写了,也就是说你不要自己改动就行。

启动nginx

sudo brew services start nginx

打开host文件

open /etc/hosts

在文件最后添加:

127.0.0.1       api.picuploader.com

cmd+s保存后,关闭文件即可。

配置完成

上边已经配置完php+nginx,如果一切正常,浏览器访问http://api.picuploader.com就可以打开后台了。

进去之后,首先要设置你要使用的云的参数:
Xnip2019-04-21_21-06-00.jpg

然后这里选择要上传到哪些云,以及其他的一些参数,注意勾选的云必须要设置它的相应参数,否则肯定是无法上传的(sm.ms不需要设置参数就可以上传):
Xnip2019-05-20_14-43-32.jpg

配置好参数之后,就可以使用了,上传方式:

  • 1、选择文件上传,最传统的,没什么好说的;
  • 2、拖放上传,可同时拖放多张图片到上传区域,支持jpg/png/gif;
  • 3、粘贴上传,一次只能粘贴一张,即使你复制了多张,也只能粘贴一张:
        1)可以复制本地图片文件后到上传区域ctrl+v(win)或cmd+v(mac)粘贴;
        2)也可以右击网页上的图片→复制图片后到上传区域ctrl+v(win)或cmd+v(mac)粘贴;
        3)还可以截图→复制到剪贴板后在上传区域ctrl+v(win)或cmd+v(mac)粘贴;
        4)并且无论你复制的图片是jpg/png/gif格式,又或者是其他格式图片,只要用粘贴的方式上传,都会被转为一个名叫image.png的图片,这个是技术上无法左右的,这是浏览器自动将粘贴的图片转成png文件后再交给js进行处理的。

前面已经说过,在Web端粘贴上传,截图会被浏览器转成image.png再传给PicUploader,无论你是复制的图片文件(不管是jpg/png/gif),还是截图,还是网页右击复制图片,最终都会被转成image.png,并且转成的这个图片还是全分辨率的,怎么全分辨率呢?比如我的Macbook Pro,retina屏系统显示分辨率是1440×900,但retina屏是4个点一个像素(横着两个点,竖着两个点),所以浏览器把你截的图变成图片的长宽分别是1440×2和900×2,即2880×1800,这个分辨率存成的图片是比较大的,至少对一个截图来说,很大,基本上是2M多,差不多3M,以下是我在我的Mac全屏截取一个截图,用不同浏览器打开网页版并粘贴,大小如下:
Xnip2019-04-20_12-19-26
可以看到,除了Safari,其他的浏览器都差不多,Safari毕竟是苹果自家的,可能做了特殊处理。

这个差不多3M的图传给PicUploader之后,假设PicUploader设置压缩比为50%,并且png压缩等级为9,我试了压缩后是800多k,所以,直接粘贴上传的图会“略大”,当然,最终大小会与你当前的屏幕分辨率及你截图的区域多大以及你设置的压缩百分比,压缩等级有关。

注意: 使用Web版来设置配置后,config-local.phpconfig.php来会用于读取默认参数(有config-local.php时config.php无效,无config-local.php时会读取config.php)。

在远程服务器上搭建Web版

远程服务器上搭建跟在本地搭建是一样的,一般使用nginx(用前面Mac版的nginx配置文件即可),当然你也可以用Apache,反正就相当于搭建网站,唯一不同的是,你需要有自己的域名,并且把域名解析到你的服务器ip上,而在本地则是直接在hosts文件中直接指定了ip,我这里也贴一下nginx配置文件吧:

server {
    listen 80;
    server_name api.picuploader.com;

    client_header_timeout 60s;
    client_body_timeout 60s;
    send_timeout 60s;
    keepalive_timeout  65s;

    access_log /usr/local/var/log/nginx/api.picuploader.com.error.log combined;
    error_log /usr/local/var/log/nginx/api.picuploader.com.error.log error;

    root /Users/bruce/www/personal/PicUploader;

    location / {
        index dashboard.php;
        try_files $uri $uri/ index.php$is_args$args;
    }

    location ~ \.php$ {
        fastcgi_pass 127.0.0.1:9000;
        fastcgi_index index.php;
        include fastcgi.conf;
    }
}

特别注意: 由于index.php之前已经使用,所以网页的index文件并非index.php,而是dashboard.php,所以上边的location里,一定要写index dashboard.php;,我提供的配置文件已经这么写了,也就是说你不要自己改动就行。

你要注意的是“access_log”、“error_log”、“root”这些路径填你自己电脑/服务器上的路径,并且注意“fastcgi_pass”参数,如果你是监听的socket,那就改成监听socket就行,例如fastcgi_pass unix:/dev/shm/php-cgi.sock;,当然你别照抄我的,你的sock文件名和路径可能跟我的都不一样。

注意: 要特别注意权限问题,要求php能在PicUploader目录创建文件夹/文件,只要做到PicUploader的所属用户与php-fpmnginx的运行用户相同即可,这个在在Mac上使用Web版里讲的很清楚,一般来讲,我们习惯用www用户及www用户组来作为nginx以及php-fpm的用户及用户组,修改配置文件后,不要忘了重启nginx和php-fpm。

PicUploader的所有者也必须属于www用户和www组,设置PicUploader的所有者:

sudo chown -R www:www ./PicUploader

当然这个www用户必须存在,而且一般来说这个用户最好是“不能用于登录”的用户,创建非登录用户请看 Linux创建用于执行程序的非登录用户

这个用户和用户组也未必要叫www,只要nginx/php-fpm/PicUploader三者对应同一个用户和用户组,并且你指定的用户和用户组确实是存在的就行。

另外由于没有做登录功能,为防止别人可以随意访问页面,请使用nginx做HTTP的密码认证即可:Nginx添加密码认证

在Windows上使用Web版

1、先下载安装PhpStudy,之前在 在Windows上使用 中有讲过PhpStudy的安装,我的PhpStudy安装在D:\phpStudy,下面将以这个位置为例。

2、把整个PicUploader的代码放到D:\phpStudy\PHPTutorial\WWW目录下(如果你之前已经配置过右键菜单,那么又要删掉重新配置了,因为位置移动了)。

3、进入D:\phpStudy\PHPTutorial\Apache\conf目录,找到vhosts.conf文件:
-w676

4、打开上边找到的vhosts.conf, 在它原来代码下边空一行,把下边代码加进去(注意如果你的安装目录不一样,DocumentRoot的目录要修改成你的目录):

<VirtualHost *:80>
    DocumentRoot "D:\phpStudy\PHPTutorial\WWW\PicUploader"
    ServerName api.picuploader.com
    DirectoryIndex dashboard.php
    ErrorLog "logs/api.picuploader.com-error.log"
    CustomLog "logs/api.picuploader.com-access.log" common
</VirtualHost>

再重复一遍,PicUploader整个文件夹必须放在PhpStudy的WWW目录下。

5、打开PhpStudy,点击切换版本,选择最新版本的php+Apache:
-w600

6、点击启动重启,只要运行状态里,Apache右边那个点保持绿色那就说明它在正常运行:
-w389

7、进入C:\Windows\System32\drivers\etc目录,找到hosts文件,在它里面的内容最后添加下边这句:

127.0.0.1       api.picuploader.com

对于win10,直接修改hosts文件是修改不了的,需要用有管理员权限的记事本打开:右击开始菜单→点击“Windows Powershell (管理员)”→在powershell中输入notepad回车→此时记事本已打开→点击文件→打开→进入C:\Windows\System32\drivers\etc目录→右下角选择“所有文件”→选择打开hosts文件→此时编辑保存就不会提示没权限了。

8、浏览器打开http://api.picuploader.com试试看,如果一切正常,现在你已经能进PicUploader的页面了。

作为发布接口

作为MWeb的发布图片接口

先来看个demo:
Web版演示

MWeb一样要使用前边配置好的nginx(或apache)服务器,点击mweb的偏好设置→发布(publishing)→点击右边最下面一个自定义(custom)
Xnip2019-04-29_00-35-52.jpg

按下图填写:
Xnip2019-04-29_00-34-50.jpg

注意,如果你把PicUploader部署在远程服务器上,一定要做Nginx添加密码认证,然后在本地浏览器上访问你的域名,这时会弹出让你输入账号密码的窗口,输入之后,打开浏览器控制台(右击→审查元素),按下图找到Authorization这一行:
Xnip2019-04-28_23-49-10.jpg

前面的Api URL什么的跟前面的填写方法一样,主要是下边那里,要添加一个字段,再把前面浏览器里找到的Authorization及它的值填进去,然后点Ok即可:
Xnip2019-04-28_23-50-55.jpg

写好文章后,点击顶部菜单栏中的的发布(publish)或编辑器右上角的分享按钮→上传本地图片到…(Upload Local Images to…):
Xnip2019-01-12_21-38-34.jpg

如下图,点击Upload Images:
Xnip2019-01-12_21-38-34.jpg

上传完成后,即会出现地址图片地址,你可以点New Document建立一篇新文章,该文章就是你写的这篇文章,只不过图片全部被替换为线上地址了。

我一般是把New Document里的文章全选复制,然后关闭New Document的文章,再把文章内容全部替换回原来的文章中。

作为PicGo的自定义图床

在PicGo的插件设置里,搜索“web-uploader”即会出来“web-uploader”插件,点击安装即可:
Xnip2019-07-01_23-38-10.jpg

填参数,设置参数后点击确定,并设置为默认图床:
url:假设你配置的nginx或apache域名为http://api.picuploader.com,则下边的url就填http://api.picuploader.com/index.php
paramName:固定填picgo
jsonPath:固定填data.url
Xnip2019-07-01_23-40-05.jpg
customHeader:如果你把PicUploader部署在远程服务器上,一定要做Nginx添加密码认证,然后这里的customHeader就要传“authorization”参数,它的格式是标准json格式(如下所示):

{"authorization":"Basic eGllYnJ1XUSKIlheXUzNTc1NjI="}

其中“Basic”后面那一串值从哪来呢?请参考作为MWeb的发布图片接口
customBody:这个是向post请求的body传参的,也是标准json格式,目前这里用不到,留空就行。

最后,右击顶部菜单栏的PicGo图标(Mac版),选择使用“自定义web图床”为默认图床(win也有对应的地方,我就不截图了):
screenshot.jpeg
这样PicGo就会通过PicUploader来上传图片了。

作为ShareX的自定义图床

作为自定义图床,其实就是提供上传API,凡是提供上传API你都要自己搭建服务,用nginx可以,用apache也可以,具体见:在Windows上使用Web版

先看演示:
sharex-customize-upload-demo_optimized_optimized.gif

如下图所示,在sharex中点击DestinationsCustom Uploader Settings...
Xnip2019-04-29_01-10-54.jpg

按下图操作(其中Headers→authorization的值参考作为MWeb的发布图片接口):
Xnip2019-04-29_01-03-20.jpg

response(上传完成返回的格式)这里,看你自己要什么格式,直接填这个![$json:data.filename$]($json:data.url$)就是markdown格式,主要知道$json:data.url$变量是上传后返回的链接,$json:data.filename$变量是原始文件名:
Xnip2019-04-29_01-08-53.jpg

设置完之后,图片上传选择自定义接口:
Xnip2019-04-29_01-16-11.jpg

文件上传也选择自定义接口:
Xnip2019-04-29_01-16-48.jpg

Mac系统使用快捷键上传方式一

先看效果

Mac-shortcut-upload-demo.gif

安装python依赖

如果你电脑没安装过python,请先看Mac同时安装python2.7和python3
由于该助手使用python编写,需要用到pynput(用于监听快捷键)和Pillow(用于获取图片)两个模块,所以需要先安装这两个模块:

pip install pynput
pip install Pillow

本插件需要使用python3,如果你电脑中安装了python2.7和python3两个版本,要注意pip是对应的哪个版本,用pip -V即可查看,一般根据安装方式的不同有可能是“pip”和“pip3”(此时pip就是pip2.7),也有可能是“pip”和“pip2”(此时pip就是pip3)。

使用PicUploaderHelper

PicUploaderHelper就在PicUploader的accessorys/PicUploaderHelper文件夹中,该文件夹中有以下几个文件:

├── PicUploaderHelper.py    # 助手主程序
├── config.json             # Mac版配置文件
├── config_win.json         # Win版配置文件
├── generatesh.sh           # Mac版用于生成启动脚本的脚本
└── notification.ps1        # Win版用于系统通知的powershell脚本

在终端工具中进入PicUploaderHelper文件夹,执行:

chmod u+x generatesh.sh && ./generatesh.sh

注意:如果你后面想移动该文件夹到别处,那么需要重新执行./generatesh.sh重新生成启动脚本,原来的不用删除,会自动覆盖,但建议直接保持在原位不要移动。

根据提示输入python3的可执行命令(可以先用python -Vpython3 -V,看显示的版本,哪个是python3就输入哪个),回车即可生成开机启动文件PicUploaderHelper-start.sh,然后右击它→选择显示简介→设置打开方式为iTerm(或其他你自己习惯用的终端工具都行),但不要点击“全部更改”,因为没必要。
sharex-customize-upload-demo.gif

注意,如果你想使用系统自带终端为默认打开方式也可以,但是默认没的选,你要选择其他:
Xnip2019-03-25_00-08-47

然后在启用里面选择“所有应用程序”,这样才能选择自带的“终端”,否则是灰色的选不了:
Xnip2019-03-25_00-07-39

但用自带终端有一个问题,开机启动后,它会自动打开这个终端并启动PicUploaderHelper,而且启动后它会一直停留在那里,不会自动关闭,你需要手动装它关闭,而iTerm2会自动关闭窗口:
Xnip2019-03-24_23-55-55

配置文件解析

{
    "img_type": "JPEG",
    "php_path": "/usr/local/bin/php",
    "picuploader_index_path": "/Users/bruce/www/personal/PicUploader/index.php",
    "notification": {
        "success": {
            "title": "Upload image succeed",
            "subtitle": "",
            "message": "Markdown link is copied to the cliboard, you can paste now!"
        },
        "no_image": {
            "title": "No image detected",
            "subtitle": "",
            "message": "No image was detected in the clipboard, please take a screenshot first!"
        }
    },
    "key_combinations": [
        ["cmd", "shift", "u"]
    ],
    "debug": 0
}

按以下解释,修改你自己的配置,主要是php_pathpicuploader_index_path要修改,其他的一般不需要修改,当然你也可以改。

  • img_type:两个可选值JPEGPNG(不能写其他格式),这将决定你最终上传的图片的格式为.png还是.jpeg
  • php_path:php可执行文件路径,使用which php命令可获得,并修改成你自己的路径。
  • picuploader_index_path:PicUploader的入口文件index.php的路径,这个路径要修改成你自己的路径。
  • notification:通知消息,分为上传成功和未检测到剪贴板有图片两个通知,你可以修改里面的title、subtitle、message为你自己想要的。
  • key_combinations:快捷键,使用数组方式指定,像上边默认的就是cmd+shift+u,每一组快捷键都用中括号括住(其实就是python的列表),特别注意,如果你的快捷键用到了alt,那会比较不一样,alt+ctrl目前由于使用的pynput原因无法使用,假设你要设置alt+shift+u,配置文件里不能直接写u,而是你要直接按住alt+shift,再按u,它出来什么符号就是什么符号,不要手工修改它,另外如果出来的符号带“\x”的快捷键不可用而且会导致报错,如果出来的符号带<数字>这样的也不可用,你可以在配置文件设置debug为1(开启debug模式),这样即可在与PicUploaderHelper.py文件同目录下生成一个key_log.txt文件,该文件会记录下你按下的每一个键最终识别出来的都是什么。为了方便查看,你可以新开一个终端窗口,使用以下命令监控key_log.txt的变化:
tail -f -n 5 key_log.txt

几个按键的写法(左侧为原按键,右侧为定义快捷键的写法):

左shift => shift
右shift => shift_r
左option => alt
右option => alt_r
左command => cmd
右command => cmd_r
左control => ctrl

debug:两个值0或1,0为关闭调试模式,1为开启调试模式

运行PicUploaderHelper

如果你有Alfred,强烈推荐使用方式二,使用方式二就不需要启动PicUploaderHelper后台进程了。

运行前,要把运行终端比如iTerm2(或者你自己习惯用的其它终端工具)加入到系统偏好设置安装与隐私辅助功能里面,注意,你设置了“PicUploaderHelper-start.sh”文件使用哪个终端打开,就把哪个终端加入到系统的辅助功能里。
运行: 先在iTerm2用sudo -s切换到root,把PicUploaderHelper-start.sh拖动到iTerm2中,回车运行即可,当然你也可以进入它所在的文件夹中然后用sudo ./PicUploaderHelper-start.sh来运行(重复运行会先杀死原有进程并启动新进程,此时进程id会改变)。

关闭: 先查找进程id号

ps aux | grep -v "grep" | grep PicUploaderHelper

然后使用以下命令关闭:

kill -9 进程id号

测试: 先不要截图,直接按上传快捷键,正常会弹出通知告诉你剪贴板未检测到图片(前面配置文件解析也说了,这个提示文字你可以自己在配置里修改):
-w343

上传图片: 然后你就可以截图→按快捷键上传了,注意截图的时候要“复制到剪贴板”而不是保存文件,如果你保存成文件,那你还得用右击图片的方式上传。

加入开机启动: 本来macOS的服务类型的程序开机启动最好用launchctl的或者直接把它转成app程序的,但由于系统限制原因,目前用launchctl虽然能正常启动,但是无法响应快捷键,而转成app程序运行的时候会报错,目前我还转不了,所以使用开机登录项来做开机启动(当然如果你不嫌麻烦,可以不做这个开启启动,只要开机后自己sudo ./PicUploaderHelper-start.sh运行即可):
Xnip2019-03-23_06-43-38

注意,当你关机了,下次你开机的时候,如果你设置的是用iTerm2打开启动脚本,它会弹出以下提示,那个选项是不要提示的意思,把它勾上就行:
Xnip2019-03-23_02-25-26

把它勾上之后,再下次开机登录后,iTerm2会自动打开闪一下又关闭,其实它就是在启动PicUploaderHelper(但如果是自带的终端,就会一直显示,要你手动关闭)。

原理

后台运行PicUploaderHelper,PicUploaderHelper会监听全局快捷键,当按下快捷键时,PicUploaderHelper会检测剪贴板中是否存在图片:
1、如果不存在,它会弹出一个通知(调用applescript来实现),告诉你未检测到图片,没有图片的通知消息具体内容可由配置文件中的no_image部分自定义。
2、如果有图片,PicUploaderHelper会把剪贴板中的图片生成一个文件保存到与PicUploaderHelper.py同级目录中,文件名为.screenshot.xxx(由于是.开头所以是隐藏文件),xxx是图片类型,由配置文件中的img_type指定,img_type只能指定两种类型,一种是PNG,一种是JPEG。图片保存后,即会调用PicUploader来上传,上传完成会弹出通知,弹出通知后markdown格式地址已经在剪贴板,直接去粘贴即可。要把它保存成图片的原因,是因为PicUploader的所有代码都是需要指定图片文件路径的(包括所使用的对象存储的接口都是传图片路径的)。

错误解决:按快捷键没反应

1、查看进程是否启动

ps aux | grep -v "grep" | grep PicUploaderHelper

2、如果未启动则再次执行以下命令启动:

sudo ./PicUploaderHelper-start.sh

如果无法启动,则查看“PicUploaderHelper”文件夹下的“PicUploaderHelper.log”看有没有报错,如果有报错无法解决,可以提issue

3、如果已启动,查看是否把iTerm2加入到了系统偏好设置安装与隐私辅助功能?如果没有,请添加。而且要注意,添加到辅助功能里的终端,要跟PicUploaderHelper-start.sh设置的开打方式那个终端一致,所以,如果你用的不是iTerm2,而是系统自带的终端,又或者是其他的终端工具,就要注意这两个地方对应一下。

4、如果启动了还是不行,请修改配置文件中的debug值由0改为1(后边是没有逗号的,千万别加逗号),表示开启调试模式:

"debug": 1

再次使用sudo ./PicUploaderHelper-start.sh重启进程,然后你会看到PicUploaderHelper目录下会有一个key_log.txt,在终端中执行:

tail -f -n 5 ./key_log.txt

此时不管你按了什么按键,都会输出来,这样你就可以测试了,如果看到输出的是\x开头的,或者<数字>这样的,那就说明设置的快捷键有问题,也就是说不能使用你当前设置的快捷键,要换一个试试,control+c退出,调试好之后,记得把debug关掉再重新启动。

Mac系统使用快捷键上传方式二(配合Alfred)

如果是Mac,推荐使用这种方法,因为这种方式不需要上传完成后再粘贴,按快捷键上传完成后会自动把返回的链接粘贴到编辑器中。

config.json的配置都按方式一做,只不过不需要运行PicUploaderHelper,而是使用Alfred来监听快捷键,而Python可以装也可以不装,不装的话就要安装pngpaste,下边会说到。

进入PicUploader的accessorys/PicUploaderHelper文件夹,找到PicUploaderHelper.alfredworkflow,双击它即会自动用Alfred打开,如下图所示,点击import导入:
Xnip2019-04-21_21-13-25.jpg

导入后界面如下图所示,然后我们双击下图所示的第一个图标(用于添加快捷键):
Xnip2019-04-21_21-15-30.jpg

上一步双击第一个图标后,来到这个界面,鼠标选中HotKey输入框,但注意这里不是让你输入的,而是直接录制快捷键的,你直接按你想要上传图片的快捷键,它会自动录下来,下边的参数都不用改,点击保存即可(下次如果想修改快捷键,还是用这种办法):
Xnip2019-04-21_21-15-02.jpg

双击第二个图标:
Xnip2019-04-21_21-20-55.jpg

来到这个界面,我们要做的就是修改这一段代码:
Xnip2019-04-21_21-19-34.jpg

这段代码有两种写法,一是使用php,二是使用python,PHP的写法:

/usr/local/bin/php /Users/bruce/www/personal/PicUploader/index.php --type=alfred
  • 其中/usr/local/bin/php是php可执行文件路径,要改成你电脑上php可执行文件的路径,如果你是brew安装的,那么就是/usr/local/bin/php
  • 而中间那一段,其实就是PicUploader的入口文件index.php的绝对路径;
  • 最后一段--type=alfred是固定这么写,不需要改。

用php的写法,你需要安装pngpaste

brew install pngpaste

python的写法:

/usr/local/bin/python3 /Users/bruce/www/personal/PicUploader/accessorys/PicUploaderHelper/PicUploaderHelper.py --type=alfred

它也有三部分,第一部分是python3的路径,第二部分是PicUploaderHelper.py的路径,第三部分是参数,固定为--type=alfred,三部分之间用一个空格隔开,你要把你电脑上对应的路径填进去然后保存后就可以关掉了。

用python的写法,你要把方式一中说的,把python3,以及python插件pynputPillow安装上。

然后就可以使用了,使用任意截图工具截一个图到剪贴板,直接在编辑器要粘贴图片的地方按下刚刚在Alfred设置的快捷键,稍等片刻,返回的markdown格式外链即会自动粘贴到编辑器中,同时系统会通知上传成功。

其实把返回的链接自动粘贴到编辑器中是Alfred的功能:
screenshot.jpeg

Windows系统使用快捷键上传

先看效果

Win10快捷键上传演示
windows10-shortcut-upload.gif

Win7快捷键上传演示
windows7-shortcut-upload.gif

安装python3

打开Python官网,点击下载最新版Python:
Xnip2019-03-27_01-29-36

往下滚动,找到以下界面,点击下载Windows x86-64 executable installer
-w1216

下载后双击安装(先勾选Add Python 3.7 to PATH,然后点击第一个安装):
-w1141

安装完成后,右击左下角的开始菜单→点击Windows PowerShell(管理员)(A)
-w314

选择即可打开PowerShell界面:
-w454

执行以下命令安装pynput模块(用于监听快捷键):

pip install pynput

执行以下命令安装Pillow模块(用于获取剪贴板中的截图):

pip install Pillow

使用PicUploaderHelper

PicUploaderHelper就在PicUploader的accessorys/PicUploaderHelper文件夹中,该文件夹中有以下几个文件:

├── PicUploaderHelper.py    # 助手主程序
├── config.json             # Mac版配置文件
├── config_win.json         # Win版配置文件
├── generatesh.sh           # Mac版用于生成启动脚本的脚本
└── notification.ps1        # Win版用于系统通知的powershell脚本

配置文件解析

{
    "img_type": "JPEG",
    "php_path": "D:\\phpStudy\\PHPTutorial\\php\\php-7.2.1-nts\\php.exe",
    "picuploader_index_path": "D:\\phpStudy\\PHPTutorial\WWW\\PicUploader\\index.php",
    "notification": {
        "success": {
            "title": "Upload image succeed",
            "subtitle": "",
            "message": "Markdown link is copied to the cliboard, you can paste now!"
        },
        "no_image": {
            "title": "No image detected",
            "subtitle": "",
            "message": "No image was detected in the clipboard, please take a screenshot first!"
        }
    },
    "key_combinations": [
        ["ctrl_l", "shift", "u"]
    ],
    "debug": 0
}

按以下解释,修改你自己的配置,主要是php_pathpicuploader_index_path要修改,其他的一般不需要修改,当然你也可以改。

  • img_type:两个可选值JPEGPNG(不能写其他格式),这将决定你最终上传的图片的格式为.png还是.jpeg
  • php_path:php.exe文件路径,要修改成你自己的php.exe。
  • picuploader_index_path:PicUploader的入口文件index.php的路径,这个路径要修改成你自己的路径。
  • php_pathpicuploader_index_path路径的获取,请参考:添加右键菜单,但这里不同的是,路径中的每个反斜杠都要再加一个反斜杠来取消转义,否则无法启动。
  • notification:通知消息,分为上传成功和未检测到剪贴板有图片两个通知,你可以修改里面的title、message为你自己想要的,subtitle在这里没有用处,为了和mac版统一,没有删除。
  • key_combinations:快捷键,使用数组方式指定,像上边默认的就是ctrl_l+shift+u,每一组快捷键都用中括号括住(其实就是python的列表)。
  • debug:两个值0或1,0为关闭调试模式,1为开启调试模式,打开调试模式可以在当前目录下的key_log.txt中查看到你按了哪些键,按的这个键的键值是多少。

几个按键的写法:

左shift:shift
右shift:shift_r
左ctrl:ctrl_l
右ctrl:ctrl_r
左alt:alt_l
右alt:alt_r

启动试试

首先把PicUploaderHelper.py修改后缀成PicUploaderHelper.pyw(加一个w)。

然后对于win10,正常情况下双击PicUploaderHelper.pyw即可启动,默认快捷键ctrl_l+shift+u,“ctrl_l”中的l表示left,即左侧的ctrl键(按右侧的ctrl键无效)。

启动后,可打开任务管理器,找到Python就是该助手了,要关闭就右击→结束任务即可,如果修改了配置文件,要先关闭再打开,就用这个方法:
Xnip2019-03-27_01-53-40

Win7上则叫pythonw.exe:
Xnip2019-03-27_02-23-34

对于win7,第一次双击应该是启动不了,你得选给它配置一个打开方式:右击PicUploaderHelper.pyw属性打开方式→选择以下路径的pythonw为打开方式(注意不要直接复制,bruce是我的用户名,要换成你的用户名):

C:\Users\bruce\AppData\Local\Programs\Python\Python37\pythonw.exe

加入开机启动

确定能运行操作正常后,加入开机启动,能让你在重启或者关机后下次开机能自动后台启动。

右击PicUploaderHelper.pyw→点击创建快捷方式,即可得到一个PicUploaderHelper.pyw - 快捷方式,重命名一下,把- 快捷方式删除,变成像下图这样:
-w484

Win+R打开运行窗口,输入shell:startup回车,即可打开自启动窗口,把刚才创建的快捷方式拖入自启动窗口中即可(注意,两个文件名完全一样,图标有个小箭头的是快捷方式):
-w513

为了测试开机是否能启动,你可以重启试试,当然也可以等下次开机再说。

其他

更新后有问题如何解决

  • 1、对比config.php与config-local.php,有可能config.php中有新的配置而你config-local.php中的配置还是原来的,那肯定会有问题。
  • 2、如果你用了Web版配置,出现问题首先也要把config-local.php与config.php的配置对应,然后删除config/.config.json文件和config/.settings/general-settings.json这两个配置,然后刷新配置后台页面后,再试试,一般都可以解决!

关于压缩

原压缩选项imgWidth即将废弃,建议使用新的压缩选项resizeOptions,当这两个选项同时存储的情况下会使用resizeOptions选项,此时imgWidth选项无效。

不做Gif图压缩及添加水印的原因: Gif图原理是多张静态图片组成的,如果要压缩或添加水印,其实就是把它的多张图片压缩添加水印后再重新合成gif,这个过程其实是比较慢的,特别是图片大的时候就更慢,所以为了快速上传,我建议你自己压缩后再来上传,对于Mac,其实有个比较简单的压缩方式。

Mac压缩gif图的方法

安装imagemagick

brew install imagemagick

下载optgif.zip,解压后给它添加执行权限:

chmod u+x ./optgif.sh

把它移动到/usr/local/bin

mv ./optgif.sh /usr/local/bin

~/.bashrc~/.zshrc中添加alias:

alias optgif=optgif.sh

重新读取初始化配置文件:

source ~/.bashrc

或者你用zsh的话就是

source ~/.zshrc

转换单个gif文件:

optgif xxxxxx.gif

转换多个gif文件(空格格开):

optgif aaaa.gif bbbb.gif ccc.gif

转换指定目录中的所有gif文件:

optgif testfolder/*

转换后的文件位置与源文件所在位置相同,文件名多了一个_optimized

转换原理: 利用imagemagick的convert命令进行优化压缩:

convert test.gif -layers Optimize result.gif

Windows上应该也有的,不过我没试过。

Mac压缩mp4视频的方法

使用ffmpeg压缩,ffmpeg非常强大,应该可以做任何视频相关的操作,我这里只说最简单的压缩:

ffmpeg -i 被压缩视频.mp4 压缩后的视频.mp4

这样我11.9M的视频压缩成2.9M,也是挺厉害的,其他复杂的操作可以自己上网查。

如果你用的是七牛云,则返回的图片地址中『?imageMogr2/thumbnail/800x/strip/quality/80』这部分是七牛云的压缩参数(如果你配置了的话),也就是说这部分参数你可以去掉直接查看你上传的图,其中thumbnail/800x表示设置宽度为800,strip表示去除一些exif信息以减小图片大小,quality/80表示设置图片质量为原来的80%,其实还可以在最后加个/format/webp这样图片加载会快很多,因为webp能在最大程度还原图片清晰度的同时把图片体积降到最小。

关于Nextcloud

nextcloud为自建云网盘,并非对象存储,根据我目前的了解,NextCloud并不支持递归创建文件夹,也就是说,上传创建一个文件,如果要带路径,那么路径中的文件夹必须已经存在,如果不存在则要先创建,而文件夹创建一样不支持递归创建,所以得一级一级创建,并且创建之前我还得知道这个文件夹是否存在,所以Nextcloud上传文件,程序的实际步骤为:
– (请求一次接口)从服务器拉取现有文件列表,可指定深度,比如指定5级深度,则/a/b/c/d/e/f中的f是不会被列出来的,文件列表是递归列出的,比如有一个文件在/a/b/c/test.jpg,则列出的文件列表为:

/a/
/a/b/
/a/b/c/
/a/b/c/test.jpg

我得把要上传的文件路径,与这个列表比对,看看要上传的文件夹是否存在,如果不存在,我必须从父到子挨个创建,比如上面说的就要调用三次创建目录接口,一次文件上传接口。

上传完后并不会给你返回分享链接,因为它本身是一个网盘,要获取公共访问链接,还要请求接口,把它设置为公共分享,它才会返回分享的链接。

所以,往Nextcloud上传文件,假设上传的目录存在的情况下,要请求的接口次数为:获取文件列表一次+上传文件一次+设置公共分享一次=3次,而如果文件要上传的目标文件夹不存在,又要看文件夹哪几层不存在,假设有三层,三层都不存在,那创建文件夹就要请求3次,加上前边固定的3次那就是请求6次,所以上传会比较慢,毕竟一直在重复请求接口,建议不要自动创建文件夹了,这样就只要请求3次接口就可以获得链接了。

安装管理工具

因为图片上传到七牛云后,在七牛的后台实在无法直观的浏览和管理图片,如果你希望方便管理你的图片,可以下载两款谷歌浏览器插件:

qiniu upload files 用来管理七牛云上的图片

七牛云图床 一款可以让你直接上传图片到七牛云的工具,但是它没有分文件夹。

腾讯COS官方MacOS客户端:点击前往下载

百度BOS官方MasOS客户端:点击前往下载

如果是又拍云,因为又拍云没有网页管理工具,只能自己用ftp工具查看。

上传完成无法弹出通知问题

一般情况下,上传完成后右上角就会弹出通知,如果你没有弹出,有可能是因为系统没更新的问题,像我的系统版本一直是10.13.1,我的就不弹,但是我让别人试就会弹(后来我更新10.14(Mojave)系统后,就能正常弹出提示了)。

如果你的系统也没更新,那有可能也不会弹通知,那就只能看工具栏上的小齿轮,小齿轮停止转动说明上传完成(不需要等小齿轮消失,停止转动即已完成),然后就可以去markdown编辑器粘贴了。

说个不幸的消息

七牛云默认域名是测试域名,只能使用30天,30天后该域名会被回收,所以你需要绑定自己的域名,但绑定自己的域名需要域名已经备案,而域名备案是跟网站一块的,就是说如果你只买了域名没有自己的网站的话,是无法备案的,这时你可以看看有没有朋友有已备案的域名,叫他给你解析一个二级域名也行,因为一个人一般只用一两个二级域名,所以会有很多二级域名可用的。

又拍云也提供默认测试域名,不过我问过又拍客服,又拍云的测试域名是不会回收的,也就是你可以一直使用,不需要有自己已备案的域名,但缺点是,又拍云的默认域名提供的cdn服务器比较少,也就是说,你用又拍云默认的域名可能加载图片会比较慢,所以也是建议你绑定自己的域名,当然了,又拍云绑定自己的域名,同样要求域名已备案,国内所有云都有这个要求!

其他域名都不会回收,所以如果没有自己的网站(没有网站有域名也没用,因为域名必须备案,没有网站是无法单独给域名备案的),用七牛做云存储其实可以首先排除了!

更新日志

2019-07-7 v2.7.8版本
– 添加对Cloudinary的支持
– 添加对svg图片的支持
– 添加:批量删除上传历史记录
– 添加:输入页码后可回车跳转
– 添加:直接按左/右方向键可上一页/下一页
– 优化:删除时先用颜色显示删除的是哪一行(之前看不出是否删除了)
– 修复:作为Mweb接口上传时每次上传一两张图片就开始报错
– 修复:历史记录页面跳转页码一直是第一页

2019-05-15 v2.7.7版本
– 历史记录添加按原始文件名、url、日期搜索功能

2019-05-12 v2.7.6版本
– 添加支持上传到本地(PicUploader所在服务器)
– 添加支持directory可用点位符表示当前年月日,{Y}表示年,{m}表示月,{d}表示日。

2019-05-10 v2.7.5版本
– 添加上传时可直接修改目录(Web版),无需到每个云服务器配置中修改
– 修改上一个版本的各种小bug

2019-04-30 v2.7.4版本
– 添加查看历史记录页面(以前只有日志)
– 添加支持码云作为图床

2019-04-23 v2.7.3版本
– 新增支持自建云图床nextcloud

2019-04-22 v2.7.2版本
– 添加支持Alfred Workflow方式快捷键上传截图
– 合并Mac/Win版PicUploaderHelper
– 添加支持sftp协议上传到个人服务器
– bug修复

2019-04-20 v2.7.1版本
– 优化Web版上传体验并支持多文件上传(拖放和选择文件可支持多文件)
– 去除上传媒体类型限制,只要云存储支持,你可以上传任意格式的文件
– 修复无法压缩的bug
– 支持作为PicGo的第三方图床接口

2019-04-16 v2.7版本
– 新增web界面,可在界面上设置参数,可以web界面上拖拽传图、复制图片文件后在上面直接粘贴传图、截图复制到剪贴板后直接在上面粘贴传图。

2019-04-10 v2.6.6版本
– fixbugs
– 修改压缩方式为指定压缩比例及宽、高、图片文件大小超过指定值时才进行压缩

2019-03-30 v2.6.5版本
– 添加支持Github图床
– 添加支持Weibo图床

2019-03-27 v2.6.4版本
– 修改windows的右键安装工具为中文,修改编码为ANSI-GB2312(之前utf-8会导致中文菜单乱码),添加自定义菜单文字的功能。
– 修改默认字体文件名为拼音,因为在win10中测试如果字体为中文名会导致找不到字体文件
– 添加windows上的配置文档,详细讲解如何配置
– 修改图片处理插件中的抛出异常的bug
– 添加Windows版PicUploaderHelper及其配置使用文档

2019-03-25 v2.6.3版本
– 支持全局快捷键上传剪贴板中的图片

2019-01-12 v2.6.2版本
– 添加MWeb支持
– 添加网页版上传支持

2018-12-06 v2.6.1版本
– 添加支持Windows系统(理论上Linux系统一样可用,只要你能通过右键菜单或快捷键调用上传命令)

2018-11-24 v2.6版本
– 添加青云QingCloud及Ucloud的支持
– 修改结构,去除冗余代码
– 添加支持同时上传到多个云

2018-11-15 v2.5.2版本
– 用户指定日志位置后,只创建日志软链接(快捷方式),日志原文件存储在项目目录下的logs目录中

2018-11-13 v2.5.1版本
– 修复压缩无效的bug
– 修复压缩临时文件未删除的问题
– 添加压缩质量配置

2018-11-11 v2.5版本
– 添加支持Imgur

2018-10-20 v2.4版本
– 添加水印支持(支持文字水印、图片水印)
– 去掉了上传到sm.ms同时返回了删除链接的问题,但日志里还是会有删除链接

2018-09-21 v2.3版本
– 修改config结构
– 使用变量类名动态识别调用不同存储类型对应的类以精简代码
– 在每个类里动态调用配置文件

2018-09-19 v2.2.2版本
– 添加又拍云支持

2018-09-08 v2.2.1版本
– 解决图片文件名为中文时粘贴乱码或者无法粘贴的问题
– 修改了README.md中说的不清楚的地方,部分英文菜单改用中文

2018-09-06 v2.2版本
– 添加支持百度云
– 添加支持京东云
– 添加支持阿里云

2018-09-06 v2.1版本
– 添加支持网易云
– bug fix

2018-09-06 v2.0版本
– 完全重构代码
– 添加支持腾讯云
– 添加上传日志路径配置(可配置到桌面方便随时查看)

2018-09-01 v1.1版本
– 添加支持https://sm.ms,默认上传到sm.ms
– 添加mardownWithLink链接类型(点击图片后能跳转到图片链接)
– fix bug log时间设置成东八区

2018-08-30 v1.0版本
– 由于个人写markdown需要,目前现有的一些笔记软件都因为各种原因传图并不是很方便,于是写了这个小工具,想到可能有跟我一样需求的童鞋,就顺手发出来供有需要的童鞋使用,如有处理不好的地方在所难免,希望大家能批评指正!

参考资料

七牛云phpsdk文档
百度知道:没有个人网站怎么注册七牛云存储
sm.ms Api
GuzzleHttp官方文档
腾讯云phpsdk文档
网易云phpsdk文档
阿里云phpsdk文档
京东云phpsdk文档
百度云phpsdk文档
又拍云phpsdk文档
Imgur API
使用github的api上传文件到项目
Github REST API v3 – Create a file
新浪图床API接口及源码
NextCloud WebDAV Client API’s
NextCloud OCS Share API
Gitee码云-新建文件
google
百度

打赏

92
Leave a Reply

avatar
19 Comment threads
73 Thread replies
8 Followers
 
Most reacted comment
Hottest comment thread
20 Comment authors
xiebruce墨涩网0x5c0fimcakeMuuyun Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of
墨涩网
Guest
墨涩网

PicUploader宝塔服务器安装问题咨询:

PicUploade在服务器安装上利用宝塔新建站点,直接将PicUploade文件夹加压到网站目录下,访问index.php安装文件的时候提示“未检测到图片”,无法正常安装使用!请问在服务器上安装PicUploade的话是不是还需要配置伪静态或者其他环境才可以。在官网没有看到有关服务器安装PicUploade的说明。

我的服务器环境:
宝塔6.9.4
PHP-7.3
Nginx 1.8.1
MySQL 5.6.37

测试网站地址
http://47.94.238.90/

0x5c0f
Guest

很好的一个东西,建议添加vscode插件

imcake
Guest
imcake

Failed to load resource: the server responded with a status of 413 (Request Entity Too Large)
大佬,chrome里返回这个是哪里设置错了么,一直停留上传中
服务器是京东云

Muuyun
Guest
Muuyun

您好,我是win,用的是apache,按照在windows上使用,以及在windows上使用web版这些步骤操作后,图片一直显示在上传中

tianxia5912
Guest
tianxia5912

你好,访问api.picuploader.com时显示The domain picuploader.com is for sale.请问是域名到期了吗?

bwoywan
Guest
bwoywan

请问访问网站,提示‘未检测到图片’是哪里出错了呢?谢谢是整个网页只有这几个字··白色背景

tudou
Guest
tudou

希望支持gitee和coding.net(现在好像被腾讯收购了,新的地址是腾讯开放平台登录后看这里https://dev.tencent.com/user/projects/create)
因为国外的速度都很慢,而各种云存储都有容量限制。所以个人更喜欢gitee和coding.net。谢谢~

chen
Guest
chen

这是什么原因呢,函数未定义,没有安装freetype吗
Fatal error: Uncaught Error: Call to undefined function common\imagettfbbox() in /Users/chenkangqiang/PicUploader/common/EasyImage.php:839
Stack trace:
#0 /Users/chenkangqiang/PicUploader/uploader/Common.php(166): common\EasyImage->text(‘\xE8\xBF\x99\xE6\x98\xAF\xE6\xB0\xB4\xE5\x8D\xB0’, ‘/Users/chenkang…’, 30, 1526661120, ‘center’, 0, 60, 45)
#1 /Users/chenkangqiang/PicUploader/uploader/Upload.php(90): uploader\Common->watermark(‘/Users/chenkang…’)
#2 /Users/chenkangqiang/PicUploader/index.php(105): uploader\Upload->getPublickLink(Array)
#3 {main}
thrown in /Users/chenkangqiang/PicUploader/common/EasyImage.php on line 839

pocld
Guest
pocld

你好,我在VPS上搭建后遇到一个问题,我设置的是本地服务器。
然后在上传时,上传界面一直显示上传中,无法返回链接。然而在上传历史那里就可以看到图片是上传成功的,有链接、能打开。

如果用Sharex上传的话,错误记录提示如下:

解析响应失败。
Newtonsoft.Json.JsonReaderException: Unexpected character encountered while parsing value: <. Path '', line 0, position 0.
在 Newtonsoft.Json.JsonTextReader.ParseValue()
在 Newtonsoft.Json.Linq.JToken.ReadFrom(JsonReader reader, JsonLoadSettings settings)
在 Newtonsoft.Json.Linq.JToken.Parse(String json, JsonLoadSettings settings)
在 ShareX.UploadersLib.CustomUploaderParser.ParseSyntaxJson(String syntaxJsonPath)
在 ShareX.UploadersLib.CustomUploaderParser.ParseSyntax(String syntax, Boolean isOutput)
在 ShareX.UploadersLib.CustomUploaderParser.Parse(String text, Boolean isOutput)
在 ShareX.UploadersLib.CustomUploaderItem.ParseResponse(UploadResult result, ResponseInfo responseInfo, CustomUploaderInput input, Boolean isShortenedURL)
在 ShareX.UploadersLib.ImageUploaders.CustomImageUploader.Upload(Stream stream, String fileName)

然后我看了一下左侧菜单那里“设置云存储服务器参数”,本地服务器那里的参数发生了改变(我并没有修改),刚安装完成的时候,那个“directory”显示的是 /images/{Y}/{m}/{d},结果自动变成了 /path/to/images

请问是什么原因?
谢谢!

pocld
Guest
pocld

还有一个问题,昨天上传的图片是保存在/images/2019/05/13 文件夹里面的,但是刚刚发现/images/2019/05/14文件夹里也有昨天上传的那些图片

扫码在手机查看
iPhone请用自带相机扫
安卓用UC/QQ浏览器扫

PicUploader: 一个还不错的图床工具