zoukankan      html  css  js  c++  java
  • C# AJAXform上传图片

     前台:


    @{
        Layout = null;
    }

    <!DOCTYPE html>

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>

        <link href="~/Scripts/jquery.imgareaselect-0.9.10/css/imgareaselect-animated.css" rel="stylesheet" />   --引用
        <script src="~/Scripts/jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.pack.js"></script>  --引用
        <script src="~/Scripts/jquery.imgareaselect-0.9.10/scripts/jquery.min.js"></script>  --引用
        <script src="~/Scripts/jquery.imgareaselect-0.9.10/jquery-form.js"></script>  --引用



    </head>
    <body>
        <div>
            <form enctype="multipart/form-data" method="post" action="/show/markwater" id="submitForm">

                <input type="file" name="Exc" id="pic" />
                <input type="button" value="提交" onclick="submitForm();" />  

            </form>

            <!--原始图片展示  move:此光标指示某对象可被移动-->
            <img id="photo" style="cursor:move"  src=""/>

            <!--效果图片展示-->
            <img id="photoNew" />
        </div>
    </body>
    </html>

    <script>

        $(document).ready(function () {

            debugger;
            //选择图片事件
            $('#photo').imgAreaSelect({
                                
                
                    fadeSpeed: 500,//设置为大于零的数字,则用优美的淡入/淡出动画来显示图片,默认值为 false
                    autoHide: false,//设置为true,当选择区域选择结束时消失,默认值为:false
                    handles: true,//设置为true,调整手柄则会显示在选择区域内,如果设置为"corners",则只有角处理会显示调整手柄,默认值为false
                    persistent: false,//设置为true,选择区以外的点击将不会启动一个新的选区(即用户将只能移动/调整现有的选择范围),默认值为false
                    onSelectEnd: function (img, selection)//结束选区时的回调函数
                    {
                        debugger;
                        var x1, y1, xwidth, yheight, spath;
                        x1 = selection.x1;//选择区域的左上角坐标
                        y1 = selection.y1;//选择区域的左上角坐标
                        xwidth = selection.width;
                        yheight = selection.height;
                        picurl = $("#photo").attr("src");
                  
                        $.post("/show/crop", { x1: x1, y1: y1, xwidth, height: yheight, picurl: picurl }, function (url) {
                            $("#photoNew").attr("src", url + "?" + Math.random());//随机数的作用:避免游览器缓存图片
                        })
                   }
            });
        });







        //form窗体异步提交事件
        function submitForm()
        {
            debugger;
            $("#submitForm").ajaxSubmit({
                success:function(responseText)
                {
                    debugger;
                    alert(responseText);
                    $("#photo").attr("src",responseText);//给照片赋值
                }

            })
        }
    </script>

    后台:

    using FileUploadDemo.Common;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using System.Drawing;
    using System.Drawing.Imaging;
    using System.Drawing.Drawing2D;
    using System.IO;

    namespace 图片水印.Controllers
    {
        public class showController : Controller
        {
            // GET: show
            public ActionResult Index()
            {
              
                return View();

            }


            /// <summary>
            /// 上传
            /// </summary>
            /// <param name="pic"></param>
            /// <returns></returns>
            [HttpPost]
            public ActionResult uppicture(HttpPostedFileBase pic)
            {
                var path = Server.MapPath("/images/");
                string fname = Guid.NewGuid().ToString()+pic.FileName;
                pic.SaveAs(path+fname);

                string names = "/images/"+fname;
                string waring = "";

                //使用流方式,上产并保存文件
                string url = ImageHelper.uploadbystream(pic.InputStream,"/images/",out waring);

                //添加水印

                string WarkUrl = ImageHelper.makewatermark(url, names,
                    ImageHelper.WaterType.Center,"/images/",
                    ImageHelper.ImageType.JPEG,
                    ImageHelper.FileCache.Delete,
                    out waring);

                return Content(WarkUrl);

            }


            /// <summary>
            /// 裁剪
            /// </summary>
            /// <param name="collection"></param>
            /// <returns></returns>
            [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 picurl = collection["picurl"];

                string warning = "";  //返回图片剪辑过程的警告信息
                string Url = ImageHelper.imgcrop(picurl, "/images/", x1, y1, width, height, ImageHelper.FileCache.Save, out warning);

                return Content(Url);
            }



            [HttpPost]   //上传功能2
             public ActionResult markwater(HttpPostedFileBase Exc)
            {
                var path = Server.MapPath("/images/");
                if (!Directory.Exists(path))
                {
                    Directory.CreateDirectory(path);
                }            
                string fname = Guid.NewGuid().ToString() + Exc.FileName;
                Exc.SaveAs(path + fname);

                string names =path + fname;//原图片和水印图片路径
                string newnames = path + Guid.NewGuid().ToString() + ".png"; ///保存的路径

                //调用方法
                BuildWatermark(names, path+ "w.png", "123123",newnames);


              
                int i = newnames.LastIndexOf("\images");//把要保存的图片的物理路径的index最后出现的位置
                string srcs = newnames.Substring(i);  //截取index至所有长度。
                return Content(srcs);   //返回路径  

            }

            /// <summary>
            /// 添加文字水印
            /// </summary>
            public void ss()
            {
                string ImagePath = @"C:Users1Pictures斗图v2-93729ef5335e8f6d8633213c88cb14a8_r.jpg";

                try
                {
                    Image image = Image.FromFile(ImagePath);

                    Graphics g = Graphics.FromImage(image);

                    //水印内容
                    string waterText = "wangyblzu";

                    Font font = new Font("宋体", 18);

                    //用于确定水印的大小
                    SizeF zisizeF = new SizeF();
                    zisizeF = g.MeasureString(waterText, font);

                    //亮度,红色,绿色,蓝色
                    SolidBrush solidBrush = new SolidBrush(Color.FromArgb(255, 255, 0, 0));

                    //水印
                    g.DrawString(waterText, font, solidBrush, new PointF(image.Width / 2+(image.Width/4), (image.Height- image.Height /4 )));

                    //图片另存
                    image.Save(@"C:Users1Pictures斗图4ec5b03"+Guid.NewGuid().ToString()+"69c5b59e3d22_r.jpg", System.Drawing.Imaging.ImageFormat.Jpeg);
                }
                catch (Exception ex)
                {
                    throw ex;
                }
            }


            //图片方法2
              /// <summary>      
                    /// Creating a Watermarked Photograph with GDI+ for .NET      
                    /// </summary>      
                    /// <param name="rSrcImgPath">原始图片的物理路径</param>      
                    /// <param name="rMarkImgPath">水印图片的物理路径</param>      
                    /// <param name="rMarkText">水印文字(不显示水印文字设为空串)</param>      
                    /// <param name="rDstImgPath">输出合成后的图片的物理路径</param>  
            public void BuildWatermark(string rSrcImgPath, string rMarkImgPath, string rMarkText, string rDstImgPath)
            {
                //以下(代码)从一个指定文件创建了一个Image 对象,然后为它的 Width 和 Height定义变量。      
                //这些长度待会被用来建立一个以24 bits 每像素的格式作为颜色数据的Bitmap对象。      
                Image imgPhoto = Image.FromFile(rSrcImgPath);
                int phWidth = imgPhoto.Width;
                int phHeight = imgPhoto.Height;
                Bitmap bmPhoto = new Bitmap(phWidth, phHeight, PixelFormat.Format24bppRgb);
                bmPhoto.SetResolution(72, 72);
                Graphics grPhoto = Graphics.FromImage(bmPhoto);
                //这个代码载入水印图片,水印图片已经被保存为一个BMP文件,以绿色(A=0,R=0,G=255,B=0)作为背景颜色。      
                //再一次,会为它的Width 和Height定义一个变量。      
                Image imgWatermark = new Bitmap(rMarkImgPath);
                int wmWidth = imgWatermark.Width;
                int wmHeight = imgWatermark.Height;
                //这个代码以100%它的原始大小绘制imgPhoto 到Graphics 对象的(x=0,y=0)位置。      
                //以后所有的绘图都将发生在原来照片的顶部。      
                grPhoto.SmoothingMode = SmoothingMode.AntiAlias;
                grPhoto.DrawImage(
                     imgPhoto,
                     new Rectangle(0, 0, phWidth, phHeight),
                     0,
                     0,
                     phWidth,
                     phHeight,
                     GraphicsUnit.Pixel);
                //为了最大化版权信息的大小,我们将测试7种不同的字体大小来决定我们能为我们的照片宽度使用的可能的最大大小。      
                //为了有效地完成这个,我们将定义一个整型数组,接着遍历这些整型值测量不同大小的版权字符串。      
                //一旦我们决定了可能的最大大小,我们就退出循环,绘制文本      
                int[] sizes = new int[] { 16, 14, 12, 10, 8, 6, 4 };
                Font crFont = null;
                SizeF crSize = new SizeF();
                for (int i = 0; i < 7; i++)
                {
                    crFont = new Font("arial", sizes[i],
                          FontStyle.Bold);
                    crSize = grPhoto.MeasureString(rMarkText,
                          crFont);
                    if ((ushort)crSize.Width < (ushort)phWidth)
                        break;
                }
                //因为所有的照片都有各种各样的高度,所以就决定了从图象底部开始的5%的位置开始。      
                //使用rMarkText字符串的高度来决定绘制字符串合适的Y坐标轴。      
                //通过计算图像的中心来决定X轴,然后定义一个StringFormat 对象,设置StringAlignment 为Center。      
                int yPixlesFromBottom = (int)(phHeight * .05);
                float yPosFromBottom = ((phHeight -
                     yPixlesFromBottom) - (crSize.Height / 2));
                float xCenterOfImg = (phWidth / 2);
                StringFormat StrFormat = new StringFormat();
                StrFormat.Alignment = StringAlignment.Center;
                //现在我们已经有了所有所需的位置坐标来使用60%黑色的一个Color(alpha值153)创建一个SolidBrush 。      
                //在偏离右边1像素,底部1像素的合适位置绘制版权字符串。      
                //这段偏离将用来创建阴影效果。使用Brush重复这样一个过程,在前一个绘制的文本顶部绘制同样的文本。      
                SolidBrush semiTransBrush2 =
                     new SolidBrush(Color.FromArgb(153, 0, 0, 0));
                grPhoto.DrawString(rMarkText,
                     crFont,
                     semiTransBrush2,
                     new PointF(xCenterOfImg + 1, yPosFromBottom + 1),
                     StrFormat);
                SolidBrush semiTransBrush = new SolidBrush(
                     Color.FromArgb(153, 255, 255, 255));
                grPhoto.DrawString(rMarkText,
                     crFont,
                     semiTransBrush,
                     new PointF(xCenterOfImg, yPosFromBottom),
                     StrFormat);
                //根据前面修改后的照片创建一个Bitmap。把这个Bitmap载入到一个新的Graphic对象。      
                Bitmap bmWatermark = new Bitmap(bmPhoto);
                bmWatermark.SetResolution(
                     imgPhoto.HorizontalResolution,
                     imgPhoto.VerticalResolution);
                Graphics grWatermark =
                     Graphics.FromImage(bmWatermark);
                //通过定义一个ImageAttributes 对象并设置它的两个属性,我们就是实现了两个颜色的处理,以达到半透明的水印效果。      
                //处理水印图象的第一步是把背景图案变为透明的(Alpha=0, R=0, G=0, B=0)。我们使用一个Colormap 和定义一个RemapTable来做这个。      
                //就像前面展示的,我的水印被定义为100%绿色背景,我们将搜到这个颜色,然后取代为透明。      
                ImageAttributes imageAttributes =
                     new ImageAttributes();
                ColorMap colorMap = new ColorMap();
                colorMap.OldColor = Color.FromArgb(255, 0, 255, 0);
                colorMap.NewColor = Color.FromArgb(0, 0, 0, 0);
                ColorMap[] remapTable = { colorMap };
                //第二个颜色处理用来改变水印的不透明性。      
                //通过应用包含提供了坐标的RGBA空间的5x5矩阵来做这个。      
                //通过设定第三行、第三列为0.3f我们就达到了一个不透明的水平。结果是水印会轻微地显示在图象底下一些。      
                imageAttributes.SetRemapTable(remapTable,
                     ColorAdjustType.Bitmap);
                float[][] colorMatrixElements = {
                                                     new float[] {1.0f,  0.0f,  0.0f,  0.0f, 0.0f},
                                                     new float[] {0.0f,  1.0f,  0.0f,  0.0f, 0.0f},
                                                     new float[] {0.0f,  0.0f,  0.3f,  0.0f, 0.0f},
                                                     new float[] {0.0f,  0.0f,  0.0f,  0.3f, 0.0f},
                                                     new float[] {0.0f,  0.0f,  0.0f,  0.0f, 1.0f}
                                                };
                ColorMatrix wmColorMatrix = new
                     ColorMatrix(colorMatrixElements);
                imageAttributes.SetColorMatrix(wmColorMatrix,
                     ColorMatrixFlag.Default,
                     ColorAdjustType.Bitmap);
                //随着两个颜色处理加入到imageAttributes 对象,我们现在就能在照片右手边上绘制水印了。      
                //我们会偏离10像素到底部,10像素到左边。      
                int markWidth;
                int markHeight;
                //mark比原来的图宽      
                if (phWidth <= wmWidth)
                {
                    markWidth = phWidth - 10;
                    markHeight = (markWidth * wmHeight) / wmWidth;
                }
                else if (phHeight <= wmHeight)
                {
                    markHeight = phHeight - 10;
                    markWidth = (markHeight * wmWidth) / wmHeight;
                }
                else
                {
                    markWidth = wmWidth;
                    markHeight = wmHeight;
                }
                int xPosOfWm = ((phWidth - markWidth) - 10);
                int yPosOfWm = 10;
                grWatermark.DrawImage(imgWatermark,
                     new Rectangle(xPosOfWm, yPosOfWm, markWidth,
                     markHeight),
                     0,
                     0,
                     wmWidth,
                     wmHeight,
                     GraphicsUnit.Pixel,
                     imageAttributes);
                //最后的步骤将是使用新的Bitmap取代原来的Image。 销毁两个Graphic对象,然后把Image 保存到文件系统。      
                imgPhoto = bmWatermark;
                grPhoto.Dispose();
                grWatermark.Dispose();
                imgPhoto.Save(rDstImgPath, ImageFormat.Jpeg);
                imgPhoto.Dispose();
                imgWatermark.Dispose();
            }



          
           

       
         

    }
        }


  • 相关阅读:
    [译]CasperJS,基于PhantomJS的工具包
    [译]JavaScript:typeof的用途
    [译]JavaScript写的一个quine程序
    [译]Ruby中的解构赋值
    [译]DOM:元素ID就是全局变量
    [译]ECMAScript 6中的集合类型,第一部分:Set
    [译]JavaScript:Array.prototype和[]的性能差异
    [译]Web Inspector开始支持CSS区域
    [译]JavaScript:反科里化"this"
    [译]JavaScript:用什么来缩进
  • 原文地址:https://www.cnblogs.com/yxlx/p/7825799.html
Copyright © 2011-2022 走看看