Export Selected Text as Image

什么用途,怎么使用?

当有文本被选中的时候,右键点击,可以看到 将选中文字导出为图片 的操作,选择模板之后,会有三种可选导出类型:

  • 插入编辑器: 导出为图片之后,直接插入到编辑区域
  • 复制到粘贴板: 导出为图片之后,会被复制到粘贴板,可以一键复制到其它需要的地方
  • 导出为文件: 选择一个路径,进行保存

这个功能的价值所在?

这个功能的最大价值,就是 把一张配图“写”出来

当我们需要在写作时候插图,并且这个图片需要被处理过时,一般的做法是使用一些制图工具 (比如 Photoshop 或者其它手机端的 App),作为 MarkEditor 的设计者,我们希望此时可以不借助第三方的工具,不然会有两个无法回避的弊端:

  1. 打破写作本身流畅的节奏
  2. 重复的机械工作没有自动化 (大多数时候的作者完成配图时是有一个模板的)

巧用注释语法以及 Unsplash

在 MarkEditor 中,当前行以 //+空格 开始,则表示此行是注释语法,并不会成现在最终渲染后的页面。如此一来,用于 书写图片 的文本和最终的图片,就不会同时出现而产生内容上的冲突了。
Unsplash 的功能,可以快速帮你找到极漂亮的、自由版权的图片。
如下注释内容所示,最后一行插入图片之后,在选中注释区域的文字,尝试导出一张图片吧!

字体是设计的一部分

上面的示例中,如果使用 文悦古典明朝体 呈现,效果会更好。
另外,我们也推荐在自己电脑上下载、安装 花园明朝体, 这是一个设计非常漂亮的字体。

除了方正字库之外,这些年有不少新的中文字体公司、团体出现,比如:

而且针对个人非商业使用而言,一般字体商会提供非常实惠的购买计划、或者是免费的非商业版。

如果自定义模板实现 把图片写出来,我们建议应当考虑一个恰当的字体,会让图片最终的呈现变得更加精致。

自定义模板

有文本处于选中状态,右键点击,选择 “将选中文字导出为图片 --> 打开模板目录”,即可见所有的模板文件。
模板文件的后缀为 .html,其语法为 Jinja2,你也可以简单参考默认的 Simple.html,并不复杂。
基本的原理是:

  1. 选中的文字经过基本的处理后,将变量传入模板
  2. 由模板渲染为 HTML 页面
  3. HTML 页面保存为图片

metadata 声明

如果选中区域的文字起始几行,也是 key: value 这种形式的 metadta 声明的话,这些声明的变量可以在自定义模板中被直接调用。
另外,比较特殊的是 width 这个变量,如果有它存在,可以控制最终产生图片的宽,但一般,并不需要特别声明。

header 属性

<meta name="width" content="550">
<meta name="min_height" content="300">
<meta name="background" content="#fcfcfc">

在 HTML 的 header 部分,一般都建议增加如上几个对应 name 的 meta,其含义如下:

  • width: 表示图片的宽
  • min_height: 表示导出图片需要保证的最小高度
  • background: 如果图片达不到最小高度,会以这个颜色填充头尾以达到最小高度

另外,header 中支持另外一个特殊的属性,为 image_type,如果 image_typepng,则会影响插入编辑区域图片的类型。一般情况下不明显,不建议启用。

一些固定的变量

模板中除了可以使用 metadata 声明的变量之外,还有一些固定的变量:

  • html: 选中文本以 Markdown 语法最终解析后的 HTML 内容
  • text: 将 html 再度转为普通文本,可以去除图片等内容
  • text_lines: 一个列表,每个元素为非空的文本组成
  • simple_dict: text中每行如果是 key: value 的格式,将其转为一个字典格式的数据
  • plain_html: 将 text 再度转为 HTML
  • images: 图片的列表,每个元素都有 src 这个属性,表示图片的 URL
  • words: 选中文本的字数
Comments
Write a Comment