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);
        });
    }

最后

這些東西很多都是利用網上有的，只是個人感覺都比較零散，所以整理出來給大家參考，也是給我自己做一份筆記。
同時感謝那些樂於分享的人！