js中截取上传的图片上传到后台

先上效果图

 

 

前端代码：

使用的bootstrap-modal

<%-- 需要的css --%>
<link href="cropper.min.css" rel="stylesheet">
<link href="sitelogo.css" rel="stylesheet">
<link rel="stylesheet"type="text/css"href="bootstrap-3.3.4.css">
<link rel="stylesheet" type="text/css" href="font-awesome.4.6.0.css">

<%--图片上传modal--%>
<div class="modal fade" id="avatar-modal" aria-hidden="true" data-width="950" aria-labelledby="avatar-modal-label"
     role="dialog"
     tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form class="avatar-form">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
                </div>
                <div class="modal-body">
                    <div class="avatar-body">
                        <div class="avatar-upload">
                            <input type="hidden" id="type"/>
                            <input class="avatar-src" name="avatar_src" type="hidden">
                            <input class="avatar-data" name="avatar_data" type="hidden">
                            <button class="btn btn-danger" type="button" style="height: 35px;"
                                    onclick="$('input[id=avatarInput]').click();">请选择图片
                            </button>
                            <span id="avatar-name"></span>
                            <input class="avatar-input hide" accept="image/jpeg,image/jpg,image/png" id="avatarInput"
                                   name="avatar_file" type="file">
                        </div>
                        <div class="row">
                            <div class="col-md-9">
                                <div class="avatar-wrapper"></div>
                            </div>
                            <div class="col-md-3">
                                <div class="avatar-preview preview-lg" id="imageHead"></div>
                            </div>
                        </div>
                        <div class="row avatar-btns">
                            <div class="col-md-4">
                                <div class="btn-group">
                                    <button class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90"
                                            type="button" title="Rotate -90 degrees"> 向左旋转
                                    </button>
                                </div>
                                <div class="btn-group">
                                    <button class="btn  btn-danger fa fa-repeat" data-method="rotate" data-option="90"
                                            type="button" title="Rotate 90 degrees"> 向右旋转
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-4" style="text-align: right;">
                                <button class="btn btn-danger fa fa-arrows" data-method="setDragMode" data-option="move"
                                        type="button" title="移动">
							            <span class="docs-tooltip" data-toggle="tooltip" title=""
                                              data-original-title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
							            </span>
                                </button>
                                <button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom"
                                        data-option="0.1" title="放大图片">
							            <span class="docs-tooltip" data-toggle="tooltip" title=""
                                              data-original-title="$().cropper(&quot;zoom&quot;, 0.1)">
							              <!--<span class="fa fa-search-plus"></span>-->
							            </span>
                                </button>
                                <button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom"
                                        data-option="-0.1" title="缩小图片">
							            <span class="docs-tooltip" data-toggle="tooltip" title=""
                                              data-original-title="$().cropper(&quot;zoom&quot;, -0.1)">
							              <!--<span class="fa fa-search-minus"></span>-->
							            </span>
                                </button>
                                <button type="button" class="btn btn-danger fa fa-refresh" data-method="reset"
                                        title="重置图片">
								            <span class="docs-tooltip" data-toggle="tooltip" title=""
                                                  data-original-title="$().cropper(&quot;reset&quot;)"
                                                  aria-describedby="tooltip866214">
                                            </span>
                                </button>

                            </div>
                            <div class="col-md-4" style="text-align: right">
                                <button class="btn btn-danger  avatar-save fa fa-save" type="button">
                                    保存
                                </button>
                                <button class="btn btn-danger  fa fa-power-off" type="button"
                                        data-dismiss="modal"> 关闭
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<%-- 这里是需要导入的js --%>
<script src="jquery-1.10.2.js"></script>
<script src="bootstrap-3.3.4.js"></script>
<script src="html2canvas.min.js"></script>
<script src="cropper.js"></script>
<script src="sitelogo.js"></script>

 

<link href="cropper.min.css" rel="stylesheet">
<link href="sitelogo.css" rel="stylesheet">

<script src="html2canvas.min.js"></script>
<script src="cropper.js"></script>
<script src="sitelogo.js"></script>

上面的这些css 和js 可以在这里下载：https://download.csdn.net/download/wlj_wangjun/11777716

下载后解压后如图：里面有两个压缩包，功能页面差不多，我这里使用的 12057.zip这个列子。

jquery.js  和bootstrap相关的js 和 css  可以从网上下载。

js中 点击保存按钮 

    /**
     * 点击 上传图片模态框保存按钮
     */
    $(".avatar-save").on("click", function () {
        var img_lg = document.getElementById('imageHead');

        if ($("#imageHead:has(img)").length == 0) {
            toastr.warning("请选择图片");
            return;
        }
        html2canvas(img_lg, {
            allowTaint: true,
            taintTest: false,
            onrendered: function (canvas) {
                canvas.id = "mycanvas";
                //生成base64图片数据
                var dataUrl = canvas.toDataURL("image/jpeg");
                var newImg = document.createElement("img");
                newImg.src = dataUrl;
                saveBase64Img(dataUrl);
            }
        });

    });

    /**
     * 保存图片
     */
    function saveBase64Img(base64Data) {
        Jm.doPost({
            url: "/pages/module/goodsManager/uploadBase64Img",
            cache: false,
            async: false,
            data: base64Data,
            success: function (result) {
               alert("保存成功")
            }
        });
    }

java 后台接受 base64格式的图片

    //controller 
    @PostMapping("/uploadBase64Img")
    @ResponseBody
    public ResultVO uploadBase64Img(@RequestBody String base64Data) {
        return shopGoodsManagerService.uploadBase64Img(base64Data);
    }

service 层中自己处理。

 

 

当第一次打开 modal后，选中图片，不管是否点击保存，关闭模态框，第二次打开  avatar-modal，会显示上一次的图片，这个问题困扰了很久，最后找到了解决办法。

在打开模态框 avatar-modal 之前 调用此方法。

/**
  * 打开图片上传 模态框
 */
 function openModal(){
    //清除历史图片记录
    clearAvatarModal();
    $("#avatar-modal").modal("show");
}


    /**
     * 清除 截取图片的modal 历史图片
     */
    function clearAvatarModal() {
        //清除上一次选中的图片
        $(".avatar-wrapper .cropper-bg").remove();
        $(".avatar-wrapper img").attr("src", "");
        $("#imageHead").empty();
    }