一招搞定Typora本地图片导成html查看不了

Typora是一款用户体验极强的Markdown编辑器，编辑内容体验非常流畅，且具备导出成各种格式的强大功能。比如pdf、word、html等，都不在话下。不过，在导出带有本地图片的md文件成html的时候，却遇到了在别人那边查看不了图片的问题。

原因

这是因为，图片使用的是一个本地的文件路径，导出成html以后，还是使用的本地的文件路径，在自己的电脑上看一切正常，但是分享给其他人之后，在他的电脑上则不存在这个文件。

尝试直接改

怎么办，首先想到的是把markdown里边的图片网址直接替换成base64编码的内容，但是在我使用的版本(版本0.11.18 (5941))下，展示出来的就是base64的内容，导出成html以后，也依然如此。

使用html标签

那么，直接使用html标签来写会怎样呢？

<img src="data:image/jpg/png/gif;base64,iVBORw0KG..."/>

导出html之后，发现html标签已经被转义了，直接展示出html源码了。

配置导出后的自定义脚本

既然没法直接解决，那么就考虑利用typora的导出自定义脚本来搞定吧。

配置好自定义命令的脚本，然后再实现一下。

/Users/ronnie/bin/typora_export_html "${outputPath}"

创建对应的脚本：

vim /Users/ronnie/bin/typora_export_html

写入下面的内容

#! /usr/local/bin/php
<?php
// 获取要处理的文件路径
$path = $argv[1];
if (!file_exists($path)) {
    die("file not found:{$path}");
}
$content = file_get_contents($path);
if (stripos($content, "<img") === false) {
    return;
}
// 切换到要处理的文件所在的目录，因为图片都是相对于该目录的路径
chdir(dirname($path));

// 匹配到图片的src属性
$newContent = preg_replace_callback('#<img src="([^\"]+)"#m', function($ms) {
    $imgPath = $ms[1];
    if (!file_exists($imgPath)) {
        return $ms[0];
    }
    $binary = file_get_contents($imgPath);
    $base64 = base64_encode($binary);
    // 将原来的本地路径，替换为base64编码内容
    return "<img src=\"data:image/jpg/png/gif;base64,".$base64."\"";
}, $content);

// 修改路径
file_put_contents($path, $newContent);

然后给文件执行的权限

chmod a+x /Users/ronnie/bin/typora_export_html

然后重新将带有本地图片的md文件，在typora中导出成html文件，发现图片已经直接使用base64编码了，这样，再也不用担心分享的html文件别人看不到图片了。