Как повернуть изображение предварительного просмотра из FileUpload и сохранить его в базу данных

Я пытаюсь отобразить изображение на своем веб-сайте, используя входной файл, и я хочу иметь кнопку, которая будет поворачивать изображение на 90/180/260/360 градусов, пока оно находится во время выполнения. После поворота появится еще одна кнопка для сохранения изображения в базе данных с правильной ориентацией повернутого изображения. Вот мой фрагмент кода.

HTML

    <asp:ScriptManager ID="ScriptManager1" runat="server"/>
   <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <Triggers>
          <asp:PostBackTrigger ControlID="btnGenerate" /> 
      </Triggers>
       <ContentTemplate>
        <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/NoUser.jpg" style="height: 200px;max-height: 200px; max-width: 100%;" class='north'/>
        <br />
        <input ID="inputFile" runat="server" type="file" name="file" onchange="previewFile()" />
        </p>
        <asp:Button UseSubmitBehavior="false" ID="btnRotate" runat="server" Text="rotate" OnClientClick="return rotatefunction();" />
        <p>
         <asp:Button ID="btnGenerate" runat="server" OnClick="btnGenerate_Click" Text="Generate" />
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
         </ContentTemplate>
         </asp:updatepanel>

JavaScript и CSS, где я вращаю изображение во время выполнения

<style type="text/css">
        .north {
            transform:rotate(0deg);
            -ms-transform:rotate(0deg); /* IE 9 */
            -webkit-transform:rotate(0deg); /* Safari and Chrome */
            }
            .west {
            transform:rotate(90deg);
            -ms-transform:rotate(90deg); /* IE 9 */
            -webkit-transform:rotate(90deg); /* Safari and Chrome */
            }
            .south {
            transform:rotate(180deg);
            -ms-transform:rotate(180deg); /* IE 9 */
            -webkit-transform:rotate(180deg); /* Safari and Chrome */

            }
            .east {
            transform:rotate(270deg);
            -ms-transform:rotate(270deg); /* IE 9 */
            -webkit-transform:rotate(270deg); /* Safari and Chrome */
            }
     </style>
     <script type="text/javascript">
         function previewFile() {
             var preview = document.querySelector('#<%=Image1.ClientID %>');
             var file = document.querySelector('#<%=inputFile.ClientID %>').files[0];
                var reader = new FileReader();

            reader.onloadend = function () {
                preview.src = reader.result;
            }

            if (file) {
                reader.readAsDataURL(file);
            } else {
                preview.src = "";
            }
         }

         function rotatefunction() {
             var img = document.getElementById("Image1");
             if (document.getElementById("Image1").classList.contains('north')) {
                 document.getElementById("Image1").classList.toggle('west');
             } else if (document.getElementById("Image1").classList.contains('west')) {
                 document.getElementById("Image1").classList.toggle('south');
             } else if (document.getElementById("Image1").classList.contains('south')) {
                 document.getElementById("Image1").classList.toggle('east');
             } else if (document.getElementById("Image1").classList.contains('east')) {
                 document.getElementById("Image1").classList.toggle('north');
             }

             return false;
         }


    </script>

сохранение в базу данных

protected void btnGenerate_Click(object sender, EventArgs e)
    {
        HttpPostedFile file = inputFile.PostedFile;
        Stream inputStream = file.InputStream;
        BinaryReader binaryReader=new BinaryReader(inputStream);
        byte[] bArr = binaryReader.ReadBytes((int)inputStream.Length);

 try
        {
            SqlConnection conn = new SqlConnection("Data Source=192.168.100.108;Network Library=DBMSSOCN;Initial Catalog=express;Integrated Security=False;Persist Security Info=True;User ID=user;Password=pass1234;Min Pool Size=5;Max Pool Size=100;");

            conn.Open();

            SqlCommand addbill = new SqlCommand("sp_add_image", conn);
            addbill.CommandType = CommandType.StoredProcedure;

            addbill.Parameters.AddWithValue("@id", "1");
            addbill.Parameters.AddWithValue("@file", SqlDbType.Binary).Value = bArr;

            //try
            //{

            addbill.ExecuteNonQuery();
            conn.Close();
            //}
            //finally
            //{
            //   conn.Close();
            //  }

        }
        catch (Exception ex)
        {
            //log.log("Error" + ex.Message + ex.StackTrace);
        }

    }

то, что я получаю в базе данных, - это исходная ориентация изображения, а не повернутая. Может кто-нибудь, пожалуйста, помогите мне в этом, я не могу найти способ, как правильно повернуть изображение и получить его правильную ориентацию. Спасибо


person Jera Balais    schedule 03.09.2015    source источник


Ответы (1)


Во-первых, вы должны загрузить оригинал. Сохраните значение поворота в какой-либо сессии (например: 0-0 градусов, 1 для 90 градусов, 2 для 180 градусов и 3 для 270 градусов).

Затем, когда вы нажмете btnGenerate, создайте новое изображение, повернутое на выбранное значение.

`//получаем путь к строке изображения path = Server.MapPath(Image1.ImageUrl);

//create an image object from the image in that path
System.Drawing.Image img = System.Drawing.Image.FromFile(path);

//rotate the image
img.RotateFlip(RotateFlipType.Rotate90FlipXY);

//save the image out to the file
img.Save(path);

//release image file
img.Dispose();`

Это пример поворота изображения на 90 градусов. Затем используйте свой код, загрузите новое повернутое изображение, сохраните в БД и удалите оба изображения (исходное и повернутое).

person Ivan Stefanov    schedule 03.09.2015
comment
Как мне получить изображение из этого примера кода, чтобы преобразовать его в массив байтов и сохранить в базе данных? - person Jera Balais; 03.09.2015