网际飞扬

还记得年少时的梦么,醒不过来 便信以为真……

主题背景
本网站首发版本创建于1999年4月
网际飞扬
手机网站二维码

请使用手机扫描二维码,登录网站手机版。

关于富文本编辑器中“粘贴截图”base64图片保存成独立文件的方法

  • 2023-06-13
  • 1996
  • 飞驰的心

目前前端常见的富文本编辑器基本都支持“截图插入”,也就是:你通过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}}条
  • {{i+1}}楼
    {{rs.Msg_Sender}}{{rs.Msg_Datetime}}

    {{rs.Msg_Content}}

播放器封面
  • 宠物精灵