Javascript 如何从FileUpload旋转预览图像并将其保存到数据库
我正在尝试使用输入文件在我的网站上显示图像,我想做的是有一个按钮,可以在运行时将图像旋转90/180/260/360度。旋转后,将有另一个按钮用于将图像保存到数据库中,使其具有正确的旋转方向。这是我的代码片段 htmlJavascript 如何从FileUpload旋转预览图像并将其保存到数据库,javascript,c#,rotation,image-rotation,Javascript,C#,Rotation,Image Rotation,我正在尝试使用输入文件在我的网站上显示图像,我想做的是有一个按钮,可以在运行时将图像旋转90/180/260/360度。旋转后,将有另一个按钮用于将图像保存到数据库中,使其具有正确的旋转方向。这是我的代码片段 html <asp:ScriptManager ID="ScriptManager1" runat="server"/> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <Trig
<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>
我进入数据库的是图像的原始方向,而不是旋转的方向。有人能帮我解决这个问题吗?我找不到一种方法来正确旋转图像并获得正确的方向。谢谢首先,您必须上传原件。在某些会话中保存旋转值(例如:0-0度,1表示90度,2表示180度,3表示270度) 然后,当您点击
btnGenerate
创建新图像时,按choosen值旋转
`
//获取图像的路径
字符串路径=Server.MapPath(Image1.ImageUrl)
这是将图像旋转90度的示例。
然后使用您的代码,加载新的旋转图像,保存到db并删除两个图像(原始图像和旋转图像)。如何从该示例代码中获取图像,以便将其转换为字节数组并保存到数据库中?
<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);
}
}
//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();`