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

Question

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

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

    } 

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

Answer 1

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

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

` // получить путь к изображению string 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();` 

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