preface

I’ve been writing with MarkEditor for a long time, and one important feature of MarkEditor is that it automatically synchronizes screenshots from the editor to the graph bed, so if you want to export to other platforms, you don’t have to worry about images being recognized on other platforms because local images are automatically converted to links.

However, recently I found that when articles were synchronized to nuggets or CSDN platforms, these picture links could not be transferred to their platforms. It should be because markeditor’s graph bed used anti-theft link technology that the pictures could not be transferred.

Voiceover: When the third-party platforms such as Nuggets and CSDN publish articles, they will generally save the links of pictures that are not on this platform as those of their own platform, so as to prevent the failure of third-party links from causing problems in the display of pictures in the articles on the platform.

So how do we solve this? There are two ways, right

  1. One is to automatically upload images after finding those pasted images, and the resulting image links are not available on a platform like Mdnice.com, but I tried mdnice.com, and it seems to have a bug. Chrome and Safari don’t automatically upload images after pasting images. The 360 browser does.
  2. The other is to set up other chart beds in MarkEditor, such as Seven Niuyun, so that you can configure seven niuyun pictures without anti-theft chain technology, but to configure seven Niuyun such chart beds, one to charge, two to go to register accounts, apply for domain name registration and so on, a little trouble.

After consideration, I decided to create a tool for automatic uploading to the graph bed. Without it, it would be Cool to realize it by myself. How to do it

  1. Cut or copy the image
  2. Upload the image to the cloud, and the image link will be returned to the cloud after the upload is successful

I want this tool to do something like the following flow chart:

After copying the picture/screenshot, press the shortcut key to automatically upload the picture to the map bed —–> get the picture address —–> convert the picture address in Markdown (i.e. **! [](cloud image URL) ** form) and copy it to the clipboard, so I can paste in markdown editor to get the cloud image link.

Technology selection

Alfred workflow is the first Mac tool that comes to mind. It’s a keyboard that uses hotkeys, keywords, and custom plugins to speed up operations. It’s not just a search tool, it’s also a quick launch tool. It can even operate many system functions with strong expansibility. The core function of the customized plug-in is mainly realized through Workflow. What is Workflow, we know that a large task can be divided into small tasks (work), and these small tasks can complete the large task by combining input and output. Such a combination of works forms a workflow.

Each work can be written in PHP, Python, and other programming languages. The input and output of each work can be connected through workflow, so that when a shortcut key is triggered, the workflow can automatically execute, and finally get a result. For example, I wrote a timestamp date-to-date conversion workflow like this:

Simply type TS (shortcut key) in workflow, followed by the timestamp/date you want to display, to turn it into a date/time stamp. Workflow can be used as a shortcut to automatically trigger repetitive tasks, which can save a lot of time.

One-click upload picture Workflow to implement the idea

Workflow is really powerful, so it’s a great way to implement our automatic uploading of images to our chart bed.

First I chose eggshell (imgkr.com/), a free and stable graphic bed… Charles (or any other capture tool) then uploads an image, and when successful, the request to upload the image is displayed in Charles

Click Copy as cURL to see what the cURL request looks like

The copied curl request looks like this

The binary data of the image is definitely from the clipboard. Therefore, the problem is how to obtain the image data from the clipboard.

Pngpaste can export images from a clipboard to a specified path. Brew will install the pngpaste tool

brew install pngpaste
Copy the code

After installation we can use the following command to guide the clipboard image to the specified path

Pngpaste Image pathCopy the code

The problem is how to get the binary data of the specified path image. Shell can’t do this, but PHP can. So we finally rewrite the curl request in PHP. That said, we ended up using PHP for the final workflow. The final PHP implementation is as follows:

If interested, you can see the following code implementation, the notes are written in detail, I believe you should be able to understand

// Copies the clipboard image to the specified path
$command = '/usr/local/bin/pngpaste /tmp/test.jpeg';
$output = shell_exec($command);

require 'workflows.php';
$wf = new Workflows();

// Load image binary data
$data = file_get_contents('/tmp/test.jpeg');


// The following is the logic for uploading images
$ch = curl_init('http://imgkr.com/api/v2/files/upload');
$boundary = 'WebKitFormBoundaryCQV3KALJwjBXA5ue';

$files = ['171f3cdebc5586.jpeg' => $data];
$delimiter = '-- -- -- -- -- -- -- -- -- -- -- -- --' . $boundary;
$data = ' ';
foreach ($files as $name => $content) {
    $data .= "--" . $delimiter . "\r\n"
        . 'Content-Disposition: form-data; name="file"; filename="' . $name . '"' . "\r\nContent-Type: image/jpeg" . "\r\n\r\n"
        . $content . "\r\n";
}
$data .= "--" . $delimiter . "--\r\n";
curl_setopt_array($ch, [
    CURLOPT_POST => true,
    CURLOPT_HTTPHEADER => [
        'Content-Type: multipart/form-data; boundary=' . $delimiter,
        'Content-Length: ' . strlen($data),
        'Host: imgkr.com'.'User-Agent: Mozilla/5.0 (Macintosh, Intel Mac OS X 10_15_0) AppleWebKit/537.36 (KHTML, Like Gecko) Chrome / 84.0.4147.89 Safari / 537.36 '.'X-Requested-With: XMLHttpRequest'.'Accept: */*'.'Origin: https://imgkr.com'.'Sec-Fetch-Site: same-origin'.'Sec-Fetch-Mode: cors'.'Sec-Fetch-Dest: empty'.'Referer: https://imgkr.com/'.'the Accept - Language: useful, en - US, q = 0.9, en, q = 0.8, useful - CN, q = 0.7'.'cookies: _ga = GA1.2.377288389.1594181932, _gid = GA1.2.851545805.1594809662, _gat = 1',
    ],
    CURLOPT_POSTFIELDS => $data
]);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_ENCODING, 'gzip, deflate');
$test = json_decode(curl_exec($ch));

// After uploading the image successfully, convert it to the image format in MarkDown and write it to the clipboard. In this way, the corresponding Markdown image link will be pasted in MarkDown
$result = '\'! [] (' . $test->data . ') \ ' ';
$copy = "echo $result | pbcopy";
shell_exec($copy);

$query = ' ';
$result = 'Copy to clipboard successful! ';
$wf->result($query, $result, $result, $query, 'icon.png');
echo $wf->toxml();
Copy the code

Workflows. PHP is a plugin for writing workflow in PHP. It displays the desired results in Alfred’s drop down boxGithub.com/joetannenba…Take a closer look

To configure the workflow

Create a new workflow that looks like this:

The above workflow indicates that when you press Shift + CMD + S (Hotkey in the picture), the corresponding Script (Script Filter) will be automatically executed to upload the picture from the clipboard to the picture bed. Finally, the cloud image was converted into markdown image URL and copied to the clipboard. A paste command in the editor will give you the desired cloud image URL, as shown in the image below. A successful execution of the Workflow will display a “copy to clipboard success” message in Alfred’s drop down box.

From now on, if I want to take a screenshot and get a link to this image, I can do it with one click! No more mechanical manual upload pictures! Isn’t it Cool?

conclusion

Tools, automation engineer is a very important way of thinking, we should put the duplication of inefficient tools, automation, make the limited investment in the more worth doing, just like today test automation is also in order to use tools, such as automatic thinking help r&d testers from repeated inefficient work. Workflow provides a great way to improve your productivity in your daily work.

eggs

If you want to use Alfred, you must use the paid version of Alfred. However, the powerful functions of Alfred are definitely worth your investment. I already bought the upgrade for life, and using Workflow will save you a lot of time. Trust me, buy it! Absolutely worth it!! If the link fails, please send me wechat “Geekoftaste”, I will send you.

Finally, welcome everyone to pay attention to the public account, add my private wechat “Geekoftaste”, communicate together, common progress!