（未完成）图片上传（图片剪裁上传）

前言：

本次图片上传的效果：

选择上传的图片之后，可以按要求剪裁之后上传。

环境：

ide工具：idea
使用了ssm框架，有前后端

1 jsp片段

<div class="proflle_tab_workplace clearfix">
    <div class="profile_avatar_area">
        <c:if test="${empty user.imgUrl}">
             <img  src="${pageContext.request.contextPath}/img/avatar_lg.png">
        </c:if>
        
        <c:if test="${not empty user.imgUrl}">
              <img width="200px" height="200px" src="${user.imgUrl}">
        </c:if>
        
        
        <p style="text-align: center;">当前头像</p>
    </div>
    <div class="profile_ifo_area">
        <form id="upload_form" enctype="multipart/form-data" method="post" action="${pageContext.request.contextPath}/user/upLoadImage.action" >
            <!-- hidden crop params -->
            <%--x1、y1、x2、y2是两个坐标，是选区框的左上角和右下角--%>
            <input type="hidden" id="x1" name="x1" />
            <input type="hidden" id="y1" name="y1" />
            <input type="hidden" id="x2" name="x2" />
            <input type="hidden" id="y2" name="y2" />
            <p>第一步：请选择图像文件</p>
            <div><input type="file" name="image_file" id="image_file" οnchange="fileSelectHandler()" /></div>
            <div class="error"></div>
            <div class="step2">
                <p>第二步：请选择需要截图的部位,然后按上传</p>
                <%--触发了onchange事件后，在js里会改变图片--%>
                <img id="preview" >
                <br>
                
                <input type="submit" value="上传" />
            </div>
        </form>
    </div>
</div>

onchange="fileSelectHandler()"这一句触发了一个方法，这里写了一个js：Jcrop_upload.js

2 js

先导入三个js包三个css包：

1. jquery-1.8.3.min.js
2. jquery.Jcrop.min.js
3. Jcrop_upload.js
4. base.css
5. jquery.Jcrop.min.css
6. profile.css

第二个js是剪切图片js，是可以在网上下载到的
如图所示，在jsp页面中引入js

以下是Jcrop_upload.js的代码

/**
 *
 * HTML5 Image uploader with Jcrop
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2012, Script Tutorials
 * http://www.script-tutorials.com/
 */

// convert bytes into friendly format
function bytesToSize(bytes) {
    var sizes = ['Bytes', 'KB', 'MB'];
    if (bytes == 0) return 'n/a';
    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
};

// check for selected crop region
function checkForm() {
    if (parseInt($('#w').val())) return true;
    $('.error').html('先剪切好图片才能进行上传哟！').show();
    return false;
};

// update info by cropping (onChange and onSelect events handler)
function updateInfo(e) {
    $('#x1').val(e.x);
    $('#y1').val(e.y);
    $('#x2').val(e.x2);
    $('#y2').val(e.y2);
    $('#w').val(e.w);
    $('#h').val(e.h);
};

// clear info by cropping (onRelease event handler)
function clearInfo() {
    $('.info #w').val('');
    $('.info #h').val('');
};

function fileSelectHandler() {

    // get selected file
    var oFile = $('#image_file')[0].files[0];

    // hide all errors
    $('.error').hide();

    // check for image type (jpg and png are allowed)
    var rFilter = /^(image\/jpeg|image\/png)$/i;
    if (!rFilter.test(oFile.type)) {
        $('.error').html('请选择一张 jpg 格式 或是 png 格式的图片。').show();
        return;
    }

    // check for file size
    if (oFile.size > 250 * 1024) {
        $('.error').html('您选择的图片文件过大，请更换一张较小的图片。').show();
        return;
    }

    // preview element
    var oImage = document.getElementById('preview');

    // prepare HTML5 FileReader
    var oReader = new FileReader();
    oReader.onload = function (e) {

        // e.target.result contains the DataURL which we can use as a source of the image
        oImage.src = e.target.result;
        oImage.onload = function () { // onload event handler

            // display step 2
            $('.step2').fadeIn(500);

            // display some basic image info
            var sResultFileSize = bytesToSize(oFile.size);
            $('#filesize').val(sResultFileSize);
            $('#filetype').val(oFile.type);
            $('#filedim').val(oImage.naturalWidth + ' x ' + oImage.naturalHeight);

            // Create variables (in this scope) to hold the Jcrop API and image size
            var jcrop_api, boundx, boundy;

            // destroy Jcrop if it is existed
            if (typeof jcrop_api != 'undefined')
                jcrop_api.destroy();

            // initialize Jcrop
            $('#preview').Jcrop({
                minSize: [32, 32], // min crop size
                aspectRatio: 1, // keep aspect ratio 1:1
                bgFade: true, // use fade effect
                bgOpacity: .3, // fade opacity
                onChange: updateInfo,
                onSelect: updateInfo,
                onRelease: clearInfo
            }, function () {

                // use the Jcrop API to get the real image size
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];

                // Store the Jcrop API in the jcrop_api variable
                jcrop_api = this;
            });
        };
    };

    // read selected file as DataURL
    oReader.readAsDataURL(oFile);
}

3 controller层

未完待续