头像上传(摄像头拍照、图片剪切)

src/main/java/com/we/controller/PhotographController.java

+package com.we.controller;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+@Controller
+@RequestMapping("/photograph")
+public class PhotographController {
+    private String prefix = "/photograph";
+
+    @GetMapping()
+    public String file() {
+        return prefix + "/photo";
+    }
+
+}

src/main/resources/static/photograph/ImgCropping.css

+
+.l2-btn{
+    display: inline-block;
+    outline: none;
+    resize: none;
+    border: none;
+    padding:5px 10px;
+    background: #8C85E6;
+    color: #fff;
+    border:solid 1px #8C85E6;
+    border-radius: 3px;
+    font-size: 14px;
+}
+.l2-btn:hover{
+    background: #8078e3;
+    animation: anniu 1s infinite;
+}
+.l2-btn:active{
+    box-shadow: 0 2px 3px rgba(0,0,0,.2) inset;
+}
+.hidden{
+    display: none;
+}
+.tailoring-container, .tailoring-container div, .tailoring-container p{
+    margin: 0;padding: 0;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+}
+.tailoring-container{
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+}
+.tailoring-container .black-cloth{
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background: #111;
+    opacity: .9;
+    z-index: 1001;
+}
+.tailoring-container .tailoring-content{
+    position: absolute;
+    width: 768px;
+    height: 560px;
+    background: #fff;
+    z-index: 1002;
+    left: 0;
+    top: 0;
+
+    /* 水平垂直居中 浏览器版本号低的不支持transform */
+    /*left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    -weblit-transform: translate(-50%,-50%);
+    -moz-transform: translate(-50%,-50%);
+    -ms-transform: translate(-50%,-50%);
+    -o-transform: translate(-50%,-50%);*/
+
+    border-radius: 10px;
+    box-shadow: 0 0 10px #000;
+    padding: 10px;
+}
+
+.tailoring-content-one{
+    height: 40px;
+    width: 100%;
+    border-bottom: 1px solid #DDD ;
+}
+.tailoring-content .choose-btn{
+    float: left;
+}
+.tailoring-content .close-tailoring{
+    display: inline-block;
+    height: 30px;
+    width: 30px;
+    border-radius: 100%;
+    background: #eee;
+    color: #fff;
+    font-size: 22px;
+    text-align: center;
+    line-height: 30px;
+    float: right;
+    cursor: pointer;
+}
+.tailoring-content .close-tailoring:hover{
+    background: #ccc;
+}
+
+.tailoring-content .tailoring-content-two{
+    width: 100%;
+    height: 460px;
+    position: relative;
+    padding: 5px 0;
+}
+.tailoring-content .tailoring-box-parcel{
+    width: 520px;
+    height: 450px;
+    position: absolute;
+    left: 0;
+    border: solid 1px #ddd;
+}
+.tailoring-content .preview-box-parcel{
+    display: inline-block;
+    width: 228px;
+    height: 450px;
+    position: absolute;
+    right: 0;
+    padding: 4px 14px;
+}
+.preview-box-parcel p{
+    color: #555;
+}
+.previewImg{
+    width: 200px;
+    height: 200px;
+    overflow: hidden;
+}
+.preview-box-parcel .square{
+    margin-top: 10px;
+    border: solid 1px #ddd;
+}
+.preview-box-parcel .circular{
+    border-radius: 100%;
+    margin-top: 10px;
+    border: solid 1px #ddd;
+}
+
+.tailoring-content .tailoring-content-three{
+    width: 100%;
+    height: 40px;
+    border-top: 1px solid #DDD ;
+    padding-top: 10px;
+}
+.sureCut{
+    float: right;
+}
+
+@media all and (max-width: 768px) {
+    .tailoring-container .tailoring-content{
+        width: 100%;
+        min-width: 320px;
+        height: 460px;
+    }
+    .tailoring-content .tailoring-content-two{
+        height: 360px;
+    }
+    .tailoring-content .tailoring-box-parcel{
+        height: 350px;
+    }
+    .tailoring-container .tailoring-box-parcel{
+        width: 100%;
+    }
+    .tailoring-container .preview-box-parcel{
+        display: none;
+    }
+
+}

src/main/resources/static/photograph/cropper.min.css

+/*!
+ * Cropper v3.1.3
+ * https://github.com/fengyuanchen/cropper
+ *
+ * Copyright (c) 2014-2017 Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2017-10-21T10:03:37.133Z
+ */.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline-color:rgba(51,153,255,.75);outline:1px solid #39f;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:e-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:n-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:w-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:s-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:e-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:n-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:w-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:ne-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nw-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:sw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:se-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}
+/*# sourceMappingURL=cropper.min.css.map */
\ No newline at end of file

src/main/resources/templates/fileoperation/file.html

 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
-      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8"/>
     <title>Insert title here</title>

src/main/resources/templates/photograph/photo.html

+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <title>基于cropper.js的图片裁剪</title>
+    <script type="text/javascript" src="static/photograph/jquery-1.11.3.js"></script>
+    <script type="text/javascript" src="static/photograph/cropper.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="static/photograph/cropper.min.css" />
+    <link rel="stylesheet" type="text/css" href="static/photograph/ImgCropping.css" />
+</head>
+<body>
+<button id="replaceImg" class="l-btn">更换图片</button>
+
+<!--图片裁剪框 start-->
+<div style="display: none" class="tailoring-container">
+    <div class="black-cloth" onclick="closeTailor(this)"></div>
+    <div class="tailoring-content">
+        <div class="tailoring-content-one">
+            <label title="上传图片" for="chooseImg" class="l2-btn choose-btn">
+                <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onchange="selectImg(this)">
+                本地上传
+            </label>
+            <label title="拍照" class="l2-btn choose-btn" id='capture' style="margin-left: 2%;">拍照</label>
+            <label title="重拍" class="l2-btn choose-btn" id='takeAgain' style="margin-left: 2%;">重拍</label>
+            <div class="close-tailoring"  onclick="closeTailor(this)">×</div>
+        </div>
+        <div class="tailoring-content-two">
+            <div class="tailoring-box-parcel">
+                <video id="video" width="100%" height="100%" controls  style="float: left;" ></video>
+                <canvas id="canvas" width="482px" height="448px" style="float: left;" hidden="hidden"></canvas>
+                <div id="showImg" hidden="hidden" style="width: 100%;height:100%;">
+                    <img id="tailoringImg">
+                </div>
+            </div>
+            <div class="preview-box-parcel">
+                <p>图片预览：</p>
+                <div class="square previewImg"></div>
+                <div class="circular previewImg"></div>
+            </div>
+        </div>
+        <div class="tailoring-content-three">
+            <button class="l2-btn cropper-reset-btn">复位</button>
+            <button class="l2-btn cropper-rotate-btn">旋转</button>
+            <button class="l2-btn cropper-scaleX-btn">换向</button>
+            <button class="l2-btn sureCut" id="sureCut">确定</button>
+        </div>
+    </div>
+</div>
+<!--图片裁剪框 end-->
+
+<script>
+
+    //弹出框水平垂直居中
+    (window.onresize = function () {
+        var win_height = $(window).height();
+        var win_width = $(window).width();
+        if (win_width <= 768){
+            $(".tailoring-content").css({
+                "top": (win_height - $(".tailoring-content").outerHeight())/2,
+                "left": 0
+            });
+        }else{
+            $(".tailoring-content").css({
+                "top": (win_height - $(".tailoring-content").outerHeight())/2,
+                "left": (win_width - $(".tailoring-content").outerWidth())/2
+            });
+        }
+    })();
+
+
+    //图像上传
+    function selectImg(file) {
+        if (!file.files || !file.files[0]){
+            return;
+        }
+        var reader = new FileReader();
+        reader.onload = function (evt) {
+            var replaceSrc = evt.target.result;
+            //更换cropper的图片
+            $('#tailoringImg').cropper('replace', replaceSrc,false);//默认false，适应高度，不失真
+
+        }
+        reader.readAsDataURL(file.files[0]);
+        mediaStreamTrack && mediaStreamTrack.stop();
+        $("#video").hide();
+        $("#showImg").show();
+
+    }
+    //cropper图片裁剪
+    $('#tailoringImg').cropper({
+        aspectRatio: 1/1,//默认比例
+        preview: '.previewImg',//预览视图
+        guides: false,  //裁剪框的虚线(九宫格)
+        autoCropArea: 0.5,  //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
+        movable: false, //是否允许移动图片
+        dragCrop: true,  //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
+        movable: true,  //是否允许移动剪裁框
+        resizable: true,  //是否允许改变裁剪框的大小
+        zoomable: false,  //是否允许缩放图片大小
+        mouseWheelZoom: false,  //是否允许通过鼠标滚轮来缩放图片
+        touchDragZoom: true,  //是否允许通过触摸移动来缩放图片
+        rotatable: true,  //是否允许旋转图片
+        crop: function(e) {
+            // 输出结果数据裁剪图像。
+        }
+    });
+
+    //弹框
+    $("#replaceImg").on("click",function () {
+        takeImg()
+    });
+
+    //旋转
+    $(".cropper-rotate-btn").on("click",function () {
+        $('#tailoringImg').cropper("rotate", 45);
+    });
+    //复位
+    $(".cropper-reset-btn").on("click",function () {
+        $('#tailoringImg').cropper("reset");
+    });
+    //换向
+    var flagX = true;
+    $(".cropper-scaleX-btn").on("click",function () {
+        if(flagX){
+            $('#tailoringImg').cropper("scaleX", -1);
+            flagX = false;
+        }else{
+            $('#tailoringImg').cropper("scaleX", 1);
+            flagX = true;
+        }
+        flagX != flagX;
+    });
+
+    //裁剪后的处理
+    $("#sureCut").on("click",function () {
+        var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
+        var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
+        base64url=base64url.replace("\r","")
+        $.post("../Info", {op:"takePhoto",base64url:base64url }, function(data) {
+            var result=parseInt($.trim(data.result));
+            if(result==-1){
+                $.messager.show({title:"温馨提示",msg:"输入的信息不完整,确认后重新提交。",timeout:3000,showType:'slide'})
+            }else if(result>0){
+                $.messager.show({title:"成功提示",msg:"头像更新成功",timeout:3000,showType:'slide'})
+                //$('#attendance_info').css('color','green').text("已提交");
+            }else{
+                $.messager.alert("失败提示","头像更新失败，请稍后重试...",'error')
+            }
+        }, "JSON");
+        //关闭裁剪框
+        closeTailor();
+    });
+    //关闭裁剪框
+    function closeTailor() {
+        $(".tailoring-container").toggle();
+        mediaStreamTrack && mediaStreamTrack.stop();
+    }
+
+    //访问用户媒体设备的兼容方法
+    function getUserMedia(constraints, success, error) {
+        if (navigator.mediaDevices.getUserMedia) {
+            //最新的标准API
+            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
+        } else if (navigator.webkitGetUserMedia) {
+            //webkit核心浏览器
+            navigator.webkitGetUserMedia(constraints,success, error)
+        } else if (navigator.mozGetUserMedia) {
+            //firfox浏览器
+            navigator.mozGetUserMedia(constraints, success, error);
+        } else if (navigator.getUserMedia) {
+            //旧版API
+            navigator.getUserMedia(constraints, success, error);
+        }
+    }
+
+    let video = document.getElementById('video');
+    let canvas = document.getElementById('canvas');
+    let context = canvas.getContext('2d');
+    var mediaStreamTrack
+    function success(stream) {
+        //兼容webkit核心浏览器
+        let CompatibleURL = window.URL || window.webkitURL;
+        //将视频流设置为video元素的源
+        mediaStreamTrack = stream.getTracks()[0];
+        //video.src = CompatibleURL.createObjectURL(stream);
+        video.srcObject = stream;
+        video.play();
+    }
+
+    function error(error) {
+        alert('访问用户媒体设备失败,请尝试更换浏览器')
+    }
+
+
+
+    document.getElementById('capture').addEventListener('click', function () {
+        context.drawImage(video, 0, 0, 480, 320);
+        mediaStreamTrack && mediaStreamTrack.stop();
+        $('#tailoringImg').cropper('replace', canvas.toDataURL("image/png"),false);//默认false，适应高度，不失真
+        $("#video").hide();//隐藏拍照框
+        $("#showImg").show()//将拍照结果显示
+    })
+
+    //请求拍照
+    $("#takeAgain").bind("click", function(){
+        takePhoto();
+    });
+
+    //开始拍照
+    function takeImg(){
+        $(".tailoring-container").toggle();
+        takePhoto();
+    }
+
+    //请求摄像头
+    function takePhoto() {
+        if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
+            //调用用户媒体设备, 访问摄像头
+            getUserMedia({video : {width: 100, height: 100}}, success, error);
+            $("#showImg").hide();//隐藏拍照结果显示框
+            //$('#showImg').html('<img id="tailoringImg" hidden="hidden">')
+            $("#video").show();//开启拍照框
+        } else {
+            alert('不支持访问用户媒体');
+        }
+    }
+</script>
+</body>
\ No newline at end of file