关于富文本编辑器中“粘贴截图”base64图片保存成独立文件的方法
- 2023-06-13
- 2150
- 飞驰的心
目前前端常见的富文本编辑器基本都支持“截图插入”,也就是:你通过QQ或者微信或者任何截图工具,截图完成可以直接粘贴到富文本编辑器里。这时富文本编辑器的图片会以base6 编码的形式存储或呈现,后端如果置之不理,那么这图片数据将会和文本内容一起存入数据库中。先不说日复一日图片多了数据库性能的问题,仅仅说后期如果想单独引用图片,就无解。所以后端程序接到这个富文本的时候就必须对图片编码进行解析,实现分离保存。
我用c#实现的后端方法,供您参考:
private string SaveBateImage(string richText) { string pattern = @"]*src\s*=\s*['""](data:image\/(.*?);base64,(.*?)['""][^>]*>)"; Regex regex = new Regex(pattern, RegexOptions.IgnoreCase); string filePath = "/uploadfile/image/" + DateTime.Now.ToString("yyyyMM") + "/"; if (!Directory.Exists(filePath)) { Directory.CreateDirectory(Server.MapPath(filePath)); } MatchCollection matches = regex.Matches(richText); int i = 0; foreach (Match match in matches) { string base64Image = match.Groups[3].Value; string mimeType = match.Groups[2].Value; //取出原始图片扩展名,如果取不到则强制为jpg if (string.IsNullOrEmpty(mimeType)) { mimeType = "jpg"; // 默认设置为jpg } byte[] imageBytes = Convert.FromBase64String(base64Image); string fileName = filePath + DateTime.Now.ToString("ddHHmmss") + "_" + (i++) + "." + mimeType; System.IO.File.WriteAllBytes(Server.MapPath(fileName), imageBytes); richText = richText.Replace(match.Value, $"《img src="\" {filename}\""="">"); } return richText; }
上述方法写的已经很清晰了,主要是以下几个重要逻辑:
1、预处理:从富文本中拆出可能存在的base64图片
2、循环处理:因为有可能有多个这种图片
3、保存:用时间+顺序号保存,顺序号是因为可能同一秒会保存多个图片
4、替换:图片保存完以后用新的路径替换富文本中的base64编码。
6、齐活,入库!
这样最终实现了图文分离入库,数据库压力减轻,图片以物理文件形式存储,后期也可以方便的调用和替换。
【提示】这个文章还有个姊妹篇《关于富文本编辑器中将远程图片保存为本地文件的方法》,自己翻吧……
本博客所有内容均为原创,原则上我不希望你转载。如特别喜欢而转载的话,请务必注明出处“网际飞扬 http://www.fayo.net”
否则本人闲来无事可能会把你误当成维权的靶子。
评论
全部评论
共{{commentCount}}条{{rs.Msg_Content}}