C#实现图片转Base64字符串,以及base64字符串在Markdown文件内复原的演示

引用1.0.3版本或以上的Wesky.Net.OpenTools 包

1.0.3 版本提供图片转Base64字符串方案,并提供根据后缀名自动识别Mime类型,合成标准URI

该nuget包支持.net framework4.6.1和以上、.net core2和以上、.net 5和以上所有环境使用。

开源项目地址:

Gitee:https://gitee.com/dreamer_j/open-tools.git
Github:https://github.com/LittleLittleRobot/OpenTools.git

引用1.0.3版本或以上的Wesky.Net.OpenTools 包

1.0.3 版本提供图片转Base64字符串方案,并提供根据后缀名自动识别Mime类型,合成标准URI

开源项目地址:

Gitee:https://gitee.com/dreamer_j/open-tools.git
Github:https://github.com/LittleLittleRobot/OpenTools.git

1878fb30b3a6d922c6a52d56122ecc0a.png

为了简单操作,我直接把base64字符串,外面套一层,让它支持md文件展示。图片地址为桌面上个人公众号图片地址,格式类型为jpg

static void Main(string[] args)
{
var file = @"xxx.jpg";
var data = Wesky.Net.OpenTools.Converter.ImageConvert.ConvertImageToBase64(file);
var mdString = $"![avatar]({data})";
    Console.WriteLine(mdString);
}

21054a96196bdca345b8634dd6b5d2a8.png

 运行程序,得到base64字符串.base64字符串。base64字符串,使用格式:![avatar](base64字符串)的形式,即可被markdown所识别,并显示未原始图片。

836c46e60ac947bb49b5c4e29cbffd4c.png

 复制该全部字符串内容,粘贴到任意markdown文本编辑器内。以下我用Typora实验,可以看到自动解析出文本,并显示了我用来实验的图片。

b11f4c06e80b223576c20e29d2625410.png

核心代码解析:

/// <summary>
/// 将图片文件转换为 Base64 编码的字符串。
/// Converts an image file to a Base64-encoded string.
/// </summary>
/// <param name="imagePath">图片文件的路径。Path to the image file.</param>
/// <returns>返回 Base64 编码的图片字符串。Returns a Base64-encoded image string.</returns>
public static string ConvertImageToBase64(string imagePath)
{
if (!File.Exists(imagePath))
    {
throw new FileNotFoundException("指定的图片路径不存在。Specified image path does not exist.");
    }
byte[] imageBytes = File.ReadAllBytes(imagePath);
string mimeType = GetMimeType(imagePath);
string base64String = Convert.ToBase64String(imageBytes);
return $"data:{mimeType};base64,{base64String}";
}

 支持图片格式:

case ".bmp":
return "image/bmp";
case ".gif":
return "image/gif";
case ".jpg":
case ".jpeg":
return "image/jpeg";
case ".png":
return "image/png";
case ".tif":
case ".tiff":
return "image/tiff";
case ".ico":
    return "image/x-icon";
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue中使用`vue-markdown`实现粘贴图片Base64位的功能,您可以使用第三方库`vue-simplemde`来实现。以下是一个简单的示例: 1. 首先,使用npm或yarn安装`vue-simplemde`: ``` npm install vue-simplemde ``` 2. 在您的Vue组件中,导入并注册`vue-simplemde`: ```javascript import VueSimplemde from 'vue-simplemde'; export default { components: { VueSimplemde, }, }; ``` 3. 在模板中使用`vue-simplemde`: ```html <template> <div> <vue-simplemde v-model="markdownText" @paste="handlePaste"></vue-simplemde> </div> </template> ``` 4. 在Vue组件的`data`中定义`markdownText`,用于存储Markdown文本: ```javascript export default { data() { return { markdownText: '', }; }, }; ``` 5. 在Vue组件中定义处理粘贴事件的方法`handlePaste`,将粘贴的图片换为Base64位: ```javascript export default { methods: { handlePaste(event) { const items = (event.clipboardData || event.originalEvent.clipboardData).items; for (let i = 0; i < items.length; i++) { const item = items[i]; if (item.kind === 'file' && item.type.indexOf('image') !== -1) { const reader = new FileReader(); reader.onload = (e) => { const base64Image = e.target.result; // 将base64Image插入到markdownText中 this.markdownText += `![Image](${base64Image})`; }; reader.readAsDataURL(item.getAsFile()); } } }, }, }; ``` 通过以上步骤,您可以在Vue中使用`vue-simplemde`实现Markdown编辑器,并在粘贴图片时将其换为Base64位。请注意,您可能需要根据您的项目需求进行进一步的配置和样式调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值