SQLserver用Image格式储存图片

前言

最近项目更新一个新需求，要求把图片储存在SQLserver中，而不是储存在本地磁盘。很好，又有新东西可以学了。

正文

一、建表

这里大概建几个字段演示一下

CREATE TABLE [dbo].[ImageFile](
	[Id] [UNIQUEIDENTIFIER] NOT NULL,
	[Name] [NVARCHAR](200) NULL,--文件名
	[Type] [NVARCHAR](50) NULL,--文件类型
	[Image] [IMAGE] NULL--文件
)

二、插入数据

一般写入数据在后端结合业务，这里只写一个控制台测试

        /// <summary>
        /// 插入图片
        /// </summary>
        /// <param name="filePath">图片文件夹路径</param>
public void ImportImage(string filePath)
        {
            string conn = "server=.;database=Test;Uid=sa;Pwd=1;";
            using (SqlConnection myconn = new SqlConnection(conn))
            {
                myconn.Open();
                using (SqlCommand mycomm = new SqlCommand())
                {
                    foreach (FileInfo item in dir.GetFiles("*.jpg"))//循环读取文件夹内的jpg文件
                    {
                        var pic = getJpgSize(item.FullName);
                        string str = string.Format("insert into ImageFile (ImageFileId,Name,Type,Image) values('{0}','{1}','{2}',@file)", Guid.NewGuid().ToString(), Path.GetFileNameWithoutExtension(item.FullName), item.Extension.Substring(1));//插入数据
                        mycomm.CommandText = str;
                        mycomm.Connection = myconn;
                        FileStream fs = new FileStream(item.FullName, FileMode.Open);
                        BinaryReader br = new BinaryReader(fs);
                        Byte[] byData = br.ReadBytes((int)fs.Length);
                        fs.Close();
                        mycomm.Parameters.Add("@file", SqlDbType.Binary, byData.Length);
                        mycomm.Parameters["@file"].Value = byData;
                        mycomm.ExecuteNonQuery();
                        mycomm.Parameters.Clear();
                    }
                }
            }
        }

三、读取文件

这一步根据不同的ORM框架来获取，可用 byte[] 对象承接图片

四、前端显示

1、这里默认是 png 格式，可根据实际情况写别的格式，jpg和png格式两个可以互换，只是记得png图片如果有透明区域转jpg后会变为白色，具体的大家可以试试

2、base64直接使用宽高默认为0，所以图片在 onload 时获取图片宽高

前端页面：

<img src="data:image/png;base64,这里写你的Base64代码" onload="imageLoad(this)" />

脚本：

// 获取图片真实高度
    function imageLoad(_this) {
        var imageSrc = $(_this).attr("src");
        var img = new Image();
        img.src = imageSrc;
        // 如果图片被缓存，则直接返回缓存数据
        if (img.complete) {
            var width = img.width > img.height ? 550 : 310;
            var height = img.height / img.width * width;
            $(_this).css("width", width + "px")
            $(_this).css("height", height + "px")
        } else {
            img.onload = function () {
                var width = img.width > img.height ? 550 : 310;
                var height = img.height / img.width * width;
                $(_this).css("width", width + "px")
                $(_this).css("height", height + "px")
            }
        }
    }

五、图片放大

如果需要对图片进行放大，但是项目内的插件没有带这个功能，可以使用下面的方法

image增加单击事件：

<img onclick="imgEnlarge(this)" src="data:image/png;base64,这里写你的Base64代码" onload="imageLoad(this)" />

前端页面增加一个div：

<div id="imgEnlargeDiv" style="display: none; text-align: center;position: fixed;z-index: 1000;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(255,255,255,.9);">
    <img id="bigimg" style="height: 90%;width: auto;border: 0px;margin: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;" src="" />
</div>

脚本：

$(function () {
        $("#imgEnlargeDiv").click(function () {//再次点击淡出消失弹出层
            $(this).fadeOut("fast");
        });
    });

    function imgShow(outerdiv, bigimg, _this) {
        var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
        $(bigimg).attr("src", src);//设置#bigimg元素的src属性
        $(outerdiv).fadeIn("fast");  //图片放大的div快速淡入显示层
    }

    function imgEnlarge(_this) {
        imgShow("#imgEnlargeDiv", "#bigimg", $(_this));
        $("img[type ='showImg']").mouseover(function () {
            $(this).css("cursor", "pointer");//鼠标移动到图片，鼠标箭头变为手势
        });
        $("img[type ='showImg']").click(function () {
            var _this = $(this);//将当前的pimg元素作为_this传入函数
            imgShow("#imgEnlargeDiv", "#bigimg", _this);
        });
    }

最后

这些东西很多都是利用网上有的，只是个人感觉都比较零散，所以整理出来给大家参考，也是给我自己做一份笔记。

同时感谢那些乐于分享的人！