如何从FileUpload旋转预览图像并将其保存到数据库

How to rotate the preview image from FileUpload and save it to the database

本文关键字：保存 数据库 图像 FileUpload 旋转      更新时间：2023-09-26

我试图在我的网站上显示使用输入文件的图像，我想做的是有一个按钮，将旋转在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);
        }
    }

我进入数据库的是图像的原始方向，而不是旋转后的。有人可以帮助我关于这一点，我找不到一种方法如何正确旋转图像并获得正确的方向。由于

首先，你必须上传原创作品。在某些会话中保存旋转值(例如:0-0度，1为90度，2为180度，3为270度)。

然后，当你点击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();`

这是旋转图像90度的例子。然后使用您的代码，加载新的旋转图像，保存到db并删除两个图像(原始和旋转的一个)。

相关文章：