MattKetmo / darkroomjs

Extensible image editing tool in your browser
https://mattketmo.github.io/darkroomjs
MIT License
1.42k stars 405 forks source link

Cropping area is outside of image #119

Open nikopeikrishvili opened 7 years ago

nikopeikrishvili commented 7 years ago

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();
                    },
                });
mylastore commented 6 years ago

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 fabric@1.6.2