移动端仿微信朋友圈发布图文

<input type="file" name="file" accept="image/*" capture="camera">

<!-- 图片添加按钮 -->
<ul id="previewer" class="upload-list">
    <li id="select-image" class="add-pic-btn"><a href="javascript:;" onclick="clickBrowse();">+</a></li>
    <!-- 预览列表 -->
</ul>
<!-- 隐藏的 input -->
<input type="file" id="browsefile" name="imageselect" style="visibility: hidden" accept="image/*" capture="camera">

/* footprint-add.js */

// 自定义图片添加按钮的click事件
function clickBrowse() {
    log("点击添加");
    $('#browsefile').click();
}

$(function () {
    if (window.File && window.FileReader && window.FormData) {
        log("支持File对象");
        var inputFiled = $('#browsefile');
        inputFiled.on('change', function (e) {
            log("有添加动作");
            if (imageIndex == 9) {
                // 如果已经预选了9张，则不再添加
                mTips.show('最多添加9张图片哦', 2000);
                return;
            }
            var images = e.target.files;
            var count = images.length;  // 图片数量
            for (var i = 0; i < count; i++) {
                var image = e.target.files[i];
                if (image) {
                    if (!/\/(?:jpeg|jpg|png)/i.test(image.type)) {
                        return;
                    }
                    readFile(image);  // 读取图片
                }
            }
        })
    }
})

var reader = new FileReader();

function readFile(image) {
    var reader = new FileReader();
    reader.onloadend = function () {
        var previewer = $('#previewer');
        var src = this.result;  // base64
        previewer.append('<li><img src="' + src + '" alt=""><i class="remove"></i></li>');
        // 清除图片上传input的值
        $('#browsefile').val("");
        // 对图片进行本地Canvas处理
        processFile(reader.result, image.type);
    };
    reader.onerror = function () {
        log('读取图片异常');
    };
    reader.readAsDataURL(image);
}

// Canvas处理
function processFile(dataURL, fileType) {
    var maxWidth = 800, maxHeight = 800;
    var image = new Image();
    image.src = dataURL;
    image.onload = function () {
        var width = image.width;
        var height = image.height;
        var shouldResize = (width > maxWidth) || (height > maxHeight);
        if (!shouldResize) {
            // 无需压缩
            imageIndex++;
            imageData['imageData' + imageIndex] = dataURL;
            return;
        }
        var newWidth, newHeight;
        // 等比压缩
        if (width > height) {
            newHeight = height * (maxWidth / width);
            newWidth = maxWidth;
        } else {
            newWidth = width * (maxHeight / height);
            newHeight = maxHeight;
        }
        var canvas = document.createElement('canvas');
        canvas.width = newWidth;
        canvas.height = newHeight;
        var context = canvas.getContext('2d');
        context.drawImage(this, 0, 0, newWidth, newHeight);
        dataURL = canvas.toDataURL(fileType);   // base64
        imageIndex++;
        imageData['imageData' + imageIndex] = dataURL;
        return;
    };
    image.onerror = function () {
        log('图片处理时异常！');
    }
}

<canvas id="tutorial" width="150" height="150"></canvas>

var context = canvas.getContext('2d');

context.drawImage(image, x, y, width, height);

// 发布按钮事件
function submit() {
    var tag = $('#tag').val();
    var content = $('#feeling').val();
    formData.append("tag", tag);
    formData.append("content", content);
    formData.append("profileId", window.localStorage.getItem("profileId"));
    var i = 0;
    for (var key in imageData) {
        formData.append("imageData_" + i, imageData[key]);
        i++;
    }
    formData.append("count", i);    // 图片数量
    $.ajax({
        type: 'POST',
        url: '/footprint/upload',
        data: formData,
        contentType: false,
        processData: false,
        success: function (data) {
            log(data);
            if (data.success) {
                // handler
            } else {
                // handler
            }
        },
        error: function (data) {
            // handler
        }
    });
}

// 监听图片删除按钮点击
$(document).on('click', '.remove', function (e) {
    var i = $(this).index();
    log('remove index ' + i);
    // 删除FormData和页面上的图片
    $(this).parent().remove();
    delete imageData['imageData' + i];
    imageIndex--;
});

// 读取图片
function readFile(image) {
    // 省略...
    reader.onloadend = function () {
        EXIF.getData(image, function () {
            EXIF.getAllTags(this);
            orientation = EXIF.getTag(this, 'Orientation');
        });
        processFile(reader.result, image.type, orientation);
    };
}

// Canvas处理图片
function processFile(dataURL, fileType, orientation) {
    var device = "";
    if (navigator.userAgent.match(/iphone/i)) {
        device = 'iphone';
    } else if (navigator.userAgent.match(/android/i)) {
        device = 'android';
    } else {
        device = 'other';
    }
    // 省略...
    // bugfix: 解决iOS设备上传竖拍照片后被逆时针旋转90°的问题
    if (device === 'iphone') {
        switch (orientation) {
            case 8:
                context.rotate(90*Math.PI/180);
                break;
            case 3:
                context.rotate(180*Math.PI/180);
                break;
            case 6:
                context.rotate(-90*Math.PI/180);
                break;
        }
    }
}

@RequestMapping(value = "upload", method = RequestMethod.POST)
@ResponseBody
public SimpleResponse upload(HttpServletRequest request, @RequestParam Map<String, String> formData) {
    SimpleResponse response = new SimpleResponse();
    Footprint footprint = new Footprint();
    String pin = (String) request.getAttribute("pin");
    Long profileId = Long.parseLong(formData.get("profileId"));
    footprint.setPin(pin);
    footprint.setProfileId(profileId);
    try {
        int count = Integer.parseInt(formData.get("count")); // 图片数量
        String tag = formData.get("tag") == null ? "" : formData.get("tag"); // 足迹标签
        String content = formData.get("content") == null ? "" : formData.get("content"); // 足迹正文
        footprint.setTag(tag);
        footprint.setContent(content);
        logger.error("Tag: {}, Content: {}, Count: {}", tag, content, count);
        byte[][] imageByte = null;
        if (count > 0) {
            imageByte = new byte[count][];
            // base64转byte[]
            for (int i = 0; i < count; i++) {
                String base64Str = formData.get("imageData_" + i).split(",")[1]; // 截掉base64的头部
                byte[] bytes = EncodeUtil.base64ToByte(base64Str);
                imageByte[i] = bytes;
            }
        }

        Footprint saveResult = footprintDBService.save(footprint, imageByte); // 传给后台处理并存储到云存储

        if (saveResult == null) {
            response.setSuccess(false);
            response.setMessage("很抱歉服务器响应缓慢，请稍后再试");
        } else {
            response.setSuccess(true);
            response.setData(saveResult);
        }
    } catch (Exception e) {
        logger.error("发生异常: ", e);
    }

    return response;
}