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>
}

 

效果图：