javascript - 如何旋转FileUpload中的预览图像并将其保存到数据库

Question

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

    }

我进入数据库的是图像的原始方向，而不是旋转后的方向。有人可以帮助我解决这个问题吗？我找不到如何正确旋转图像并获得正确方向的方法。谢谢

Answer 1

首先，您必须上传原件。在某个 session 中保存您的旋转值(例如:0-0deg、1 表示 90deg、2 表示 180deg、3 表示 270deg)。

然后，当您点击 btnGenerate 时，创建按所选值旋转的新图像。

`//获取图片的路径 字符串路径 = 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 度的示例。然后使用您的代码，加载新的旋转图像，保存到数据库并删除两个图像(原始图像和旋转图像)。