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()) ...

随机推荐

Firebase远程更新应用
能打造出色的应用不意味着一定能在商业上取得成功,两者之间还有许多工作要做,绝不能简单发布应用后就宣告“收工”.您需要能迅速根据用户反馈作出调整.测试新功能,以及向用户提供他们最关注的内容. Fireb ...
禁止 favicon.ico 请求
favicon.ico 图标用于收藏夹图标和浏览器标签上的显示,如果不设置,浏览器会请求网站根目录的这个图标,如果网站根目录也没有这图标会产生 404.出于优化的考虑,要么就有这个图标,要么就禁止产生 ...
jQuery数组处理函数
写在前面: jQuery的数组处理函数整理如下,如有补充和建议,欢迎评论交流~ 1.$.trim(value) 从value中删除任何前导或尾随的空白字符 2.$.each(containe ...
ajax局部刷新分页
//请求数据加载绑定页面 function DindAjax(pageIndex) {//获取参数 var colors = $("#colorsVal").val(); $.aj ...
Volley报错！！！No address associated with hostname
年轻人检查你的网络去吧,这是没有网络导致的原因
iOS-设计模式之通知
通知设计模式简单好用,就是一个项目中如果用的太多,不利于代码维护,可读性太差. 实现过程: [[NSNotificationCenter defaultCenter]postNotificationN ...
COMException 依赖服务或组无法启动(0x8007042C)处理办法
问题分析:这个问题主要原因是由于服务列表中的windows management instrumentation这个服务无法启动问题解决办法: 点击屏幕左下角:开始-运行-输入regedit 打开注 ...
C++ Primer Chapter 1
When I start reviewing, I thought Chapter is useless. Because the title is "Getting Start" ...
Nubiers to follow
VGG Andrea Vedaldi Berkeley Trevor Darrell Jeff Donahue Ross Girshick Sergio Guadarrama Stanford And ...
css 实现进度条
<select id="progress" onchange="changeProgress(this)"> <option value=&q ...

Web App 图片上传编辑器

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

随机推荐

热门专题