Web App 图片上传编辑器

使用cropper、jqueryUpload插件、Jquery、src-dataurl-canvas-blob文件。

@{

    ViewBag.Title = "更新头像";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

@section css

{

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

    <style>

        .header>:last-child{ text-align: center; width: 5.4rem; }

        .container{width:100%;}

        .web input[type=file] { position: fixed; right: 0; top: 0; z-index: 9999; width: 5.6rem; height: 2.5rem; opacity: 0; }

        .noWeb input[type=file] { display: none; }

        .progress { position: fixed; top: 0; width: 0.01%; height: 0.5%; background-color: #ffb35a; }

        .avatar { width: 100%; text-align: center; overflow: hidden;/*height:400px;*/ }

        .avatar img { width: 100%; }

        .preview { overflow: hidden;width:100%;padding:1rem; }

        .preview * { float: left; overflow: hidden; width: 4.5rem; height: 4.5rem; text-align: center; background-color:black; }

        .preview button { float: right; width: 3rem; height: 3rem; line-height: 3rem; margin: .75rem .5rem 0 0; background-color: #f98c54; color: white; font-size:15px;box-shadow: 0 0 0 0.3rem rgba(255, 255, 255, .5); border-radius: 50%; }

        .preview :nth-child(2) { border-radius: 50%; margin: 0 1rem; box-shadow: 0 0 0 0.3rem rgba(255, 255, 255, .5); }

        .preview :nth-child(3) { border-radius: 50%; width: 2rem; height: 2rem; margin-top: 1rem; }

        .header-right .btn-right{width:5.6rem;cursor:pointer;}

        .control { overflow:hidden;width:100%; height:2.4rem; }

        .control:after {display:block;width:100%;height:1rem;content:"" }

        .control p { display: table; position: relative; top: -1px; width: 100%; background-color: #ff6d37; border-spacing: 1px; text-align: center; }

        .control p a { display: table-cell;width:20%; height: 2.5rem; background-color: #ffb35a; color: white; vertical-align: middle;cursor:pointer; }

    </style>

}

<div class="header A-bg">

    <a class="back-btn A-icon-arrow-left A-active"></a>

    <h1>@ViewBag.Title</h1>

    <a>选择图片</a>

</div>

<p class="progress"></p>

<input id="uploader" type="file" accept="image/jpeg" />

<div class="container">

    <div class="preview"><div></div><div></div><div></div><button class="bounceIn">确认</button></div>

    <div class="avatar">

        <img src="@ViewBag.src" />

    </div>

    <div class="control">

        <p class="A-active-all"><a>水平翻转</a><a>垂直翻转</a><a>左旋转</a><a>右旋转</a><a>重置</a></p>

    </div>

</div>

@section js

{

    <script src="~/Scripts/cropper.js"></script>

    <script src="~/Scripts/src-dataurl-canvas-blob.js"></script>

    <script src="~/WebPlugin/jqueryUpload/vendor/jquery.ui.widget.js"></script>

    <script src="~/WebPlugin/jqueryUpload/jquery.iframe-transport.js"></script>

    <script src="~/WebPlugin/jqueryUpload/jquery.fileupload.js"></script>

    <script>

    var watchCropperData, curCropperData; //当前的图片数据，用于监听

    var picDataUrl;

    var isAlterPic = false; //是否替换图片，用于监听

    var $cropperWrapper = $('.avatar');

    var $cropper = $('.avatar>img');

    var $uploader = $('#uploader');

    var $uploadBtn = $('.preview button');

    var $progress = $('.progress');

    //cropper settings

    //cropper settings

    $cropper.cropper({

        preview: '.preview div',

        aspectRatio: 1 / 1,

        strict: true,

        guides: false,

        dragCrop: false,

        built: function () { watchCropperData = JSON.stringify($cropper.cropper("getData")); }//初始化原始图片监听数据

    });

    //Uploader init

    $uploader.fileupload({

        url: '/User/Center/UpdateAvatar',

        dataType: 'json',

        progressall: function (e, data) { $progress.css('width', parseInt(data.loaded / data.total * 100, 10) + '%'); },

        add: function (e, data) {

            var f = data.files[0];

            if (f.size == 0 || f.size > 1024 * 1024 * 3 || f.type != "image/jpeg") {

                alert(f.name + "超出3M大小或不是JPG格式")

            } else {

                $progress.css('width', '0.01%');//进度条归0

                blobToDataURL(f, function (dataUrl) {

                    $cropper.cropper("replace", dataUrl);

                    isAlterPic = true;

                });

            }

        },

        done: function (e, data) {

            $uploadBtn.text("确认").prop('disabled', false);  //恢复按钮样式

            $progress.css('width', '0.01%');/*归0,保留占位*/

            if (data.result.status) {

                isAlterPic = false;

                watchCropperData = curCropperData; //更新监听

                $cropper.cropper("replace", picDataUrl);//更新cropper

            }

            alert(data.result.content + (window.app ? ",请返回重新刷新！" : "！"));

            if (window.app) window.app.callback("script");

        }

    });

    //trigger Uploader upload

    $uploadBtn.click(function () {

        curCropperData = JSON.stringify($cropper.cropper("getData"));

        if (isAlterPic || watchCropperData != curCropperData) { //监听的值不一致时需请求

            $uploadBtn.text("....").prop('disabled', true); //按钮样式变化

            picDataUrl = $cropper.cropper('getCroppedCanvas').toDataURL('image/jpeg'); //获取裁剪后的图片dataUrl

            $('#uploader').fileupload('send', { 'files': [dataURLtoBlob(picDataUrl)] });

        } else alert("当前无任何编辑，无需提交！");//监听的值一致,无变化

    });

    //cropper control options

    $('.control p a').click(function () {

        switch ($(this).index()) {

            case 0: $cropper.cropper("scale", $cropper.cropper("getImageData").scaleX == -1 ? 1 : -1, 1); break;

            case 1: $cropper.cropper("scale", 1, $cropper.cropper("getImageData").scaleY == -1 ? 1 : -1); break;

            case 2: $cropper.cropper("rotate", -22.5); break;

            case 3: $cropper.cropper("rotate", 22.5); break;

            case 4: $cropper.cropper("reset"); break;

        }

    });

    </script>

}

更新头像

@{

    ViewBag.Title = "更新个性背景";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

@section css

{

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

    <style>

        .header > :last-child { text-align: center; width: 5.4rem; }

        .container { width: 100%; }

        .web input[type=file] { position: fixed; right: 0; top: 0; z-index: 9999; width: 5.6rem; height: 2.5rem; opacity: 0; }

        .noWeb input[type=file] { display: none; }

        .progress { position: fixed; top: 0; width: 0.01%; height: 0.5%; background-color: #ffb35a; }

        .rectangle { width: 100%; text-align: center; overflow: hidden; /*height:400px;*/ }

        .rectangle img { width: 100%; }

        .preview { overflow: hidden; width: 100%; padding: 1rem; }

        .preview * { float: left; overflow: hidden; width: 9rem; height: 4.5rem; text-align: center; background-color: black; }

        .preview button:last-of-type { margin-right: 1rem; background-color: #ffb35a; }

        .preview button { float: right; width: 4rem; height: 2.4rem; font-size:.9em;line-height: 2.4rem; margin-top: 1rem; background-color:#f98c54; color: white; border:rgba(255,255,255,.5) .1rem solid; border-radius: .3rem; }

        .header-right .btn-right { width: 5.6rem; cursor: pointer; }

        .control { overflow: hidden; width: 100%; height: 2.4rem; }

        .control:after { display: block; width: 100%; height: 1rem; content: ""; }

        .control p { display: table; position: relative; top: -1px; width: 100%; background-color: #ff6d37; border-spacing: 1px; text-align: center; }

        .control p a { display: table-cell; width: 20%; height: 2.5rem; background-color: #ffb35a; color: white; vertical-align: middle; cursor: pointer; }

    </style>

}

<div class="header A-bg">

    <a class="back-btn A-icon-arrow-left A-active"></a>

    <h1>@ViewBag.Title</h1>

    <a class="logout">选择图片</a>

</div>

<p class="progress"></p>

<input id="uploader" type="file" accept="image/jpeg" />

<div class="container">

    <div class="preview"><div></div><button>确认上传</button><button>恢复默认</button></div>

    <div class="rectangle">

        <img src="@ViewBag.src" />

    </div>

    <div class="control">

        <p class="A-active-all"><a>水平翻转</a><a>垂直翻转</a><a>左旋转</a><a>右旋转</a><a>重置</a></p>

    </div>

</div>

@section js

{

    <script src="~/Scripts/cropper.js"></script>

    <script src="~/Scripts/src-dataurl-canvas-blob.js"></script>

    <script src="~/WebPlugin/jqueryUpload/vendor/jquery.ui.widget.js"></script>

    <script src="~/WebPlugin/jqueryUpload/jquery.iframe-transport.js"></script>

    <script src="~/WebPlugin/jqueryUpload/jquery.fileupload.js"></script>

    <script>

    var watchCropperData, curCropperData; //当前的图片数据，用于监听

    var picDataUrl;

    var isAlterPic = false; //是否替换图片，用于监听

    var $cropperWrapper = $('.rectangle');

    var $cropper = $('.rectangle>img');

    var $uploader = $('#uploader');

    var $uploadBtn = $('.preview button:first');

    var $progress = $('.progress');

    //cropper settings

    $cropper.cropper({

        preview: '.preview div',

        aspectRatio: 16 / 9,

        strict: true,

        guides: false,

        dragCrop: false,

        built: function () { watchCropperData = JSON.stringify($cropper.cropper("getData")); }//初始化原始图片监听数据

    });

    //Uploader init

    $uploader.fileupload({

        url: '/User/Space/UpdateBgPost',

        dataType: 'json',

        progressall: function (e, data) { $progress.css('width', parseInt(data.loaded / data.total * 100, 10) + '%'); },

        add: function (e, data) {

            var f = data.files[0];

            if (f.size == 0 || f.size > 1024 * 1024 * 3 || f.type != "image/jpeg") {

                alert(f.name + "超出3M大小或不是JPG格式")

            } else {

                $progress.css('width', '0.01%');//进度条归0

                blobToDataURL(f, function (dataUrl) {

                    $cropper.cropper("replace", dataUrl);

                    isAlterPic = true;

                });

            }

        },

        done: function (e, data) {

            $uploadBtn.text("确认上传").prop('disabled', false);  //恢复按钮样式

            $progress.css('width', '0.01%');/*归0,保留占位*/

            if (data.result.status) {

                isAlterPic = false;

                watchCropperData = curCropperData; //更新监听

                $cropper.cropper("replace", picDataUrl);//更新cropper

            }

            alert(data.result.content + (window.app ? ",请返回重新刷新！" : "！"));

            if (window.app) window.app.callback("script");

        }

    });

    //trigger Uploader upload

    $uploadBtn.click(function () {

        curCropperData = JSON.stringify($cropper.cropper("getData"));

        if (isAlterPic || watchCropperData != curCropperData) { //监听的值不一致时需请求

            $uploadBtn.text("上传中..").prop('disabled', true); //按钮样式变化

            picDataUrl = $cropper.cropper('getCroppedCanvas').toDataURL('image/jpeg'); //获取裁剪后的图片dataUrl

            $('#uploader').fileupload('send', { 'files': [dataURLtoBlob(picDataUrl)] });

        } else alert("当前无任何编辑，无需提交！");//监听的值一致,无变化

    });

    //restore default

    $('.preview button:last').click(function () {

        var img = new Image();

        img.onload = function () {

            $cropperWrapper.css('height', $(window).width() * img.height / img.width);

            $cropper.cropper("replace", this.src);

        };

        img.src = '/CDN/images/default/spacebg_l.jpg';

    });

    //cropper control options

    $('.control p a').click(function () {

        switch ($(this).index()) {

            case 0: $cropper.cropper("scale", $cropper.cropper("getImageData").scaleX == -1 ? 1 : -1, 1); break;

            case 1: $cropper.cropper("scale", 1, $cropper.cropper("getImageData").scaleY == -1 ? 1 : -1); break;

            case 2: $cropper.cropper("rotate", -22.5); break;

            case 3: $cropper.cropper("rotate", 22.5); break;

            case 4: $cropper.cropper("reset"); break;

        }

    });

    </script>

}

更新个性背景

效果图：

Web App 图片上传编辑器的更多相关文章

web前端图片上传(3)--filereader
这篇文章主要是为了介绍一种文件上传的方式.当然文件中是包含图片的.如果大家仔细看我的第一篇web前端图片上传(1)就会知道,其实也是按照这种方式上传你的,但是由于上次时间比较紧张,没有详细的介绍今天的 ...
Web Api 图片上传，在使用 Task.ContinueWith 变量无法赋值问题
细谈 Web Api 图片上传,在使用 Task.ContinueWith 变量无法赋值问题的解决办法! 在使用Asp.Net Web Api 图片上传接口的时候,到网上找了一些个例子,但大多数找 ...
Asp.Net Core Web Api图片上传(一)集成MongoDB存储实例教程
Asp.Net Core Web Api图片上传及MongoDB存储实例教程(一) 图片或者文件上传相信大家在开发中应该都会用到吧,有的时候还要对图片生成缩略图.那么如何在Asp.Net Core W ...
细谈 Web Api 图片上传，在使用 Task.ContinueWith 变量无法赋值问题的解决办法！
在使用Asp.Net Web Api 图片上传接口的时候,到网上找了一些个例子,但大多数找到都是这个版本! [HttpPost] public Task<Hashtable> ImgUpl ...
web前端图片上传
图片上传有很多种形式,但是听说ios只能传字符串,所以为了安卓.ios和web能用一个接口上传图片,采用了基于base64 的方法上传图片. 下面是我的html <div class=" ...
java web开发图片上传功能
基本思路在于,配置路径,然后用java I/O的api将图片上传到该目录下. String photoPath = ServletActionContext.getServletContext( ...
IOS web网页图片上传问题
用html5编写图片裁切上传,在iphone手机上可能会遇到图片方向错误问题,在此把解决方法和大家分享一下,用到了html5的 FileReader和Canvas,如果还没有接触的同学,先了解一下其方 ...
web前端图片上传(2)
今天发现了一种ajax上传图片的方式,是以前没有用过的,首先来说下为什么要用这种方式.是因为原来后台是用的form表单的方式来提交表单数据的.但是觉得呢,这种方式不太好,因为要刷新页面,前台只用控制台 ...
Asp.Net Web Api 图片上传
public string UploadFile() { if (Request.Content.IsMimeMultipartContent()) ...

随机推荐

Docker搭建私有仓库
1,下载仓库镜像. docker pull registry //主要用于搭建私有仓库的. 2,将宿主机端口映射到容器中去,容器的5000端口是不能更改的. docker run -d -p ...
jquery列表动画
//新闻导航 (function (){ //获取分类名称 var _text = $('.news .news-wrapper .news-left .news-left-title .positi ...
SQLserver 连接+开窗函数+视图+事务
今天学习SQLserver 连接以及开窗函数..加油! 1.复习:查询(检索)->筛选列->筛选行:distinct top where 运算符与关键字:比较运算符,逻辑运算符,betwe ...
Comparator和Comparable在排序中的应用
http://blog.csdn.net/iisgirl/article/details/7269833
jquery动态添加DOM节点
1.append()方法:向每个匹配的元素内部添加元素 appendTo()方法:将所有匹配的元素追加的指定的元素中 <html> <head> <meta http-e ...
jquery easyui datagrid 分页详解
前些天用jquery easyui的table easyui-datagrid做分页显示的时候,折腾了很久,后来终于解决了.其实不难,最主要我不是很熟悉前端的东西. table easyui-data ...
OpenCV——IplImage
IplImage结构: typedef struct _IplImage { int nSize; /* IplImage大小 */ int ID; /* 版本 (=0)*/ int nChannel ...
（原）ippicvmt.lib(ippinit.obj) : error LNK2005: _ippSetCpuFeatures@8 已经在 ippcoremt.lib(ippinit.obj) 中定义
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5497234.html 参考网址: http://answers.opencv.org/question ...
mysql 复习与学习（二）数据库及表结构的创建删除
mysql -h localhost -uroot -p123456 //连接数据库 show databases; //查看数据库 create database if not exists db_ ...
[转]MySQL 5.6 全局事务 ID（GTID）实现原理（三）
原文连接:http://qing.blog.sina.com.cn/1757661907/68c3cad333002s5l.html 原文作者:淘长源转载注明以上信息这是 MySQL 5.6 全局 ...

Web App 图片上传编辑器

Web App 图片上传编辑器的更多相关文章

随机推荐

热门专题