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

Posted 2023-02-25

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

【英文标题】：Jcrop - Issues with small image size in popup

【发布时间】：2018-01-02 11:55:00

【问题描述】：

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();
    

提前致谢。

【参考方案1】：

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

请更改此行

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

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

【讨论】：

TARGET_W与图片的宽度是否对应？

TARGET_W = 200 TARGET_H = 200