Java处理富文本编辑器的图片转为base64编码

一、需求（场景）

后台（内网）通过富文本编辑器编辑的图文信息，需要在移动端（外网）展示，需要将内容中的图片的src的路径替换成base64编码的传递到前台。

二、思路

1.获取内容中的<img>标签的src的url，请求url，将请求到的图片进行base64编码。

三、工具类

import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.regex.Matcher;
import java.util.regex.Pattern;import sun.misc.BASE64Encoder;/*** * @ClassName:HtmlUtil* @Description:处理富文本编辑器保存内容* @author: Ming* @createdate:2019-4-25 下午7:25:40* @version V1.0* @Copyright: 2019 www.***.com Inc. All rights reserved.* */
public class HtmlUtil {/*** * @Title: imgInHtmlToBase* @Description:将html中img标签的src的url对应的图片替换成base64的图片* @param strHtml* @return* */public static String imgInHtmlToBase(String strHtml) {StringBuffer sb = new StringBuffer();// 目前img标签标示有3种表达式// <img alt="" src="1.jpg"/> <img alt="" src="1.jpg"></img> <img alt=""// src="1.jpg">// 开始匹配content中的<img />标签Pattern p_img = Pattern.compile("<(img|IMG)(.*?)(/>|></img>|>)");Matcher m_img = p_img.matcher(strHtml);boolean result_img = m_img.find();if (result_img) {while (result_img) {StringBuffer sbSrc = new StringBuffer();// 获取到匹配的<img />标签中的内容String str_img = m_img.group(2);// 开始匹配<img />标签中的srcPattern p_src = Pattern.compile("(src|SRC)=(\"|\')(.*?)(\"|\')");Matcher m_src = p_src.matcher(str_img);if (m_src.find()) {// 取出img的src的url路径String str_src = m_src.group(3);// 将图片转成base64码String base = imgToBase64(str_src);m_src.appendReplacement(sbSrc, " src=\"" + str_src + "\" ");m_img.appendReplacement(sb,"<img class=\"img-responsive\" src=\"data:image/png;base64,"+ base + "\" />");}// 结束匹配<img />标签中的src// 匹配strHtml中是否存在下一个<img />标签，有则继续以上步骤匹配<img />标签中的srcresult_img = m_img.find();}m_img.appendTail(sb);return sb.toString();} else {return strHtml;}}/*** * @Title: imgToBase64* @Description:根据图片的路径转成base64码* @param imgURL* @return* */public static String imgToBase64(String imgURL) {boolean flag = false;ByteArrayOutputStream outPut = new ByteArrayOutputStream();byte[] data = new byte[1024];try {// 创建URLURL url = new URL(imgURL);// 创建链接HttpURLConnection conn = (HttpURLConnection) url.openConnection();conn.setRequestMethod("GET");conn.setConnectTimeout(10 * 1000);if (conn.getResponseCode() != HttpURLConnection.HTTP_OK) {flag = false;// 连接失败/链接失效/图片不存在}InputStream inStream = conn.getInputStream();int len = -1;while ((len = inStream.read(data)) != -1) {outPut.write(data, 0, len);}inStream.close();flag = true;} catch (IOException e) {flag = false;}// 异常情况下 返回一个图片丢失的base64的图片String failImg = "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";// 对字节数组Base64编码if (flag == true) {BASE64Encoder encoder = new BASE64Encoder();return encoder.encode(outPut.toByteArray());} else {return failImg;}}
}

四、使用

public class TestHtmlUtil {public static void main(String[] args) {// 模拟富文本编辑器中内容String strHtml = "<p>测试</p><img src=\"https://avatar.csdn.net/9/9/B/3_asuyunlong.jpg\" class=\"avatar_pic\">"+ "<span class=\"read-count\">阅读数：2448</span>"+ "<img data-v-0d738edb=\"\" src=\"https://profile.csdnimg.cn/7/2/7/1_qq_24484085\" alt=\"\" class=\"head\">";String result = HtmlUtil.imgInHtmlToBase(strHtml);System.out.println(result);}
}

Java处理富文本编辑器的图片转为base64编码相关推荐

java集成富文本编辑器UEditor
JAVA集成富文本编辑器UEditor 集成前说明集成UEditor 一.UEditor下载二.UEditor迁入项目三.引入ueditor中的js 四.初始化UEditor 五.实现图片上传 ...
Ueditor富文本编辑器修改图片上传路径
Ueditor富文本编辑器修改图片上传路径版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/QZPHP_L 由于网站后台使用Zend framewor ...
百度富文本编辑器UEditor 图片宽度100%自适应，手机端
有些时候富文本编辑器的图片在手机端显示超出,没有自动100% 修改ueditor.all.js的23774行(左右,不一定)和24533(左右,不一定),不行就搜索增加内容 loader.setAt ...
vue3中使用vue-quill富文本编辑器重写图片上传功能
最近开发的一个vue3+element-plus的项目,需要用到富文本编辑器,最终选择了VueQuill这一款轻便型的富文本编辑器. 说说遇到的问题:富文本编辑器的图片上传,默认是直接以base64图 ...
富文本在服务器上图片不显示,解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题...
关于解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题. 本文可能会对以下现象得以解决: 图片上传组件,没有 [上传] 选项卡. 资源无法加载 [imgupload] ( ...
edui 富文本编辑_改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能
最近项目需要新增一个发布文章的模块,用的是百度的Ueditor富文本编辑器. 公司用的是阿里云的图片服务器,需要直接把文章中图片上传到服务器上,但是这个编辑器的上传图片是直接上传到Tomcat的根目录 ...
使用 SpringBoot + Ckeditor 富文本编辑器、图片上传
一.前言在一些页面中,进行发表文章.评论等功能,都要涉及到富文本编辑器, 如 CSDN 的 markdown 编辑器使用传统的 textarea 标签是远远满足不了需求的, 现在流行的富文本编辑 ...
关于移动手机端富文本编辑器qeditor图片上传改造
日前项目需要在移动端增加富文本编辑,上网找了下,大多数都是针对pc版的,不太兼容手机,当然由于手机屏幕小等原因也限制富文本编辑器的众多强大功能,所以要找的编辑器功能必须是精简的. 找了好久,发现qed ...
vue-quill-editor富文本编辑器及图片上传到服务器
最近在做后台管理平台,该项目是使用vue+element-ui框架,有一个界面就是关于消息推送的,在网上找了一圈,比较适合的就是vue-quill-editor富文本编辑器 1.需求完成图: 此项目就 ...

Java处理富文本编辑器的图片转为base64编码

Java处理富文本编辑器的图片转为base64编码相关推荐

最新文章

热门文章