在客户端调整图像大小并保存到服务器

时间:2015-05-28 23:19:06

标签: javascript c# asp.net linq image-resizing

我目前正在研究移动应用程序(真正的移动网站),它允许人们从检查中拍摄照片,然后通过LINQ和照片将数据库字段中存储服务器路径的手机上传到目录上由查询字符串指定的服务器。

客户要求的一个要求是,他们现在希望在客户端调整图像大小,然后保存到服务器,由于移动覆盖(3G / 4G)可能不太好,因此很有意义作为城市。

Upload.aspx

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<script type="text/javascript">
    function AppendMacro() {
        var selMacro = document.getElementById('<%= selPhotoMacro.ClientID%>');
        var txtbox = document.getElementById('<%= txtDescription.ClientID%>')
        txtbox.value += selMacro.value + '\n\n';
    }
 </script>
<div align="center">
<asp:Repeater ID="rInspection" runat="server">
    <ItemTemplate><h1 style="margin: 0px;">Additional Photos</h1><strong><%# DataBinder.Eval(Container.DataItem, "InspectionTitle")%></strong><br /><a href="/inspection.aspx?id=<% Response.Write(Request.QueryString["id"]); %>"><%# DataBinder.Eval(Container.DataItem, "InspectionAddress")%></a><br /><br /><div style="font-size: 11px;">Additional Photos appear at the back of the Inspection Report.</div><br /></ItemTemplate>
</asp:Repeater>
</div>

<p><div class="photo"><asp:Image ID="imgPhotoUpload" runat="server" ImageUrl="Images/photo.gif" Width="63" Height="56" BorderStyle="Solid" BorderColor="Black" BorderWidth="1px" /></div><div style="float: left;"><p><strong>Additional Photo</strong><br /><asp:FileUpload ID="PhotoUpload" runat="server" /></div><br clear="left" />
    </p>

<asp:Panel ID="Panel1" runat="server" Visible="false" HorizontalAlign="Center">
    <asp:Image ID="Image1" runat="server" BorderStyle="Solid" BorderColor="Black" BorderWidth="1px" Width="300" Height="200" />
    <p>
    <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="SaveImage" Font-Size="Large"  />
    <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick = "Cancel" Font-Size="Large"  />
    </p>
</asp:Panel>

<asp:DropDownList ID="selPhotoMacro" runat="server" OnInit="BindMacros" onchange="AppendMacro()" Width="300px">
</asp:DropDownList>
<asp:TextBox ID="txtDescription" runat="server" TextMode="MultiLine" Columns="40" Rows="10"></asp:TextBox>



<div align="center">
    <asp:Button ID="btnUpload" runat="server" Text="Upload Photo" OnClick="Upload" Font-Size="Large" />
</div>

Upload.aspx.cs

using Microsoft.Xrm.Sdk;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Web.UI;
using System.Web.UI.WebControls;
using WebAppWalkthrough.Data;
using Xrm;

namespace WebAppWalkthrough
{
public partial class photos : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Session["Image"] = null;

            //var InspectionQuery = Request.QueryString["id"];
            var xrm = new XrmServiceContext("Xrm");
            var InspectionTitle = from i in xrm.new_inspectionsSet
                                  where i.Id == Guid.Parse(Request.QueryString["id"])
                                  select new { InspectionTitle = i.new_name, Id = i.new_inspectionsId.Value, InspectionAddress = i.new_HiddenAddress };

            rInspection.DataSource = InspectionTitle;
            rInspection.DataBind();
        }



    }

    protected void BindMacros(object sender, EventArgs e)
    {
        var xrm = new XrmServiceContext("Xrm");
        //ALL Macros (except the * Please Select)
        var Macros = from c in xrm.new_macroSet
                     where c.new_InspectionType.Equals(Request.QueryString["type"]) && !c.new_name.Contains("PLEASE SELECT")
                     orderby c.new_name ascending
                     select new
                     {
                         MacroTitle = c.new_name + "-" + c.new_Description,
                         MacroDescription = c.new_Description
                     };

        selPhotoMacro.DataSource = Macros;
        selPhotoMacro.DataTextField = "MacroTitle";
        selPhotoMacro.DataValueField = "MacroDescription";
        selPhotoMacro.DataBind();
    }

    protected void Upload(object sender, EventArgs e)
    {
        Session["Image"] = PhotoUpload.PostedFile;
        Stream fs = PhotoUpload.PostedFile.InputStream;
        BinaryReader br = new BinaryReader(fs);
        byte[] bytes = br.ReadBytes((Int32)fs.Length);
        string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);

        Image1.ImageUrl = "data:image/png;base64," + base64String;
        Panel1.Visible = true;

        //hide upload
        btnUpload.Visible = false;
    }

    protected void Cancel(object sender, EventArgs e)
    {
        Response.Redirect(Request.Url.AbsoluteUri);
    }

    protected void SaveImage(object sender, EventArgs e)
    {
        var CRMService = CRMHelper.GetCRMService();

        //instantiate the object
        new_additionalphoto p = new new_additionalphoto();

        string path = Server.MapPath("~/Assets/") + Request.QueryString["id"];

        //CREATE FOLDER FOR PHOTOS
        try
        {
            if (Directory.Exists(path))
            {
                //Response.Write("Path exists!");

            }
            //create directory
            DirectoryInfo di = Directory.CreateDirectory(path);

        }
        catch (Exception DirError)
        {
            Response.Write(DirError.ToString());

        }

        string ImageURL = "http://website/" + Request.QueryString["id"] + "/";

        HttpPostedFile postedFile = (HttpPostedFile)Session["Image"];


        //if (PhotoUpload.HasFile && PhotoUpload.PostedFile != null)
        //{
            //string theImage = PhotoUpload.FileName;
            string theImage = postedFile.FileName;

            if (System.IO.Path.GetExtension(theImage) == ".gif" || (System.IO.Path.GetExtension(theImage) == ".jpg") || (System.IO.Path.GetExtension(theImage) == ".jpeg"))
            {
                PhotoUpload.SaveAs((path + "/") + theImage);
                p.new_name = ImageURL + theImage;
            }
            else
            {
                Response.Write(System.IO.Path.GetExtension(theImage));
            }
        //}

        p.new_Photo = new EntityReference("new_additionalphoto", new Guid(Request.QueryString["id"]));
        p.new_Description = txtDescription.Text;

        var Id = CRMService.Create(p);
        Response.Redirect(Request.Url.AbsoluteUri);

        //labMessage.Text = "Photo Attached";

    }
}

}

上面的代码是将记录保存到数据库,并保存到服务器(但是,我注意到在服务器上它不太正确,因为它显示为0Kb)。

我没有添加代码来将图像从高分辨率调整为72dpi,因为我无法完成如何实现这一目标。

我对C#慢慢感到满意,并且非常感谢任何人协助如何在通过LINQ代码存储文件名保存到服务器之前重新调整图像大小。

0 个答案:

没有答案