手机图片上传编辑器

@{
    ViewBag.Title = "设置封面";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section css
{    
    <style>
        .header > :last-child { text-align: center; width: 5.4rem; }
        .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; }

        .container { width: 100%; height: 100%; }
        .container > div { width: 100%; }

        .preview { overflow: hidden; width: 100%; height: 6.5rem; }
        .preview div { margin: 1rem; }
        .preview * { float: left; overflow: hidden; width: 6rem; height: 4.5rem; text-align: center; background-color: black; }
        .preview button { float: right; width: 5rem; height: 2.4rem; margin: 2rem 1rem 0 0; font-size: .9em; line-height: 2.4rem; background-color: #f98c54; color: white; border: rgba(255,255,255,.5) .1rem solid; border-radius: .3rem; }

        .rectangle { width: 100%; text-align: center; overflow: hidden; /*height:400px;*/ }
        .rectangle img { width: 100%; }
        .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; }

        .jbuttonbar1 { position: fixed; bottom: 0; left: 0; overflow: hidden; width: 100%; background-color: #fcfcfc; padding: .5rem 0; border-top: #e8e8e8 1px solid; }
        .jbuttonbar1 button { float: left; width: 35%; margin-left: 10%; text-align: center; padding: .4rem 0; border-radius: .3rem; background-color: #f0f0f0; border: #ccc 1px solid; font-size: 1rem; letter-spacing: .5rem; text-indent: .5rem; color: #666; }
        .jbuttonbar1 button.active { background-color: white; }
        .jbuttonbar1 button.cur { background-color: #ffb35a; color: white; border-color: #ffb35a; }
        .jbuttonbar1 button[disabled], .jbuttonbar1 button.active { letter-spacing: .1rem; background-color: #D4D3D3; border: #D6CACA 1px solid; }
        .jbuttonbar1 button.cur[disabled], .jbuttonbar1 button.cur.active { letter-spacing: .1rem; background-color: #F5AB86; border-color: #EAA17C; }
    </style>
    <link href="~/Css/cropper.css" rel="stylesheet" />
}
<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></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>

<div class="jbuttonbar1">
    <button>预览</button>
    <button class="cur">提交</button>
</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 isSubmitEvent = false; //是否是提交按钮
    var watchCropperData, curCropperData; //当前的图片数据，用于监听
    var picDataUrl;
    var isAlterPic = false; //是否替换图片，用于监听

    var $cropperWrapper = $(‘.rectangle‘);
    var $cropper = $(‘.rectangle>img‘);
    var $uploader = $(‘#uploader‘);
    var $uploadBtn;
    var $progress = $(‘.progress‘);

    //cropper settings
    $cropperWrapper.css(‘height‘, $(window).height() - $(‘.header‘).height() - $(‘.preview‘).height() - $(‘.control‘).height() - $(‘.jbuttonbar1‘).outerHeight() - 1);
    $cropper.cropper({
        preview: ‘.preview div‘,
        aspectRatio: 4 / 3,
        strict: true,
        guides: false,
        dragCrop: false,
        built: function () { watchCropperData = JSON.stringify($cropper.cropper("getData")); }//初始化原始图片监听数据
    });

    $uploader.fileupload({
        url: ‘/User/Article/WriteSubmit‘,
        formData: { id: ‘@ViewBag.id‘, type: isSubmitEvent },
        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(isSubmitEvent ? "提交" : "预览").prop(‘disabled‘, false);  //恢复按钮样式
            $progress.css(‘width‘, ‘0.01%‘);/*归0,保留占位*/
            if (data.result.status) {
                isAlterPic = false;
                watchCropperData = curCropperData; //更新监听
                $cropper.cropper("replace", picDataUrl);//更新cropper
                go(isSubmitEvent ? ‘/User/Article/WriteResult/@ViewBag.id‘ : ‘/User/Article/Detail?id=@(ViewBag.id)&state=2‘);
            } else alert(data.result.content);
        }
    });

    //trigger Uploader upload
    $(‘.jbuttonbar1 button‘).click(function () {
        $uploadBtn = $(this);
        isSubmitEvent = $uploadBtn.hasClass(‘cur‘);//点击的是否为“提交”按钮
        curCropperData = JSON.stringify($cropper.cropper("getData"));
        if (isAlterPic || watchCropperData != curCropperData) { //监听的值不一致时需请求
            $uploadBtn.text(isSubmitEvent ? "提交中..." : "生成中...").prop(‘disabled‘, true); //按钮样式变化
            picDataUrl = $cropper.cropper(‘getCroppedCanvas‘).toDataURL(‘image/jpeg‘); //获取裁剪后的图片dataUrl
            $(‘#uploader‘).fileupload(‘send‘, { ‘files‘: [dataURLtoBlob(picDataUrl)] });
        } else go(isSubmitEvent ? ‘/User/Article/WriteResult/@ViewBag.id‘ : ‘/User/Article/Detail?id=@(ViewBag.id)&state=2‘);//监听的值一致,无变化
    });

    //恢复默认
    $(‘.preview button‘).click(function () {
        $cropper.cropper("replace", ‘@ViewBag.src‘);
    });

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