图片数据编码与微信公众号图片

标题: 图片数据编码与微信公众号图片
作者: 梦幻之心星    sky-seeker@qq.com
标签: [#图片,#数据编码,#Base64]
目录: [数据编码]
日期: 2021-01-09

背景说明

• 使用工具将图片转换为Base64编码后粘贴到微信公众号，图片正常显示
• Google Chrome 浏览器内置图片转Base64编码工具
• 使用画图工具打开图片，全选复制图片内容后粘贴到微信公众号，图片正常显示

操作说明

MarkDown 编辑器

• 因为使用Google Chrome 浏览器作为编码工具，所以需要编辑器支持在浏览器中打开正在预览的MarkDown文件。如果不支持，可先导出HTML文件，然后使用浏览器打开HTML文件，但操作过于繁琐。
• MarkdownPad2和安装插件后的Visual Studio Code支持在浏览器中打开正在预览的MarkDown文件。
• Visual Studio Code打开含Base64编码的图片的MarkDown文件时卡顿严重。此时可使用Notapad++进行文件编辑。

Google Chrome 浏览器

转码方法1

1. 按F12打开开发者模式
2. 点击Application>Frames>top>Images，点击图片文件名。在右侧栏中右键单击图片，点击Copy image as data URI。以

   data:image/jpeg;base64

   作为开头的对应图片的base64数据就复制到了剪切板。
   

转码方法2

1. 按F12打开开发者模式
2. 点击Sources>Page，找到图片后点击文件名。在右侧的导航栏中右键单击图片，点击Copy image as data URI以复制图片的base64数据。
   

转码方法3

1. 按F12打开开发者模式
2. 点击Network
3. 按Ctrl+R重新加载记录
4. 点击图片文件名，在右侧的导航栏中右键单 25ec 击图片，点击Copy image as data URI以复制图片的base64数据。

转码方法4

1. 按F12打开开发者模式
2. 点击Network
3. 按Ctrl+R重新加载记录
4. 右键单击图片文件名，点击Copy>Copy response以复制图片的base64数据。此项还提供开发人员所需的特殊格式。
   

图片查看器

• 粘贴渲染后的内容到微信公众号，本地图片加载失败
• 复制资源管理器中的图片，在微信公众号中选中粘贴失败的图片，按Ctrl+V进行粘贴后无反应。图片替换失败。
  
• 用画图工具打开图片，按Ctrl+A以全选图片，按Ctrl+C以复制图片，在微信公众号中选中粘贴失败的图片，按Ctrl+V进行粘贴后图片替换成功。
• 用XnView MP打开图片，按Ctrl+C以复制图片，在微信公众号中选中粘贴失败的图片，按Ctrl+V进行粘贴后图片替换成功。在没有使用自动化工具的情况下，这种方式是除了使用微信公众号支持的图床以外比较快的一种方式。
  

后记

• 在JavaScript>Browser 对象>Window>对象方法中提供的

  btoa()

  方法可以创建一个

  base-64

  编码的字符串。
• 微信屏蔽外链，屏蔽的是图片的来源。复制粘贴图片的原始数据可以使用，这说明可以从图片本身着手。
• 开发一种特定的脚本或工具，一键将文档中的图片转换为特定的编码，且此种编码通用可加载，可以从根本上解决微信公众号图片问题。

参考资料

• 菜鸟教程 Window btoa() 方法

版权声明：本文为「梦幻之心星」原创，依据 CC BY-NC-SA 4.0 许可证进行授权，转载请附上原文出处链接及本声明。

博客园地址：https://www.cnblogs.com/Sky-seeker
微信公众号：关注微信公众号，获取即时推送