chat-server/qq-imsvr/view/broadcast/coverLayer/addCover.html

<div class="cropping" style="text-align: center;">
    <div class="title">Cropping Area</div>
    <div class="close"><a href="javascript:;"><img src="<%=public_path%>/img/close-btn.png" alt=""/></a></div>
    <div class="clear"></div>
    <div class="cropping-img">
        <img src="<%=blobImg%>" style="max-height: <%=height%>px; max-width: <%=width%>px;">
    </div>
    <div class="clear"></div>
    <div class="btn">
        <button class="Submit" style="cursor: pointer;">Submit</button>
    </div>
</div>
<script>
    $(function(){
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.iframeAuto(index);
        $('.close').click(function(){
            parent.layer.close(index);
        })

        var $img = $('.cropping-img > img');
        $img.cropper({
            aspectRatio: 256 / 350,
            guides:false,
            minCropBoxWidth:256,
            minCropBoxHeight:350,
            crop: function(data) {
                // Output the result data for cropping image.
            }
        });

        $('.Submit').click(function () {
            var editSubmitStart = layer.load(2);//load遮罩
            $img.cropper('getCroppedCanvas').toBlob(function (blob) {
                var formData = new FormData();
                formData.append('croppedImage', blob);
                formData.append('originalImage', window.parent.originalImg);
                $.ajax('<%=server_host%>/api/?act=uploadCoverStepa', {
                    method: "POST",
                    dataType: "json",
                    timeout : 30000,
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        if(data.errno == 0){
                            var img = data.data.url.croppedImage;
                            var handle_id = data.handle_id;
                            $.post('/broadcast/coverLayer/addCover', {img:img,handle_id:handle_id}, function(data){
                                if(data.errno == 0){
                                    Cookies.set('add_success_cover', {status:1});
                                    parent.layer.close(index);
                                    layer.close(editSubmitStart);//关闭load遮罩
                                    parent.layer.msg('Submit successfully. Auditing soon.');
                                }else{
                                    myParentAlert('Could not submit the cropped photo, please try again later.');
                                    layer.close(editSubmitStart);//关闭load遮罩
                                }
                            })
                        }else{
                            parent.layer.close(index);
                            layer.close(editSubmitStart);//关闭load遮罩
                            myParentAlert('Failed to upload. Please try again later');
                        }
                    },
                    error: function () {
                        parent.layer.close(index);
                        layer.close(editSubmitStart);//关闭load遮罩
                        myParentAlert('Failed to upload. Please try again later');
                    }
                });
            },'<%=type%>');
        })

    })
</script>