你所在位置:首页Asp.net开发 → ASP.NET C# MVC +Jquery 实现图片上传、剪辑、缩略、水印

ASP.NET C# MVC +Jquery 实现图片上传、剪辑、缩略、水印

发布时间:2019-07-12

前段时间,写了个专门用来缩略和水印图片的! 后来在实际运用中,发现了好多不足地方,后来对进行了一些优化.
今天整理了一下,算是笔记吧!
这里呢!简单演示一下,从上传、剪辑、缩略、水印的整个流程,希望大家多多指出缺点:
这里我是C#MVC3.0进行演示的:
上传
  View Code
页面端:
@using (Html.BeginForm("uploadfile", "template", FormMethod.Post, new { id = "submitform", enctype = "multipart/form-data" }))
{
        <input type="file" name="pic"/>
        <input type="button" value="提交" onclick="submitformkkk();"/>
}

<script src="/scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
       function submitformkkk() {
            $("#submitform").ajaxSubmit({
                success: function (responseText) {
                    $("#photo").attr("src", responseText);
                }
            });
        }
</script>
控制器Action:
        public ActionResult Uploadfile()
        {
            //上传文件
            HttpPostedFileBase hp = Request.Files["pic"];
            string waring = ""; //上传警告信息
            string savepath = ImageDealLib.uploadbystream(hp.InputStream, "/images/", out waring);
            return Content(savepath);----返回给页面剪辑图片使用
        }

剪辑图片
  View Code
页面端:
<link href="/scripts/jquery.imgareaselect-0.9.8/css/imgareaselect-default.css"  rel="stylesheet" type="text/css" />
<script src="/scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.imgareaselect-0.9.8/scripts/jquery.imgareaselect.pack.js" type="text/javascript"></script>
  <img src="" id="photo" alt="" style=" cursor:move"/>   ---->上传成功后,原图展示
  <img src="" id="photo2" alt=""/>                       ----->剪辑成功后,效果展示
 
<script type="text/javascript">
        $(document).ready(function () {
            $('#photo').imgAreaSelect({
                fadeSpeed: 500,
                autoHide: false,
                handles: true,
                persistent: false,
                onSelectEnd: function (img, selection) {
                    var x1, y1, xwidth, yheight, spath;
                    x1 = selection.x1;
                    y1 = selection.y1;
                    xwidth = selection.width;
                    yheight = selection.height;
 
                    picpath = $("#photo").attr("src");
 
                    $.post("/template/crop", { x1: x1, y1: y1, width: xwidth, height: yheight, picpath: picpath }, function (url) {
 
                        $("#photo2").attr("src", url + "" + Math.random());
                    })
 
                }
            });
        });
</script>
 
控制器Action:
        [HttpPost]
        public ActionResult Crop(FormCollection collection)
        {
            int x1=int.Parse(collection["x1"]);
            int y1 = int.Parse(collection["y1"]);
            int width = int.Parse(collection["width"]);
            int height = int.Parse(collection["height"]);
            string picpath = collection["picpath"];
            string warning = "";  //剪辑警告信息
            string d = ImageDealLib.imgcrop(picpath, "/images/", x1, y1, width, height, ImageDealLib.FileCache.Save, out warning);
            return Content(d);
        }
 

为了满足网站不同尺寸图片展示需要,提供图片缩略和水印,假设,经上面2步处理后的图片保存地址已确定,这里假定为
string savepath
下面进行缩略、水印:
  View Code
string warning="";
string suoluepic= ImageDealLib.Resizepic(savepath, ImageDealLib.ResizeType.XY, "/images/", ImageDealLib.ImageType.JPEG, 1280, 800, ImageDealLib.FileCache.Save, out warning);
string waterpic = ImageDealLib.makewatermark(suoluepic, "/images/w.png", ImageDealLib.WaterType.Random, "/images/", ImageDealLib.ImageType.JPEG, ImageDealLib.FileCache.Save, out warning2);
 

OK,完成!  下面附上核心处理:
commonfun.cs   公用函数
  View Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using System.Web;
using System.IO;

namespace ImgClassLib
{
    /// <summary>
    /// 公用函数
    /// </summary>
    public partial class ImageDealLib
    {
        /// <summary>
        /// 根据文件路径判断文件是否存在
        /// </summary>
        /// <param name="filepath">文件路径</param>
        /// <param name="model">返回模式,m:返回map地址不检查文件是否存在,c:检测文件是否存在,并返回map地址</param>
        /// <param name="mappath">map路径</param>
        /// <returns></returns>
        public static bool FileExistMapPath(string filepath, FileCheckModel model, out string mappath)
        {
            bool checkresult = false;
            switch (model)
            {
                case FileCheckModel.M:
                    mappath = HttpContext.Current.Server.MapPath(filepath);
                    checkresult = true;
                    break;
                case FileCheckModel.C:
                    if (File.Exists(System.Web.HttpContext.Current.Server.MapPath(filepath)))
                    {
                        mappath = HttpContext.Current.Server.MapPath(filepath);
                        checkresult = true;
                    }
                    else
                    {
                        mappath = null;
                        checkresult = false;
                    }
                    break;
                default:
                    mappath = "";
                    checkresult = false;
                    break;
            }
            return checkresult;
        }

        /// <summary>
        /// 图片保存类型
        /// JPEG:.jpg格式;
        /// GIF:.gif格式;
        /// PNG:.png格式;
        /// </summary>
        public enum ImageType
        {
            JPEG,
            GIF,
            PNG
        }

        /// <summary>
        /// 水印模式
        /// Center:中间;
        /// CenterUp:中上;
        /// CenterDown:中下;
        /// LeftUp:左上;
        /// LeftDown:左下;
        /// RightUp:右上;
        /// RightDown:右下;
        /// Random:随机;
        /// </summary>
        public enum WaterType
        {
            Center,
            CenterUp,
            CenterDown,
            LeftUp,
            LeftDown,
            RightUp,
            RightDown,
            Random
        }

        /// <summary>
        /// 缩略模式
        /// X--按宽度缩放,高着宽比例;
        /// Y--按高度缩放,宽着宽比例;
        /// XY--按给定mwidth,mheight(此模式mwidth,mheight为必须值)进行缩略;
        /// </summary>
        public enum ResizeType
        {
            X,
            Y,
            XY
        }

        /// <summary>
        /// 文件检测模式
        /// M:不检测文件是否存在,返回ServerMapPath;
        /// C:检测文件是否存在,返回ServerMapPath;
        /// </summary>
        public enum FileCheckModel
        {
            M,
            C
        }

        /// <summary>
        /// 原图文件是否保存
        /// Delete:保存
        /// Save:不保存,删除
        /// </summary>
        public enum FileCache
        {
            Save,
            Delete
        }
    }
}

imgcrop.cs  图片剪辑
  View Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using System.Drawing;

namespace ImgClassLib
{
    public partial class ImageDealLib
    {
        public static string lastcroppic = "";//上一张已剪切生成的文件名
        public static string diffpicpath = "";//上一张要被剪切的原图地址
        /// <summary>
        /// 图片剪切
        /// </summary>
        /// <param name="picpath">源图片文件地址</param>
        /// <param name="spath">剪切临时文件地址</param>
        /// <param name="x1">x起始坐标</param>
        /// <param name="y1">y起始坐标</param>
        /// <param name="width">宽度</param>
        /// <param name="height">高度</param>
        /// <param name="filecache">源文件处理方式</param>
        /// <param name="warning">处理警告信息</param>
        /// <returns>剪切图片地址</returns>
       
        public static string imgcrop(string picpath, string spath, int x1, int y1, int width, int height, FileCache filecache,out string warning)
        {
            //反馈信息
            System.Text.StringBuilder checkmessage = new System.Text.StringBuilder();

            //从指定源图片,创建image对象
            string _sourceimg_common_mappath = "";

            //检测源文件
            bool checkfile = false;
            checkfile = FileExistMapPath(picpath, FileCheckModel.C, out _sourceimg_common_mappath);

            System.Drawing.Image _sourceimg_common = null;
            System.Drawing.Bitmap _currimg_common = null;
            System.Drawing.Graphics _g_common = null;

            if (checkfile == true)
            {
                //从源文件创建imgage
                _sourceimg_common = System.Drawing.Image.FromFile(_sourceimg_common_mappath);

                //从指定width、height创建bitmap对象
                _currimg_common = new System.Drawing.Bitmap(width, height);

                //从_currimg_common创建画笔
                _g_common = Graphics.FromImage(_currimg_common);

                //设置画笔
                _g_common.CompositingMode = System.Drawing.Drawing2D.CompositingMode.SourceOver;
                _g_common.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
                _g_common.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.Half;

                //绘制图片
                _g_common.DrawImage(_sourceimg_common, new Rectangle(0, 0, width, height), new Rectangle(x1, y1, width, height), GraphicsUnit.Pixel);

                //保存图片
                string _spath_common_mappath = "";

                //判断是否是对同一张图片进行剪切
                //判断是否,已更新剪切图片,防止覆盖上一张已完成剪切的图片
                spath = string.IsNullOrEmpty(lastcroppic) spath + Guid.NewGuid().ToString() + ".jpg" : (diffpicpath == picpath lastcroppic : spath + Guid.NewGuid().ToString() + ".jpg");

                lastcroppic = spath;
                diffpicpath = picpath;

                FileExistMapPath(spath, FileCheckModel.M, out _spath_common_mappath);

                _currimg_common.Save(_spath_common_mappath, System.Drawing.Imaging.ImageFormat.Jpeg);

                //释放
                _sourceimg_common.Dispose();
                _currimg_common.Dispose();
                _g_common.Dispose();

                //处理原文件
                int filecachecode = filecache.GetHashCode();

                //文件缓存方式:Delete,删除原文件
                if (filecachecode == 1)
                {
                    System.IO.File.Delete(_sourceimg_common_mappath);
                }

                //返回相对虚拟路径
                warning = "";
                return spath;
            }

            checkmessage.Append("error:未能找到剪切原图片;");

            warning = checkmessage.ToString().TrimEnd(';');

            return "";
        }
    }
}

skeletonize.cs 图片缩略
  View Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using System.Web;
using System.Drawing;
using System.IO;

namespace ImgClassLib
{
    /// <summary>
    /// 图片处理:缩略图片
    /// </summary>
    public partial class ImageDealLib
    {
       
        /// <summary>
        /// 根据指定:缩略宽、高,缩略图片并保存
        /// 返回图片虚拟路径,和一个警告信息,可根据此信息获取图片合成信息
        /// </summary>
        /// <param name="picpath">原图路径</param>
        /// <param name="model">缩略模式[X,Y,XY](默认XY模式)</param>
        /// <param name="spath">文件保存路径(默认跟路径)</param>
        /// <param name="imgtype">图片保存类型</param>
        /// <param name="mwidth">缩略宽度(默认原图高度)</param>
        /// <param name="mheight">缩略高度(默认原图高度)</param>
        /// <param name="filecache">原文件处理方式</param>
        /// <param name="warning">处理警告信息</param>
        /// <returns>错误,返回错误信息;成功,返回图片路径</returns>
       
        public static string Resizepic(string picpath, ResizeType model, string spath, ImageType imgtype, double mwidth, double mheight, FileCache filecache, out string warning)
        {
            //反馈信息
            System.Text.StringBuilder checkmessage = new System.Text.StringBuilder();

            //文件保存路径
            spath = string.IsNullOrEmpty(spath) "/" : spath;

            //缩略宽度
            double swidth = mwidth.HasValue double.Parse(mwidth.ToString()) : 0;

            //缩略高度
            double sheight = mheight.HasValue double.Parse(mheight.ToString()) : 0;

            //从指定源图片,创建image对象
            string _sourceimg_common_mappath = "";

            //检测源文件
            bool checkfile = false;
            checkfile=FileExistMapPath(picpath,FileCheckModel.C, out _sourceimg_common_mappath);

            System.Drawing.Image _sourceimg_common=null;
            System.Drawing.Bitmap _currimg_common = null;
            System.Drawing.Graphics _g_common = null;

            if (checkfile == true)
            {
                //从源文件创建imgage
                _sourceimg_common = System.Drawing.Image.FromFile(_sourceimg_common_mappath);

                #region 缩略模式
                //缩略模式
                switch (model)
                {
                    case ResizeType.X:

                        #region X模式

                        //根据给定尺寸,获取绘制比例
                        double _width_scale = swidth / _sourceimg_common.Width;
                        //高着比例
                        sheight = _sourceimg_common.Height * _width_scale;

                        #endregion
                        ; break;
                    case ResizeType.Y:
                        #region Y模式

                        //根据给定尺寸,获取绘制比例
                        double _height_scale = sheight / _sourceimg_common.Height;
                        //宽着比例
                        swidth = _sourceimg_common.Width * _height_scale;

                        #endregion
                        ; break;
                    case ResizeType.XY:
                        #region XY模式

                        //当选择XY模式时,mwidth,mheight为必须值
                        if (swidth < 0
上一篇:ASP.NET MVC3 Razor 项目部署到聚拓互联虚拟主机
下一篇:Not find request .Net FrameWork Data Provider, may be not installed