Skip to content

Instantly share code, notes, and snippets.

@laris
Created October 26, 2018 07:38
Show Gist options
  • Save laris/1ada9ca703863b50c16a53ba8ee0abdb to your computer and use it in GitHub Desktop.
Save laris/1ada9ca703863b50c16a53ba8ee0abdb to your computer and use it in GitHub Desktop.
Markdown-insert-image-3-method.md

github/markup#270

  • Copy As Markdown Offered by: johnnyfee.github.io https://chrome.google.com/webstore/detail/copy-as-markdown/dgoenpnkphkichnohepecnmpmihnabdg Used to copy the element in current page as markdown format. Just select HTML in your page and then click the the 'M' icon in the extension toolbar, then the markdown content is in your clipboard. Cool? Also, you can use the shortcut of the extension, Alt + C for Windows or Option + C for Mac or define yourself. Enjoy it. History: 2016.06.21 fix a bug, change relative links to absolute links. img

  • Base64 Encode and Decode Offered by: oneit.se Quickly Encode & Decode Base64 strings This Chrome extenstion is a simple Base64 encoder and decoder.

Encode and Decode inline strings from any page by selecting and right clicking on the selection.

Encodes or decodes a string so that it conforms to the Base64 Data Encodings specification (RFC 4648).

Base64 is not for encryption purposes and is not secure. It is an encoding mechanism only.

https://chrome.google.com/webstore/detail/base64-encode-and-decode/kcafoaahiffdjffagoegkdiabclnkbha https://lh3.googleusercontent.com/bCKPXUE0DuLR8RGJBrIrzGaW6omXM2QTyx-1Cv5BZcVGqlg2R2EZ0epYW4FNxrlu_oZ61GqLwA=w640-h400-e365 https://lh3.googleusercontent.com/f5-ApQGUcILewxCTH37XKIOMz9j3o7Z284I0_ZqOSZ8S_MfvJOFV3SGd12dxiEmNFFe5LCH8=w640-h400-e365 https://lh3.googleusercontent.com/cI2b03Lnu1ykHMKyk_kY4d9igeGTHljf6oQ-Rvt-907MQAxJEhycTrHPJeA204UiNKFT9ebXcA=w640-h400-e365

MarkDown添加图片的三种方式

[

ClownNose ClownNose](https://my.oschina.net/ClownNose) 发布于 02/07 23:45

字数 556

阅读 331

收藏 0

点赞 2

__ 评论 0

pythonbase64markdown

[开发十年,就只剩下这套Java开发体系了

](https://my.oschina.net/u/3779583/blog/1862418)

Markdown插入图片有三种方法

插图最基础的格式就是:

![Alt text](图片链接 "optional title")

Alt text:图片的Alt标签,用来描述图片的关键词,可以不写。最初的本意是当图片因为某种原因不能被显示时而出现的替代文字,后来又被用于SEO,可以方便搜索引擎根据Alt text里面的关键词搜索到图片。 图片链接:可以是图片的本地地址或者是网址。"optional title":鼠标悬置于图片上会出现的标题文字,可以不写。

插入本地图片

只需要在基础语法的括号中填入图片的位置路径即可,支持绝对路径和相对路径。 例如:

![avatar](/home/picture/1.png)

不灵活不好分享,本地图片的路径更改或丢失都会造成markdown文件调不出图。

插入网络图片

只需要在基础语法的括号中填入图片的网络链接即可,现在已经有很多免费/收费图床和方便传图的小工具可选。 例如: ![avatar](http://baidu.com/pic/doge.png)

将图片存在网络服务器上,非常依赖网络。

把图片存入markdown文件

用base64转码工具把图片转成一段字符串,然后把字符串填到基础格式中链接的那个位置。

  • 基础用法: ![avatar](data:image/png;base64,iVBORw0......) 这个时候会发现插入的这一长串字符串会把整个文章分割开,非常影响编写文章时的体验。如果能够把大段的base64字符串放在文章末尾,然后在文章中通过一个id来调用,文章就不会被分割的这么乱了。
  • 高级用法 比如: ![avatar][base64str] [base64str]:data:image/png;base64,iVBORw0......

最后,base64的图片编码如何得来?

  1. 使用python将图片转化为base64字符串
import base64
f=open('723.png','rb') #二进制方式打开图文件
ls_f=base64.b64encode(f.read()) #读取文件内容,转换为base64编码
f.close()
print(ls_f)
  1. base64字符串转化为图片
import base64
bs='iVBORw0KGgoAAAANSUhEUg....' # 太长了省略
imgdata=base64.b64decode(bs)
file=open('2.jpg','wb')
file.write(imgdata)
file.close()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment