顯示具有 ASP.NET MVC 標籤的文章。 顯示所有文章
顯示具有 ASP.NET MVC 標籤的文章。 顯示所有文章

2020年8月5日 星期三

[ ASP.NET MVC ] Image 原始圖片方向屬性與圖檔轉向


今天同事向我反映,直式照片上傳後會變成橫式的,經過一番測試後終於找到原因,這邊紀錄一下查詢到的資料與解法。


此次的問題為,若圖檔經由 Windows 內建的功能轉向,上傳後圖檔會保持原有方向,並不會改變,但若經由轉向後在另存新檔則不會有此問題。



因此,若知道原本圖檔的方向,就可以針對原方向做轉換,想獲取這些資訊可以經由 Exif ( Exchangeable image file format )。

      
private byte[] ImageToBuffer(Image Image)
{
    if (Image == null) { return null; }
    byte[] data = null;

    foreach (var prop in Image.PropertyItems)
    {
        if (prop.Id == 0x0112) //value of EXIF
        {
            int orientationValue = Image.GetPropertyItem(prop.Id).Value[0];
            RotateFlipType rotateFlipType = GetOrientationToFlipType(orientationValue);//取得轉的度數
            Image.RotateFlip(rotateFlipType);//依度數轉成正的
            break;
        }
    }
    using (MemoryStream oMemoryStream = new MemoryStream())
    {
        //建立副本
        using (Bitmap oBitmap = new Bitmap(Image))
        {
            //儲存圖片到 MemoryStream 物件,並且指定儲存影像之格式為 Jpeg
            oBitmap.Save(oMemoryStream, System.Drawing.Imaging.ImageFormat.Jpeg);
            //設定資料流位置
            oMemoryStream.Position = 0;
            //設定 buffer 長度
            data = new byte[oMemoryStream.Length];
            //將資料寫入 buffer
            oMemoryStream.Read(data, 0, Convert.ToInt32(oMemoryStream.Length));
            //將所有緩衝區的資料寫入資料流
            oMemoryStream.Flush();
        }
    }
    return data;
}

private RotateFlipType GetOrientationToFlipType(int orientationValue)
{
    RotateFlipType rotateFlipType = RotateFlipType.RotateNoneFlipNone;

    switch (orientationValue)
    {
        case 1:
            rotateFlipType = RotateFlipType.RotateNoneFlipNone;
            break;
        case 2:
            rotateFlipType = RotateFlipType.RotateNoneFlipX;
            break;
        case 3:
            rotateFlipType = RotateFlipType.Rotate180FlipNone;
            break;
        case 4:
            rotateFlipType = RotateFlipType.Rotate180FlipX;
            break;
        case 5:
            rotateFlipType = RotateFlipType.Rotate90FlipX;
            break;
        case 6:
            rotateFlipType = RotateFlipType.Rotate90FlipNone;
            break;
        case 7:
            rotateFlipType = RotateFlipType.Rotate270FlipX;
            break;
        case 8:
            rotateFlipType = RotateFlipType.Rotate270FlipNone;
            break;
        default:
            rotateFlipType = RotateFlipType.RotateNoneFlipNone;
            break;
    }

    return rotateFlipType;
}

2020年3月30日 星期一

[ ASP.NET MVC ] Cookie Same Site 屬性設定

最近開發網站突然遇到 Cookie 與 Session 失效,並且都發生在 Chrome 瀏覽器上,後來爬文才發現 Chorme 瀏覽器 80 以上版本安全性更新,會造成第三方 Cookie 失效,所以這邊紀錄一下處理的方式與當初踩到的地雷。


1. 調整專案目標 Framework 至 4.7.2


2. 設定 Cookie SameSite 與 Secure 參數


3. 啟用 SSL 設定


4. 測試 Cookie 設定參數是正確



到此為止程式碼的設定就完成了,原本我是這麼想的但接下來的狀況就是不斷的踩雷,下面是我所遇到的狀況與解決辦法。


1. 已設定 SameSite 但卻沒有生效 ( 可能是空白或者是 Lax )

因為 SameSite 設定需搭配 Https 才會生效,所以如果要測試請記得將 Https 打開,本機測試可以到 IIS "建立自我簽屬憑證" 進行測試。


2. Framework 已升級至 4.7.2 但 SameSite 設定還是沒有生效

爬了一些文之後才發現,原本的 Framework 4.7.2 存在一些 Bug,在 FormsAuth 和 SessionState 即使設定還是會維持 Lax, 所以更新完成之後還必須更新相關套件才可以正常 Work,各 OS 需更新套件版本請參考下面連結。

3. Cookie __RequestVerificationToken 失效

升上 Framework 4.7.2 之後,所有 Cookie 都會新增 Samesite 參數,並預設 Lax,但舊版本之瀏覽器並不支援,所以使用舊版本之瀏覽器時會有 Cookie 失效的情況發生,這時候必須將 Samesite 設為 -1 ( 代表不使用此參數 ),才可以正常工作。

Cookie SameSite属性介绍及其在ASP.NET项目中的应用

支援 Samesite 屬性的瀏覽器

最後特別補充一下,SameSite 與 Secure 都可以透過 WebConfig 設定,但我的開發環境一直無法辨識 SameSite 參數,所以最後只好透過程式控制,如果大家沒有這個問題,可以透過 WebConfig 設定就好,這樣其實比較簡單清楚。


參考資料:

什麼!? SameSite Cookies Policy 更新了— Chrome SameSite Attribute 簡介