码迷，mamicode.com
首页 > Windows程序 > 详细

C#MVC和cropper.js实现剪裁图片ajax上传的弹出层

时间：2018-02-06 20:16:31      阅读：947      评论：0      收藏：0      [点我收藏+]

标签：convert   返回   随机   formatter   iss   触摸   input   bit   简单   

 

　　 首先使用cropper.js插件，能够将剪裁后的图片返回为base64编码，后台根据base64编码解析保存图片。

jQuery.cropper：

　　 是一款使用简单且功能强大的图片剪裁jquery插件。该图片剪裁插件支持图片放大缩小，支持图片旋转，支持触摸屏设备，支持canvas，并且支持跨浏览器使用

　　网站：http://fengyuanchen.github.io/cropper/

　　可以自己搜索中文API

前台代码：

@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>上传图片</title>

    <script src="~/Content/js/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">

    <link href="~/Content/css/cropper.min.css" rel="stylesheet" />

    <link href="~/Content/css/sitelogo.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">

    <script src="~/Content/js/bootstrap.min.js"></script>
    <script src="~/Content/js/cropper.js"></script>
    <script src="~/Content/js/sitelogo.js"></script>


    <style type="text/css">
        .avatar-btns button {
            height: 35px;
        }
    </style>


</head>

<body>

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#avatar-modal" style="margin: 10px;">修改头像</button>

    <div class="user_pic" style="margin: 10px;">
        <img src="" />
    </div>

    <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="avatar-form" @*action="" enctype="multipart/form-data" method="post"*@ >
                    @*                    <form class="avatar-form">*@
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal" type="button">&times;</button>
                        <h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
                    </div>
                    <div class="modal-body">
                        <div class="avatar-body">
                            <div class="avatar-upload">
                                <input class="avatar-src" name="avatar_src" type="hidden">
                                <input class="avatar-data" name="avatar_data" type="hidden">
                                <label for="avatarInput" style="line-height: 35px;">图片上传</label>
                                <button class="btn btn-danger" type="button" style="height: 35px;" onclick="$(‘input[id=avatarInput]‘).click();">请选择图片</button>
                                <span id="avatar-name"></span>
                                <input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-9">
                                <div class="avatar-wrapper"></div>
                            </div>
                            <div class="col-md-3">
                                <div class="avatar-preview preview-lg" id="imageHead"></div>
                                <!--<div class="avatar-preview preview-md"></div>
                                <div class="avatar-preview preview-sm"></div>-->
                            </div>
                        </div>
                        <div class="row avatar-btns">
                            <div class="col-md-4">
                                <div class="btn-group">
                                    <button class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees">向左旋转</button>
                                </div>
                                <div class="btn-group">
                                    <button class="btn  btn-danger fa fa-repeat" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees">向右旋转</button>
                                </div>
                            </div>
                            <div class="col-md-5" style="text-align: right;">
                                <button class="btn btn-danger fa fa-arrows" data-method="setDragMode" data-option="move" type="button" title="移动">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)"></span>
                                </button>
                                <button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom" data-option="0.1" title="放大图片">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, 0.1)">
                                        <!--<span class="fa fa-search-plus"></span>-->
                                    </span>
                                </button>
                                <button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom" data-option="-0.1" title="缩小图片">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, -0.1)">
                                        <!--<span class="fa fa-search-minus"></span>-->
                                    </span>
                                </button>
                                <button type="button" class="btn btn-danger fa fa-refresh" data-method="reset" title="重置图片">
                                    <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;reset&quot;)" aria-describedby="tooltip866214"></span>
                                </button>
                            </div>
                            <div class="col-md-3">
                                <button class="btn btn-danger btn-block avatar-save fa fa-save" type="button" data-dismiss="modal">保存修改</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script src="~/Content/js/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">

        //做个下简易的验证  大小 格式 
        $(‘#avatarInput‘).on(‘change‘, function (e) {
            var filemaxsize = 1024 * 5;//5M
            var target = $(e.target);
            var Size = target[0].files[0].size / 1024;//获取image的尺寸
            if (Size > filemaxsize) {
                alert("图片过大,请重新选择(<5M)");
                $(".avatar-wrapper").empty();//清除
                return false;
            }//验证格式png,jpeg
            if (!this.files[0].type.match(/image.(png|jpeg)/)) {
                alert("请选择正确的图片(.jpg/.png/.jpeg)");
            } else {
                var filename = document.querySelector("#avatar-name");
                var texts = document.querySelector("#avatarInput").value;
                var teststr = texts; //你这里的路径写错了
                testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
                filename.innerHTML = testend;
            }

        });

        //保存
        $(".avatar-save").on("click", function () {
            var img_lg = document.getElementById(‘imageHead‘);
            // 截图小的显示框内的内容
            html2canvas(img_lg, {
                allowTaint: true,
                taintTest: false,
                onrendered: function (canvas) {
                    canvas.id = "mycanvas";
                    //生成base64图片数据
                    var type = document.getElementById(‘avatarInput‘).files[0].type;
                    var dataUrl = canvas.toDataURL(type);
                    imagesAjax(dataUrl);
                }
            });
        });



        //ajax提交
        function imagesAjax(src) {
            var data = {};
            data.img = src;
            $.ajax({
                url: ‘@Url.Action("UploadBase")‘,
                data: data,
                type: "POST",
                dataType: ‘text‘,
                success: function (result) {
                    $(‘.user_pic img‘).attr(‘src‘, result);
                },
                error: function (x, s, e) {
                    //请求出错处理
                    alert(x.status + " " + s + " " + e);
                }
            });
        }
    </script>
</body>

</html>

 

后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

using System.IO;
using System.Xml;
using System.Xml.Schema;



using System.Drawing;
using System.Net;
using System.Net.Http;
using System.Runtime.Serialization.Formatters.Binary;
using System.Web.Http;

namespace MvcDemo.Controllers
{
    public class UploadImagesController : Controller
    {
        //
        // GET: /UploadImages/

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Upload()
        {
            return View();
        }

        /// <summary>
        /// 接收前台传来的Base64编码
        /// </summary>
        public string UploadBase(string img)
        {
            string path = Common.UploadFile.Upload(img);
            return path;
        }

        public ActionResult UploadImg()
        {
            //上传文件
            HttpPostedFileBase img = Request.Files["btnfile"];
            string s = img.FileName;
            string fileExtension = Path.GetExtension(s);
            string path = "/Temp/";
            if (Directory.Exists(Server.MapPath(path)) == false)//如果不存在就创建file文件夹
            {
                Directory.CreateDirectory(Server.MapPath(path));
            }

            string virpath = path + Guid.NewGuid() + fileExtension;

            img.SaveAs(Server.MapPath(virpath));
            return Content(virpath);
        }

    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using System.Drawing;
using System.IO;


namespace Common
{
    /// <summary>
    /// 上传文件公共类
    /// </summary>
    public static class UploadFile
    {
        //静态 当前项目的路径
        private static string rootPath = AppDomain.CurrentDomain.BaseDirectory;

        //静态 要保存的路径
        private static string path = "/UploadImages/";

        /// <summary>
        /// 接收Base64编码格式的图片
        /// </summary>
        /// <param name="img">图片Base64字符串</param>
        /// <returns>图片路径</returns>
        public static string Upload(string img)
        {

            if (!IsBase64(img))//判断是否是base64字符串
                return null;

            //获取文件后缀,判断格式
            string suffix = GetSuffixFromBase64Str(img);
            string pattren = @"png|jpeg+$";//正则验证
            if (!System.Text.RegularExpressions.Regex.IsMatch(suffix, pattren))
            {
                return null;
            }

            //如果不存在就创建file文件夹
            if (Directory.Exists(rootPath + path) == false)
            {

                Directory.CreateDirectory(rootPath + path);
            }

            //防止同名的两种方法,一是获取当前时间与指定时间的毫秒差作为名字
            //而是通过唯一的GUID 
            //图片名
            //string datetime = GetTimeStamp();
            //            文件夹      图片名        后缀名
            //string dbPath = path + GetTimeStamp() + suffix;

            //             生成一个新的 GUID 唯一值
            string dbPath = path + Guid.NewGuid() + "." + suffix;

            //保存路径               
            string savePath = rootPath + dbPath;


            try
            {
                //截取base64串
                //string strBase = img.Split(‘,‘)[1];
                //获取图片并保存
                Base64ToImg(img.Split(‘,‘)[1]).Save(savePath);
            }
            catch (Exception)
            {
                return null;
            }

            return dbPath;
        }

        /// <summary>
        /// 删除文件 
        /// </summary>
        /// <param name="fileUrl">路径</param>
        public static void DeleteImgFile(string fileUrl)
        {
            string file = System.Web.HttpContext.Current.Server.MapPath(fileUrl);
            //文件是否存在
            if (File.Exists(file))
            {
                File.Delete(file);
            }
        }



        //解析base64编码获取图片 
        private static Bitmap Base64ToImg(string base64Code)
        {
            MemoryStream stream = new MemoryStream(Convert.FromBase64String(base64Code));
            return new Bitmap(stream);
        }

        //获取当前时间段额时间戳
        private static string GetTimeStamp()
        {
            TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);
            return Convert.ToInt64(ts.TotalMilliseconds).ToString();
        }

        //判读是否是base64编码
        private static char[] base64CodeArray = new char[]  
        {  
            ‘A‘, ‘B‘, ‘C‘, ‘D‘, ‘E‘, ‘F‘, ‘G‘, ‘H‘, ‘I‘, ‘J‘, ‘K‘, ‘L‘, ‘M‘, ‘N‘, ‘O‘, ‘P‘, ‘Q‘, ‘R‘, ‘S‘, ‘T‘, ‘U‘, ‘V‘, ‘W‘, ‘X‘, ‘Y‘, ‘Z‘,  
            ‘a‘, ‘b‘, ‘c‘, ‘d‘, ‘e‘, ‘f‘, ‘g‘, ‘h‘, ‘i‘, ‘j‘, ‘k‘, ‘l‘, ‘m‘, ‘n‘, ‘o‘, ‘p‘, ‘q‘, ‘r‘, ‘s‘, ‘t‘, ‘u‘, ‘v‘, ‘w‘, ‘x‘, ‘y‘, ‘z‘,  
            ‘0‘, ‘1‘, ‘2‘, ‘3‘, ‘4‘,  ‘5‘, ‘6‘, ‘7‘, ‘8‘, ‘9‘, ‘+‘, ‘/‘, ‘=‘  
        };

        /// <summary>  
        /// 是否base64字符串  
        /// </summary>  
        /// <param name="base64Str">要判断的字符串</param>  
        /// <returns></returns>  
        private static bool IsBase64(string base64Str)
        {
            byte[] bytes = null;
            return IsBase64(base64Str, out bytes);
        }

        /// <summary>  
        /// 是否base64字符串  
        /// </summary>  
        /// <param name="base64Str">要判断的字符串</param>  
        /// <param name="bytes">字符串转换成的字节数组</param>  
        /// <returns></returns>  
        private static bool IsBase64(string base64Str, out byte[] bytes)
        {
            //string strRegex = "^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)$";  
            bytes = null;
            if (string.IsNullOrEmpty(base64Str))
                return false;
            else
            {
                if (base64Str.Contains(","))
                    base64Str = base64Str.Split(‘,‘)[1];
                if (base64Str.Length % 4 != 0)
                    return false;
                if (base64Str.Any(c => !base64CodeArray.Contains(c)))
                    return false;
            }
            try
            {
                bytes = Convert.FromBase64String(base64Str);
                return true;
            }
            catch (FormatException)
            {
                return false;
            }
        }

        /// <summary>  
        /// 把base64字符串转换成Bitmap  
        /// </summary>  
        /// <param name="base64Str">要转换的base64字符串</param>  
        /// <returns></returns>  
        private static Bitmap Base64ToBitmap(string base64Str)
        {
            Bitmap bitmap = null;
            byte[] bytes = null;
            try
            {
                if (IsBase64(base64Str, out bytes))
                {
                    using (MemoryStream stream = new MemoryStream(bytes))
                    {
                        stream.Seek(0, SeekOrigin.Begin);//为了避免有时候流指针定位错误，显式定义一下指针位置  
                        bitmap = new Bitmap(stream);
                    }
                }
            }
            catch (Exception)
            {
                bitmap = null;
            }
            return bitmap;
        }

        /// <summary>  
        /// 根据base64字符串获取文件后缀（图片格式）  
        /// </summary>  
        /// <param name="base64Str">base64</param>  
        /// <returns></returns>  
        private static string GetSuffixFromBase64Str(string base64Str)
        {
            string suffix = string.Empty;
            string prefix = "data:image/";
            if (base64Str.StartsWith(prefix) && base64Str.Contains(";") && base64Str.Contains(","))
            {
                base64Str = base64Str.Split(‘;‘)[0];
                suffix = base64Str.Substring(prefix.Length);
            }
            return suffix;
        }
    }
}

 

 

 

Data URI scheme

　　Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。 在上面的Data URI中，data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。  支持的格式：data:image/png;base64,base64编码的png图片数据 data:image/jpeg;base64,base64编码的jpeg图片数据 把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求。坏处是浏览器不会缓存这种图像。 Jpg和jpeg格式，扩展名的实质是相同的　　

 

GUID

　　GUID（全球唯一标识符） 是一种由算法生成的二进制长度为128位的数字标识符，在理想情况下，任何计算机和计算机集群都不会生成两个相同的GUID，。随机生成两个相同GUID的可能性是非常小的，但并不为0。所以，用于生成GUID的算法通常都加入了非随机的参数（如时间），以保证这种重复的情况不会发生 

 

这是通过ajax直接上传的没有经过剪裁： https://www.cnblogs.com/bubugao/p/MyAjaxForm.html 

C#MVC和cropper.js实现剪裁图片ajax上传的弹出层

标签：convert   返回   随机   formatter   iss   触摸   input   bit   简单   

原文地址：https://www.cnblogs.com/dachengxiaomeng/p/8423100.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！