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

背景说明

  • 使用工具将图片转换为 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数据就复制到了剪切板。
    Application 图片转base64

转码方法 2

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

转码方法 3

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

转码方法 4

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

图片查看器

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

后记

  • 在 JavaScript > Browser 对象 > Window > 对象方法 中提供的btoa()方法可以创建一个base-64编码的字符串。
  • 微信屏蔽外链，屏蔽的是图片的来源。复制粘贴图片的原始数据可以使用，这说明可以从图片本身着手。
  • 开发一种特定的脚本或工具，一键将文档中的图片转换为特定的编码，且此种编码通用可加载，可以从根本上解决微信公众号图片问题。

参考资料

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

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

posted @ 2021-01-09 15:15  梦幻之心星  阅读(617)  评论(0)    收藏  举报