Remember an upload image to the image of the bed tool plug-in implementation (Mac version Open source)

Mac version upload image tool plug-in implementation

Given that blogging manually uploaded to the bed is cumbersome, a long time ago wrote a Windows version of the software plug-in, used to quickly upload pictures to the picture bed

Re-packaging users over billions of open source software-adding images automatically uploaded to the function of the image bed

Now change the system, from Windows replaced by Mac, the system is really good, but upload to the function of the picture bed can not get over, the online search of the ready-made software, are not very useful. Mac freeware isn't as much as windows. On the Windows system is the implementation of the greenshot on the basis of the seven cow graph bed plug-in, the software is also available under the Mac, but not open source. Weekend, decided to do their own research, to achieve a Mac version of the upload to the seven cow bed software plug-in. All right, first on the end:

Choose a Mac version of open source software

The selected software needs to meet two conditions:

• One is ease of use, friendly interface
• The other one is the software to support plugins

Google a bit, search a few, finally feel the katana this software is good.

Although the function is simple point, but the interface does the comparison specialized, and supports the service, above Imgur is a foreign free graph bed service. All right, all right, here it is.

Research packaging

This software is written in JavaScript, just know with Javascrpit can also make Mac app, development tools choose to use Webstorm. Research the source of the time is generally the side of the operating software, while looking at the code, probably the entire software outline and related details to understand a bit.

The next tricky thing is how to package the source code into a Mac app, and download the packaged software on GitHub to study it. Look at its directory structure, see the framework of this folder, go inside to look at:

drwxr-xr-x  6 zexu  staff   192B  6 24 16:48 Electron Framework.frameworkdrwxr-xr-x  3 zexu  staff    96B  6 24 16:48 Katana Helper EH.appdrwxr-xr-x  3 zexu  staff    96B  6 24 16:48 Katana Helper NP.appdrwxr-xr-x  3 zexu  staff    96B  6 24 16:48 Katana Helper.appdrwxr-xr-x  7 zexu  staff   224B  6 24 16:48 Mantle.frameworkdrwxr-xr-x  7 zexu  staff   224B  6 24 16:48 ReactiveCocoa.frameworkdrwxr-xr-x  7 zexu  staff   224B  6 24 16:48 Squirrel.framework

See the electron this thing, then Google, the following is the official website introduction:

使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用

See Package.json below are several dependent packages:

  "devDependencies": {    "electron": "^2.0.3",    "electron-packager": "^12.0.2",    "standard": "^11.0.1"  }

It should be it, using the electron framework packaged app.

Installation dependencies

Install all dependent packages locally, and then CD to the project root to execute the following command:

zexudeMacBook-Pro:katana zexu$ electron-packager . --overwrite --platform=darwin --arch=x64 --icon=./app/static/images/icon.icns --prune=true --out=release-builds

• Note that I have electron-packager the global installation.

In one order, packing was made, so concise.

Research source and function implementation

First put the Qiniu NPM on the package:

npm install qiniu --save

Writing plugins for this software requires writing css,html and writing JS function functions. A software has a lot of functions, but to quickly focus on the relevant function points, sometimes the efficiency of the light to see the code is really low. Running the code and looking at some log output is a good way to get familiar with the code quickly.

How can I debug it. Look, add a new debug configurations in the Red font:

The path to the online interpreter is written as follows:

~/github/katana/node_modules/.bin/electron

Tried for a long while without success, found that this file is a soft chain, pointing to the path of the interpreter, so directly written on the path of the picture. Online posts that are set up after the debugging can be added breakpoints. Tried a few times without success, this software should be multi-process, should be related to this. Log to be able to read, but some log can not print to the console, or a multi-process problem, finally found a workaround, use the following variables to print log:

const con = require('electron').remote.getGlobal('console')

The entire workflow for the software is as follows:

• Configure Ak,sk,scope and Default domain, not familiar with these parameters of the reference Windows version of the software configuration.

• After save these parameters should be persisted to the file, specifically no research.

• , the Mac interface is called first, and the generated file is saved to the following path:

  ~/.katana/uploads

• Finally, call Qiniu's interface to upload the file to the seven-cow bed.

Specific code details are not introduced, interested to go to GitHub to see it. Qiniu's official documentation feels a bit messy. Study for some time and paste this code:

  Const AK = _qiniuservice.accesskeyconst SK = _qiniuservice.secretkeyconst sc = _qiniuservice.scopeconst DM = _q Iniuservice.defaultdomainvar key = path.basename (file) var Mdpath = '! [] (' + path.join (DM, key) + ') ' const link = {Link:mdpath}var mac = new Qiniu.auth.digest.Mac (AK, SK) var options = {SCOP E:SC + ': ' + key, Expires:0}var putpolicy = new Qiniu.rs.PutPolicy (options) var uploadtoken = Putpolicy.uploadtoken (MAC) var config = new Qiniu.conf.Config () Config.zone = Qiniu.zone.Zone_z1var Formuploader = new qiniu.form_up. Formuploader (config) var putExtra = new qiniu.form_up. PutExtra () Formuploader.putfile (Uploadtoken, key, file, PutExtra, function (Resperr, respbody, Respinfo) {Console.log (' Status: ' + Respinfo.statuscode ' if (resperr) {callback (NULL, resperr) throw Resperr} if (Respinfo.statuscode = =     = $) {callback (link) console.log (respbody)} else {Console.log (respinfo.statuscode) console.log (respbody) Callback (link)})  

Download

To a packaged link, interested in can play a bit:

Link: Https://pan.baidu.com/s/1JEej70eO5FCqF6CibOmdLQ Password: qnq7

Source links, developed on the dev branch:

Https://github.com/harlanc/katana

Remember an upload image to the image of the bed tool plug-in implementation (Mac version Open source)