声明：本文系本人依照真实经历原创，未经许可，谢绝转载。
此文百度经验版本：如何用Visual Studio 2010打造Data Url生成工具
源码下载：用Visual Studio 2010编写Data Url生成工具C#源码
什么是Data Url呢？Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。
例如：
文章图片
img标签的src属性值就是Data Url。 在上面的Data URI中，data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。
目前，Data URI scheme支持的类型有：
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html; base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css; base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript; base64,base64编码的Javascript代码
data:image/gif; base64,base64编码的gif图片数据
data:image/png; base64,base64编码的png图片数据
data:image/jpeg; base64,base64编码的jpeg图片数据
data:image/x-icon; base64,base64编码的icon图片数据
那么如何才能生成Data Url呢？今天我就教大家自己用Visual Studio 2010打造一款Data Url生成工具的方法。
打开Visual Studio 2010
文章图片
新建项目：文件》新建》项目
文章图片
选择c#》Windows窗体应用程序》输入项目名称
文章图片
拖动窗体到合适的大小
文章图片
修改窗口的标题为：Data Url 生成工具
文章图片
分别添加一个Label，两个TextBox，一个Button组件
文章图片
修改组件的“Name”属性，以及Text属性
【c#|用Visual Studio 2010编写Data Url生成工具C#版】
文章图片
文章图片
双击浏览按钮添加关键代码
private void button_browse_Click(object sender, EventArgs e)
{
OpenFileDialog fbd = new OpenFileDialog();
fbd.Title = "请选择一张图片：";
fbd.CheckFileExists = true;
fbd.FileName = Environment.GetFolderPath(Environment.SpecialFolder.MyComputer);
if (fbd.ShowDialog() == System.Windows.Forms.DialogResult.OK)
{
textBox_saveDir.Text = fbd.FileName;
try
{
Image img = Image.FromFile(textBox_saveDir.Text, true);
System.IO.MemoryStream ms = new System.IO.MemoryStream();
System.Drawing.Imaging.ImageFormat fmt = System.Drawing.Imaging.ImageFormat.Png;
string ext = Path.GetExtension(textBox_saveDir.Text);
switch (ext)
{
case "gif":
fmt = System.Drawing.Imaging.ImageFormat.Gif;
break;
default:
ext = "png";
break;
}
img.Save(ms, fmt);
textBox1.Text = "
文章图片
选择一张图片
文章图片
点击打开后，就会立即生成Data Url了，这里直接把Data Url放到img标签里了，方便测试
文章图片
怎么测试呢？
新建一个文本文档，把整个img标签的内容复制粘贴到文档中，保存；
然后将文件的扩展名改为“.html”；
然后在文件上单击鼠标右键》打开方式》选择一个浏览器，就可以看到效果了。
文章图片
文章图片
你学会了吗？
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)