1. Python技术站首页
  2. 其他
  3. C#

基于asp.net实现图片在线上传并在线裁剪功能

• C#

下面是基于asp.net实现图片在线上传并在线裁剪功能的完整攻略：

1. 确定上传插件

为了实现在线上传图片，我们需要选择一个合适的上传插件。目前市场上比较流行的上传插件有uploadify和plupload，我们可以根据需求自行选择。

在这里，我以uploadify为例进行说明。

2. 实现图片上传

需先引入jquery、uploadify相关的js和css文件，然后在网页中加入一下代码：

<input type="file" name="file_upload" id="file_upload" />

再添加一下jquery脚本：

$(function() {
    $('#file_upload').uploadify({
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/upload.php'
    });
});

其中，'swf'表示flash文件路径，'uploader'表示处理上传请求的服务器文件路径。在服务器中，需要将上传的文件保存到web服务器上的某个文件夹以便后续裁剪操作。例如，我们可以在服务器端使用ASP.NET语言编写一个叫做upload.aspx的文件来处理上传请求。

以下是upload.aspx代码：

protected void Page_Load(object sender, EventArgs e)
{
    string path = Server.MapPath("~/upload/");//上传文件存储的路径
    if (!System.IO.Directory.Exists(path))//判断是否需要创建目录
    {
        System.IO.Directory.CreateDirectory(path);
    }
    HttpFileCollection files = Request.Files;//获取上传文件列表
    for (int i = 0; i < files.Count; i++)
    {
        HttpPostedFile file = files[i];
        string fileName = System.IO.Path.GetFileName(file.FileName);
        file.SaveAs(path + "/" + fileName);//保存文件到本地
    }
}

至此，图片上传功能成功实现。

3. 实现图片裁剪

接下来，我们需要引用Jcrop库来实现图片裁剪功能。Jcrop是一款强大的图片裁剪插件，支持多种裁剪模式和裁剪尺寸。我们只需要在需要裁剪的图片上添加以下代码即可：

<img src="test.jpg" id="cropbox" />

然后，添加以下jquery脚本：

$(function() {
    $('#cropbox').Jcrop({
        aspectRatio: 1, //裁剪比例为1:1
        onSelect: updateCoords //裁剪结束后会调用updateCoords函数
    });
});

function updateCoords(c)
{
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);//更新表单中的数据
    $('#thumb').css({
        width: Math.round(100/c.w*$('#cropbox').width()) + 'px',
        height: Math.round(100/c.h*$('#cropbox').height()) + 'px',
        marginLeft: '-' + Math.round(100/c.w*c.x) + 'px',
        marginTop: '-' + Math.round(100/c.h*c.y) + 'px'//设置预览窗口中图片的尺寸和位置
    });
}

以上代码实现了裁剪框的生成，当用户选中裁剪区域后，会自动调用updateCoords函数，更新预览窗口中图片的尺寸和位置。

裁剪后，我们还需要通过服务器端将裁剪后的图片保存到本地。

以下是处理裁剪请求的代码：

protected void Page_Load(object sender, EventArgs e)
{
    int x = int.Parse(Request.Params["x"]);//获取裁剪区域的坐标和宽高尺寸
    int y = int.Parse(Request.Params["y"]);
    int w = int.Parse(Request.Params["w"]);
    int h = int.Parse(Request.Params["h"]);
    string imgPath = Server.MapPath("~/upload/test.jpg");//原始图片路径，从web.config文件中读取更佳
    string savePath = Server.MapPath("~/upload/thumb.jpg");//裁剪后保存的路径，从web.config文件中读取更佳
    FileStream fileStream = new FileStream(imgPath, FileMode.Open);//打开原始图片
    Image img = Image.FromStream(fileStream);//读取图片
    Bitmap bitmap = new Bitmap(w, h);//创建裁剪后保存的位图对象
    Graphics graphics = Graphics.FromImage(bitmap);//创建Graphics对象，用于绘制新图片
    graphics.DrawImage(img, new Rectangle(0, 0, w, h), new Rectangle(x, y, w, h), GraphicsUnit.Pixel);//绘制裁剪后新图片
    Bitmap result = new Bitmap(bitmap);//创建最终保存的位图对象
    result.Save(savePath, System.Drawing.Imaging.ImageFormat.Jpeg);//保存图片
    fileStream.Dispose();//释放资源
    img.Dispose();
    bitmap.Dispose();
    graphics.Dispose();
    result.Dispose();
}

至此，基于asp.net实现图片在线上传并在线裁剪功能的完整攻略就结束了。

示例说明

示例一

用户要上传一张图片到服务器，并将其裁剪成400*400的正方形。

<input type="file" name="file_upload" id="file_upload" />
<img src="" width="400" height="400" id="thumb" />

$(function() {
    $('#file_upload').uploadify({
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/upload.aspx',
        'onUploadComplete' : function(file) {
            $.ajax({
                url: '/crop.aspx',
                data: {
                    x: $('#x').val(),
                    y: $('#y').val(),
                    w: $('#w').val(),
                    h: $('#h').val()
                },
                success: function() {
                    $('#thumb').attr('src', '/upload/thumb.jpg');//上传完成后，裁剪图片并刷新预览窗口
                }
            });
        }
    });

    $('#cropbox').Jcrop({
        aspectRatio: 1,
        onSelect: updateCoords
    });

    function updateCoords(c)
    {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
        $('#thumb').css({
            width: Math.round(100/c.w*$('#cropbox').width()) + 'px',
            height: Math.round(100/c.h*$('#cropbox').height()) + 'px',
            marginLeft: '-' + Math.round(100/c.w*c.x) + 'px',
            marginTop: '-' + Math.round(100/c.h*c.y) + 'px'
        });
    }
});

protected void Page_Load(object sender, EventArgs e)
{
    string path = Server.MapPath("~/upload/");
    if (!System.IO.Directory.Exists(path))
    {
        System.IO.Directory.CreateDirectory(path);
    }
    HttpFileCollection files = Request.Files;
    for (int i = 0; i < files.Count; i++)
    {
        HttpPostedFile file = files[i];
        string fileName = System.IO.Path.GetFileName(file.FileName);
        file.SaveAs(path + "/" + fileName);
    }
}

protected void Page_Load(object sender, EventArgs e)
{
    int x = int.Parse(Request.Params["x"]);
    int y = int.Parse(Request.Params["y"]);
    int w = int.Parse(Request.Params["w"]);
    int h = int.Parse(Request.Params["h"]);
    string imgPath = Server.MapPath("~/upload/test.jpg");
    string savePath = Server.MapPath("~/upload/thumb.jpg");
    FileStream fileStream = new FileStream(imgPath, FileMode.Open);
    Image img = Image.FromStream(fileStream);
    Bitmap bitmap = new Bitmap(w, h);
    Graphics graphics = Graphics.FromImage(bitmap);
    graphics.DrawImage(img, new Rectangle(0, 0, w, h), new Rectangle(x, y, w, h), GraphicsUnit.Pixel);
    Bitmap result = new Bitmap(bitmap);
    result.Save(savePath, System.Drawing.Imaging.ImageFormat.Jpeg);
    fileStream.Dispose();
    img.Dispose();
    bitmap.Dispose();
    graphics.Dispose();
    result.Dispose();
}

示例二

用户要上传多张图片到服务器，并将其裁剪成200*200的正方形。

<input type="file" name="file_upload" id="file_upload" multiple="multiple" />
<ul id="thumbnails">
</ul>

$(function() {
    $('#file_upload').uploadify({
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/upload.aspx',
        'onUploadComplete' : function(file) {
            //上传完成后，按照顺序自动裁剪并刷新预览窗口
            $('#thumbnails').find('img').each(function(index) {
                var thumb = $(this);
                $.ajax({
                    url: '/crop.aspx',
                    data: {
                        x: thumb.data('x'),
                        y: thumb.data('y'),
                        w: thumb.data('w'),
                        h: thumb.data('h')
                    },
                    success: function() {
                        thumb.attr('src', '/upload/thumb' + index + '.jpg');
                    }
                });
            });
        }
    });

    $('#cropbox').Jcrop({
        aspectRatio: 1,
        onSelect: updateCoords
    });

    function updateCoords(c)
    {
        var thumb = $('<img>').attr({
            src: $('#cropbox').attr('src'),
            width: 200,
            height: 200
        }).data({
            x: c.x,
            y: c.y,
            w: c.w,
            h: c.h
        }).appendTo('#thumbnails');//在预览窗口中显示裁剪后的图片
    }
});

protected void Page_Load(object sender, EventArgs e)
{
    string path = Server.MapPath("~/upload/");
    if (!System.IO.Directory.Exists(path))
    {
        System.IO.Directory.CreateDirectory(path);
    }
    HttpFileCollection files = Request.Files;
    for (int i = 0; i < files.Count; i++)
    {
        HttpPostedFile file = files[i];
        string fileName = System.IO.Path.GetFileName(file.FileName);
        file.SaveAs(path + "/" + fileName);
    }
}

protected void Page_Load(object sender, EventArgs e)
{
    int x = int.Parse(Request.Params["x"]);
    int y = int.Parse(Request.Params["y"]);
    int w = int.Parse(Request.Params["w"]);
    int h = int.Parse(Request.Params["h"]);
    string imgPath = Server.MapPath("~/upload/test" + Request.Params["index"] + ".jpg");//index为图片编号，从0开始
    string savePath = Server.MapPath("~/upload/thumb" + Request.Params["index"] + ".jpg");
    FileStream fileStream = new FileStream(imgPath, FileMode.Open);
    Image img = Image.FromStream(fileStream);
    Bitmap bitmap = new Bitmap(w, h);
    Graphics graphics = Graphics.FromImage(bitmap);
    graphics.DrawImage(img, new Rectangle(0, 0, w, h), new Rectangle(x, y, w, h), GraphicsUnit.Pixel);
    Bitmap result = new Bitmap(bitmap);
    result.Save(savePath, System.Drawing.Imaging.ImageFormat.Jpeg);
    fileStream.Dispose();
    img.Dispose();
    bitmap.Dispose();
    graphics.Dispose();
    result.Dispose();
}

在示例二中，预览窗口会按照顺序显示上传的多张图片的缩略图，并自动裁剪成200*200的正方形。裁剪操作结束后，会自动刷新预览窗口中的缩略图。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于asp.net实现图片在线上传并在线裁剪功能 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月31日
下一篇 2023年5月31日

相关文章

  • c# RSA非对称加解密及XML&PEM格式互换方案

    关于“c#RSA非对称加解密及XML&PEM格式互换方案”的攻略，我们可以分为以下几个部分进行讲解： 1. RSA非对称加解密原理介绍 1.1 RSA加密原理 RSA加密公式为：$C = M ^ e$ mod $N$，其中： C为密文 M为明文 e为公钥，表示加密的指数 N为公钥，表示模数 mod为取模运算 1.2 RSA解密原理 RSA解密公式为：…

    C# 2023年5月15日
    00

  • C#实现Datatable排序的方法

    一、Datatable排序的方法简介 在C#中，Datatable是一个非常重要的数据结构之一。很多时候我们需要对Datatable进行排序来实现对数据的精细管理。依据不同的需求，我们可以对Datatable按照不同的列进行升序或降序排序。下面，我们将提供两个示例来讲解如何使用C#实现Datatable排序的方法。 二、示例1：对Datatable按照单一列…

    C# 2023年5月31日
    00

  • C#使用BackgroundWorker控件

    下面是关于C#使用BackgroundWorker控件的完整攻略。 什么是BackgroundWorker控件？ BackgroundWorker控件是C#中一种用于在后台执行操作的控件。它提供了一个简单的方法来执行长时间运行的任务而不会阻塞用户界面。它可以非常方便地执行异步操作，如下载或计算密集型任务等。 如何使用BackgroundWorker控件？ 使…

    C# 2023年5月15日
    00

  • C# 删除字符串中的中文（实例分享）

    对于这个主题，我会提供一些基于markdown的标准文本格式的攻略，帮助你更好地理解。 标题 首先，我们需要使用markdown的标准标题格式来说明这个主题。用一个一级标题来概括主题： C# 删除字符串中的中文（实例分享） 然后，我们使用二级标题来讲解具体步骤： 步骤 安装NuGet包System.Text.RegularExpressions csharp…

    C# 2023年6月8日
    00

  • C# File.WriteAllText – 将字符串写入文件

    File.WriteAllText 方法的作用是将指定字符串写入指定文件中，如果该文件已经存在则覆盖原有内容。该方法属于System.IO命名空间的成员方法，可直接调用。 使用方法： File.WriteAllText(string path, string contents); 其中path参数表示文件路径，相对路径或绝对路径均可；contents参数表示…

    C# 2023年4月19日
    00

  • C#中WebBroeser控件用法实例教程

    C#中WebBrowser控件用法实例教程 简介 WebBrowser控件可用于在C# Windows窗体应用程序中加载网页或HTML文档。其使用方法也非常简单，本文将提供WebBrowser控件的用法实例教程。 步骤 1. 在Windows Form中添加WebBrowser控件 在Visual Studio中创建一个Windows窗体应用程序，并在窗体设…

    C# 2023年6月7日
    00

  • c#中(int)、int.Parse()、int.TryParse、Convert.ToInt32的区别详解

    标题：C#中(int)、int.Parse()、int.TryParse()、Convert.ToInt32()的区别详解 在C#中，我们通常需要将字符串转换为整数类型，而常用的转换方法有四种，分别是： (int)； int.Parse()； int.TryParse()； Convert.ToInt32()。 下面将详细介绍这四种转换方法以及它们之间的区别…

    C# 2023年5月15日
    00

  • C#类中方法的执行顺序是什么

    C#中类的方法执行顺序是按照继承层次关系和调用顺序决定的，具体执行顺序如下： 静态构造函数 非静态构造函数 静态方法 非静态方法 其中，静态成员在程序启动时就已经存在，因此静态构造函数是在其他方法之前第一个运行的。而非静态成员只有在实例化对象后才会存在，因此非静态构造函数是在静态构造函数之后但在其他方法之前运行的。 下面是两个简单的例子，说明类中方法的执行顺…

    C# 2023年6月1日
    00
合作推广
合作推广
分享本页
返回顶部