darkroomjs icon indicating copy to clipboard operation
darkroomjs copied to clipboard

Cropping area is outside of image

Open nikopeikrishvili opened this issue 7 years ago • 1 comments

Hello, I use this plugin and looks like there is a bug, I can crop background of plugin outside of image

screen shot 2017-10-02 at 5 35 29 pm here is code:

imgp.dkrm = new Darkroom('.item_profile_image > img', {
                    // Size options
                    minWidth: 400,
                    minHeight: 400,
                    maxWidth: 400,
                    maxHeight: 400,
                    ratio: 4 / 4,
                    backgroundColor: false,
                    plugins: {
                        crop: {
                            callback: function () {
                            },
                            quickCropKey: 67, //key "c"
                            ratio: 4 / 4
                        },
                        history: false,
                        save: {
                            callback: function () {
                                imgp.isCropStarted = 0;
                                imgp.isPicuterAddClicked = 0;
                                loadershow($('.loader-body'));
                                $.when(imgp.cropPlugin.cropCurrentZone()).done(function () {
                                    setTimeout(function () {
                                        var newImage = imgp.dkrm.canvas.toDataURL();
                                        imgp.uploadCroppedImage(newImage, order, is_primary);
                                        imgp.loadCropper();
                                        $('.darkroom-toolbar').remove();
                                    }, 1000);
                                });
                            }
                        },
                        close: {
                            callback: function ()
                            {
                                imgp.isCropStarted = 0;
                                if (imgp.isPicuterAddClicked === 1)
                                {
                                    $('.darkroom-container').remove();
                                    $('.item_profile_image').html('<img src="' + imgp.previusImage + '" id="item_profile_img" class="front_flip" />');
                                    if ($('#profileImage').attr("src") === imgp.previusImage)
                                    {
                                        $('.profile_image_overly').show();
                                    }
                                } else
                                {
                                    imgp.dkrm.selfDestroy();
                                }
                            }
                        },
                        done:{
                          callback: function ()
                            {
                               
                            }
                        }
                    },
                    // Post initialize script
                    initialize: function () {
                        imgp.cropPlugin = this.plugins['crop'];
                        imgp.cropPlugin.selectZone(100, 100, 200, 200);
//                        imgp.cropPlugin.requireFocus();
                    },
                });

nikopeikrishvili avatar Oct 02 '17 13:10 nikopeikrishvili

same here, it has do do with fabric.js ver 1.4.13 is the one they use for the demo and that works fine with darkroom but they should fixed that anyway now fabric is on version 2. Install this version of fabric.js it woked for me.

npm install [email protected]

mylastore avatar Sep 07 '18 18:09 mylastore