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日

相关文章

  • 手动把asp.net的类生成dll文件的方法

    为手动把ASP.NET的类生成DLL文件，需要按照以下步骤操作： 步骤一：创建ASP.NET类 首先，我们需要创建一个ASP.NET类。在Visual Studio中，可以通过以下步骤创建： 打开Visual Studio，创建一个新项目。 在“新建项目”对话框中，选择“ASP.NET Web 应用程序”类型。 输入项目名称，选择位置，点击“确定”。 在“新…

    C# 2023年5月31日
    00

  • C# Path.GetTempFileName()方法： 获取一个唯一的临时文件名

    Path.GetTempFileName()方法作用及使用方法 C#的Path.GetTempFileName()方法可以返回一个唯一的临时文件名，并创建该文件。此临时文件的路径和文件名是在指定目录（如：%temp%）中由系统自动生成的，以确保每次调用时都必须生成唯一的文件名。 使用方法 Path.GetTempFileName()方法的使用非常简单，只需直…

    C# 2023年4月19日
    00

  • C#多线程Singleton(单件)模式模板

    C#多线程Singleton(单件)模式模板是一种在多线程环境下保证对象只被创建一次并且可以被多线程共享的设计模式。下面我将提供一个完整的攻略来帮助大家了解如何在C#中实现多线程Singleton模式。 步骤一: 创建Singleton模板类 创建一个Singleton模板类，确保只有一个实例可以被创建。示例代码如下： public sealed class…

    C# 2023年5月31日
    00

  • c# 模拟串口通信 SerialPort的实现示例

    下面是关于“C#模拟串口通信SerialPort的实现示例”的攻略： 第一步：准备工作 在实现具体的代码之前，需要先准备一些基础工作。包括： 准备一个模拟串口的环境。这可以通过安装一个虚拟串口软件来实现（如“虚拟串口驱动程序”） 引入SerialPort类。在程序中需要使用System.IO.Ports命名空间，可以通过在程序中添加以下引用来实现：using…

    C# 2023年6月6日
    00

  • C#窗体间常用的几种传值方式及委托与事件详解

    C#窗体间常用的几种传值方式及委托与事件详解 本文将介绍C#窗体之间常用的几种传值方式，包括参数传递、全局变量、委托、事件等，并详解委托与事件的概念和使用方法。 参数传递 参数传递是最简单的窗体之间传值的方式，即在调用方法时将参数传递给被调用方法。 示例： public partial class Form1 : Form { public Form1() …

    C# 2023年5月31日
    00

  • 如何使用C#读写锁ReaderWriterLockSlim

    下面是详细讲解如何使用C#读写锁ReaderWriterLockSlim的攻略： 什么是ReaderWriterLockSlim？ ReaderWriterLockSlim是一个线程同步机制，用于实现在多个线程之间共享对某个资源的读取和写入。它可以提供高性能的读取操作和相对低性能的写操作。 使用ReaderWriterLockSlim可以控制多个线程同时读取…

    C# 2023年5月15日
    00

  • c#定时运行程序分享(定时程序)

    下面我会为你详细讲解“C#定时运行程序分享(定时程序)”的完整攻略： 定时运行程序的思路 获取当前时间，判断是否到达指定时间 如果是指定时间，则执行程序 如果不是指定时间，则等待下一次检查 开发步骤 步骤一：添加引用 在Visual Studio的Solution Explorer中，右键单击项目名称，然后选择“添加引用”。 在“添加引用”对话框中，选择“S…

    C# 2023年5月15日
    00

  • C#中字符串的一般性和特殊性

    C#中字符串的一般性和特殊性 如果你正在学习C#，字符串（string）是一个基础重要的数据类型。在本文中，我们将介绍C#中字符串的一般性和特殊性，以及在实际编程中如何使用它们。 C#中字符串的一般性 字符串的定义 在C#中定义字符串变量的语法格式为： string variableName; 其中，variableName为字符串变量的名称。可以使用赋值运…

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