Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Preview image and setImage() #115

Open
btafoya opened this Issue · 3 comments

4 participants

@btafoya

I am trying to dynamically load the image being cropped, but the preview image is not updating when I call the setImage() method. The target image is updating correctly. Any help/suggestions?

Thanks!!!!

@fdddf

You must destroy the instance first, then re alloc a new instance.

if(jcrop_api){
                       jcrop_api.destroy();
                   }
                    $('#target').attr('src', data.pic);
                    $pimg.attr('src', data.pic);
                    $('#avatarUploadImg').val(data.pic);

                    $('#target').Jcrop({
                        bgFade: true,
                        boxWidth: 400,
                        boxHeight: 320,
                        minSize: [16,16],
                        setSelect: [c.x,c.y,c.x2,c.y2],
                        onSelect: updatePreview,
                        onChange: updatePreview,
                        aspectRatio: 1 / 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;
                     });
@varsadadj

var selectImgWidth,selectImgHeight,jcrop_api, boundx, boundy,isError=false;
function image_crop(id)
{

var previewId = document.getElementById('target');
var thumbId = document.getElementById('thumb');
previewId.src = '';
$('.col-7').hide();
var flag = 0;
var selectedImg = $("#"+id)[0].files[0];
if(flag===0)
{
isError=false;
$('.alert-info').hide();
var oReader = new FileReader();
oReader.onload = function(e)
{
thumbId.src = previewId.src=e.target.result;
previewId.onload = function ()
{

                $('.col-7').fadeIn(500);
                selectImgWidth = previewId.naturalWidth; 
                selectImgHeight = previewId.naturalHeight;
                if (typeof jcrop_api !== 'undefined') 
                jcrop_api.destroy();
                $('#target').Jcrop({
                onChange: updatePreview,
                onSelect: showThumbnail,
                    aspectRatio: 75/75,
                    setSelect: [ 0, 0, 50, 65 ],
                    boxWidth: 500,
                    boxHeight: 370

            }, function(){

                // use the Jcrop API to get the real image size
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];

                // Store the Jcrop API in the jcrop_api variable
                jcrop_api = this;
            });
            };
        };
    oReader.readAsDataURL(selectedImg);
    }

}
function showThumbnail(c)
{

    var rx = 250 / c.w;
    var ry = 325 / c.h;
    var img_height = $("#target").height();
    var img_width = $("#target").width();
    $("#preview-pane .preview-container img").css({
        width: Math.round(rx * img_width) + 'px',
        height: Math.round(ry * img_height) + 'px',
        marginLeft: '-' + Math.round(rx * c.x) + 'px',
        marginTop: '-' + Math.round(ry * c.y) + 'px'
            });

}
function updatePreview(c) {
if (parseInt(c.w) > 0) {
var rx = 250 / c.w;
var ry = 325 / c.h;

$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
$("#preview-pane .preview-container img").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'
  });
}

}
$(document).ready(function() {

$("#drawImage").click(function (){
    var canvas = document.getElementById("jcrop-preview"); 
    var context = canvas.getContext("2d");
    var img = document.getElementById("target"),
        $img = $(img),
        imgW = img.width,
        imgH = img.height;
    var ratioY = imgH / $img.height(),
        ratioX = imgW / $img.width();
    var getX = $('#x').val() * ratioX,
        getY = $('#y').val() * ratioY,
        getWidth = $('#w').val() * ratioX,
        getHeight = $('#h').val() * ratioY;
        context.drawImage(img,getX,getY,getWidth,getHeight,0,0,250,325);
        return $("#myModal").modal('toggle');
        $("#cropImage").insertAfter($(".row .well-small"));


});
$("#drawImage").click(function (){
    var can = document.getElementById('jcrop-preview');
    var img_data = can.toDataURL("image/png");    
    var target = document.getElementById('target');
    if(img_data !=null)
    {
        img_data = "";
        //document.getElementById('target').src='';
    }   
    var dataString = 'id='+ img_data;
    $.ajax
    ({
        type: "POST",
        url: "../img_krop/saveCanvas.php",
        data: dataString,
        cache: false,
        success: function(respond)
        {
                var Filename = $.trim(respond);
                $("#exe_image").val(Filename);
        }
    });
});

});

@cmccowan

Had the same problem, but I have it working now - without killing and re-attaching jcrop.

The onchange gets wiped for some reason, so you need to define that again. Then you need to update the bounds.

crop_api.setImage(imagestring,function(j){

jcrop_api.setOptions({ onChange: updatePreview,
onSelect: updatePreview });
bounds = jcrop_api.getBounds();
boundx = bounds[0];
boundy = bounds[1];
});

Make sure your ..click function is defined in the same scope as your updatepreview function so that it is referring to the same boundary variables.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.