侧边栏壁纸
博主头像
孔子说JAVA博主等级

成功只是一只沦落在鸡窝里的鹰,成功永远属于自信且有毅力的人!

  • 累计撰写 352 篇文章
  • 累计创建 135 个标签
  • 累计收到 10 条评论

目 录CONTENT

文章目录

IDEA base64编码查看图像插件 Base64 image encoder 的安装配置与使用

孔子说JAVA
2022-11-15 / 0 评论 / 0 点赞 / 28 阅读 / 2,545 字 / 正在检测是否收录...
广告 广告

在开发过程中,有一些前端使用的小图经常会以base64编码的形式去查看(在 CSS/HTML 中使用),我们一般通过编码都可以实现,但是有些情况下可能不需要编码那么麻烦,只是针对个别图片做个base64转换即可,Base64 image encoder插件就可以完成,该插件允许以 base64 编码的形式查看图像。

1、安装方式

1.1 在线安装方式

第一种方式,是在IDEA上搜索插件进行安装,会适配当前IDEA的版本。打开File -> Settings 界面(或者使用快捷键Ctrl+Alt+S进入到Settings设置页面),在左侧列表中找到 Plugins 菜单,在右侧的 Marketplace 页签下,搜索 “base”,可以找到 Base64 image encoder 插件,如下图所示,点击 Install 进行安装即可。

image-1668135561826

1.2 离线安装方式

第二种安装方式是使用离线插件进行安装。插件下载页面:https://plugins.jetbrains.com/idea ,在搜索框中输入插件名称 “base” 搜索,点击出现的下拉提示 Base64 image encoder,即可进入插件下载页面,选择对应安装版本下载即可。

image-1668135606871

image-1668135664386

下载完成后,进入插件市场,选择本地安装

同样是在 Settings 界面,在左侧列表中找到 Plugins 菜单,在右侧的 Installed 页签右方有个齿轮图标,点击展开菜单后选择 “Install Plugin from Disk…”,此时会打开本地文件选择框,选择你下载的插件包安装即可。

2、插件的使用

在IDEA中打开一张图标后,在图像编辑器工具栏中会看到一个"64"的图标按钮。

image-1668136639582

点击这个图标可以将图片一键转为 Base64 DataUrl ,小图可用,稍大点( 几百 K )就会把整个 IDE 卡住。

image-1668136656015

点击 Copy to clipboard 按钮会将该文本复制到剪切板,在使用的地方ctrl+v即可粘贴。转换后的url如下:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1NmExOTFkNC02ZTljLTQwYWEtODA0NC02NTczMGQyMzQ4ZTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTBBMTA0QkUwMDI5MTFFNUJEN0ZDNjkxMzdGQjJDMEUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTBBMTA0QkQwMDI5MTFFNUJEN0ZDNjkxMzdGQjJDMEUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDNhMWM0NTEtNzg2OC00NmEwLWI4ODQtODZiNDNlNjdhM2MzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjZkNjEzZjNlLTIxODgtNDg4Yy1hZWJjLWI0MmIxMzhmMWFmMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpZ574gAAAC+SURBVHja7JhRCoQwDEQb8RyuB/FuejfxGLseJVZUENFma1MMOAODH23S5yARJWZ2llU44wIgAAEIwEWtN99wLzUmhUE9w3UJ9RRcnQET3PKi73qNqeV/ajTgft6VNcAjnLMEuMGN3p/DgY8DXsHtAUPKCriHqy8SUU8wZsxIGwfvRthHJ/2CY6ZUn1vyepTKxHpWvjl1QMr9LkaCSBAJIsG3J4ivuieeQbaa4JDhfLEn4f8gAAEIwJcDTgIMAGO/HBrrrgguAAAAAElFTkSuQmCC
0

评论区