Jcrop - 弹出窗口中图像尺寸较小的问题

Question

Jcrop 在弹出窗口中的小图像尺寸存在一些问题。实际上我正在使用 JCrop 来裁剪图像。此外，图像显示弹出。所以问题是在弹出窗口中图像的大小太小了。我希望该图像较大。以便用户可以轻松裁剪图像。请帮我解决问题。

在另一部分，我使用了相同的代码，并且运行良好。 但它不在同一页面上。 提前致谢。

SCREENSHOT OF Jcrop SMALL IMAGE

function upload_img(){
    document.getElementById('user_picture').click();
}
$("#user_picture").change(function(){
    var filename;
    im = new Image();
    im.src = this.value;
    filename = this.value;
    filetype = filename.substring(filename.lastIndexOf('.')+1);
    if ( filetype=="jpg" || filetype=="JPG" || filetype=="jpeg" || filetype=="JPEG" || filetype=="gif" || filetype=="GIF" || filetype=="png" || filetype=="PNG"){
    $("#form_user_picture").submit();
    }else{
        this.value='';
        $('.content').prepend('<div id="alert" class="alert"><span class="closebtn pull-right" onclick="dismiss();">&times;</span> Image format not correct, please select png,jpeg,jpg .</div>');
    }
});

    function show_popup_cropcover_3(url,TARGET_W, TARGET_H,image_id) {
        // change the photo source
        console.log(TARGET_W);
        console.log(TARGET_H);
        $('#backgroundcropbox').attr('src', url);
        // destroy the Jcrop object to create a new one
        try {
            jcrop_api.destroy();
        } catch (e) {
        // object not defined
        }
        // Initialize the Jcrop using the TARGET_W and TARGET_H that initialized before
        $('#backgroundcropbox').Jcrop({
            aspectRatio: TARGET_W / TARGET_H,
            setSelect:   [ 100, 100, TARGET_W, TARGET_H ],
            onSelect: updateCoords3
        },function(){
            jcrop_api = this;
        });
        $('#popup_upload3').hide();
        $('#photo_url3').val(url);
        $("#crop_btn3").attr("onClick","crop_profile("+TARGET_W+","+TARGET_H+")");
        // show the crop popup
        $('#popup_crop3').show();
    }
    function updateCoords3(c) {
        $('#x1').val(c.x);
        $('#y1').val(c.y);
        $('#w1').val(c.w);
        $('#h1').val(c.h);
    }

    function crop_profile(TARGET_W,TARGET_H){
        var x_ = $('#x1').val();
        var y_ = $('#y1').val();
        var w_ = $('#w1').val();
        var h_ = $('#h1').val();
        var photo_url = $('#photo_url3').val();
        $.ajax({
            url: 'crop_photo.php',
            url: '<?php echo base_url();?>crop_image/crop_user_background_pic2',
            type: 'POST',
            data: {x:x_, y:y_, w:w_, h:h_, photo_url:photo_url, targ_w:TARGET_W, targ_h:TARGET_H},
            success:function(data){
                if (data != "FALSE") {
                jQuery('.img-loader').html('');
                    $("#avatar").attr("src",data);
                    $("#popup_crop3").hide();
                    $('#user_picture').val('');
                    window.location=window.location;

                }
            }
        });
    }
    function closepopup() {
        $("#popup_crop3").hide();
        $(".img-loader").hide();
    }

提前致谢。

Answer 1

我现在能想到两件事。 1：您的图像非常小。 2：你用低维度初始化jcrop

请更改此行

setSelect:   [ 100, 100, TARGET_W, TARGET_H ],

如您所见，您在此处使用 100、100。尝试将其更改为 200、200 并查看是否有效。