Question

使用jcrop裁剪上传的图像时，只能选择部分图片，如下图所示： enter image description here

如上图所示，虽然可以选择红色矩形中的图片部分，但无法从图片中裁剪。这有什么不对？

我的Html代码：

<div class="span9">
    <div class="heading-banner">
        <h2 style="font-size:20px">我的头像</h2>
    </div>
    <div class="row">
        <label><span class="label">当前头像：</span></label>
        <img id="avatar" src="<?php echo base_url('/images/default.gif')?>" />
    </div>
    <div class="row">
        <label><span class="label">上传图片：</span></label>
        <input type="text" id="avatarUpload" value="" />
        <input type="hidden" id="img" name="img" />
        <input type="hidden" id="x" name="x" />
        <input type="hidden" id="y" name="y" />
        <input type="hidden" id="w" name="w" />
        <input type="hidden" id="h" name="h" />
        <div style="padding-top:-10px;">
            <a href="javascript:$('#avatarUpload').uploadify('upload','*')">开始上传</a> |
            <a href="javascript:$('#avatarUpload').uploadify('cancel', '*')">取消上传</a>
        </div>
    </div>
    <div class="imgchoose">编辑头像：<br /><img src="" id="target" /></div>
    <div class="row imgchoose" style="display:none;">
        头像预览：<br />
        <div style="width:200px;height:200px;margin:10px 10px 10px 0;overflow:hidden; float:left;"><img class="preview" id="preview3" src="" /></div>
        <div style="width:130px;height:130px;margin:80px 0 10px;overflow:hidden; float:left;"><img class="preview" id="preview2" src="" /></div>
        <div style="width:112px;height:112px;margin:98px 0 10px 10px;overflow:hidden; float:left;"><img class="preview" id="preview" src="" /></div>
    </div>
<div class="row">
    <input type="button" class="btn_submit" value="" id="avatar_submit" style="display:none;" />
</div>
</div>
<div class="span3">
    <ul id="profile-list" class="nav nav-list">
        <li><a href="<?php echo base_url('user/basic')?>">我的个人资料</a></li>
        <li><a href="<?php echo base_url('user/avatar');?>">修改头像</a></li>
    </ul>
</div>

我的js代码：

<script type="text/javascript">
$(function() {
    //首页轮播图1
    $("#avatarUpload").uploadify({
        'auto'              : false,
        'multi'             : false,
        'uploadLimit'       : 1,
        'formData'          : {'uid':'18'},
        'buttonText'        : '请选择图片',
        'height'            : 20,
        'width'             : 120,
        'removeCompleted'   : false,
        'swf'               : "<?php echo base_url('uploadify/uploadify.swf') ?>",
        'uploader'          : "<?php echo base_url('user/do_avatar');?>",
        'fileTypeExts'      : '*.gif; *.jpg; *.jpeg; *.png;',
        'fileSizeLimit'     : '1024KB',
        'debug':true,
        'onUploadSuccess' : function(file, data, response) {
            var msg = $.parseJSON(data);
            alert(msg.result_des);
            if( msg.result_code == 1 ){
                $("#img").val(msg.result_des );
                $("#target").attr("src",msg.result_des);
                $(".preview").attr("src",msg.result_des);
                $('#target').Jcrop({
                    minSize: [50,50],
                    setSelect: [0,0,200,200],
                    onChange: updatePreview,
                    onSelect: updatePreview,
                    onSelect: updateCoords,
                    aspectRatio: 1
                },
                function(){
                    // Use the API to get the real image size
                    var bounds = this.getBounds();
                    boundx = bounds[0];
                    boundy = bounds[1];
                    // Store the API in the jcrop_api variable
                    jcrop_api = this;
                });
                $(".imgchoose").show(1000);
                $("#target").show(1000);
                $("#avatar_submit").show(1000);
            } else {
                alert('上传失败');
            }
        },
        'onClearQueue' : function(queueItemCount) {
            alert( $('#img1') );
        },
        'onCancel' : function(file) {
            alert('The file ' + file.name + ' was cancelled.');
        }
    });

    //头像裁剪
    var jcrop_api, boundx, boundy;

    function updateCoords(c)
    {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
    };
    function checkCoords()
    {
        if (parseInt($('#w').val())) return true;
        alert('请选择图片上合适的区域');
        return false;
    };
    function updatePreview(c){
        if (parseInt(c.w) > 0){
            var rx = 112 / c.w;
            var ry = 112 / c.h;
            $('#preview').css({
                width: Math.round(rx * boundx) + 'px',
                height: Math.round(ry * boundy) + 'px',
                marginLeft: '-' + Math.round(rx * c.x) + 'px',
                marginTop: '-' + Math.round(ry * c.y) + 'px'
            });
        }
        {
            var rx = 130 / c.w;
            var ry = 130 / c.h;
            $('#preview2').css({
                width: Math.round(rx * boundx) + 'px',
                height: Math.round(ry * boundy) + 'px',
                marginLeft: '-' + Math.round(rx * c.x) + 'px',
                marginTop: '-' + Math.round(ry * c.y) + 'px'
            });
        }
        {
            var rx = 200 / c.w;
            var ry = 200 / c.h;
            $('#preview3').css({
                width: Math.round(rx * boundx) + 'px',
                height: Math.round(ry * boundy) + 'px',
                marginLeft: '-' + Math.round(rx * c.x) + 'px',
                marginTop: '-' + Math.round(ry * c.y) + 'px'
            });
        }
    };

    $("#avatar_submit").click(function(){
        var img = $("#img").val();
        var x = $("#x").val();
        var y = $("#y").val();
        var w = $("#w").val();
        var h = $("#h").val();
        if( checkCoords() ){
            $.ajax({
                type: "POST",
                url: "resize.php",
                data: {"img":img,"x":x,"y":y,"w":w,"h":h},
                dataType: "json",
                success: function(msg){
                    if( msg.result_code == 1 ){
                        $('html,body').animate({scrollTop:$('#avatar').offset().top-150},1000,'swing',function(){
                            $('#avatar_msg').show();
                            $('#avatar').attr('src',msg.result_des.small);
                        });
                    } else {
                        alert("失败，傻逼铁道部");
                    }
                }
            });
        }
    });
});
</script>

只能在使用jcrop时选择部分图像？

0 个答案: