Custom Crop browser issue

[Martin Roussel]

Hi,

im trying to use Custom (external) Crop to have fixed crop dimensions (256 x 256) at dialog load. I have the two following issues (im using Q3 2012 btw):

1-In Chrome (Version 31.0.1650.63 m), if only my website in deployed on the server (in localhost, no problem), the dimension always falls to 258 x 258. I tried all these browsers (deployed and local) and they all have the same behavior than Chrome local (good): IE8,IE11,FF,Opera,Safari Ive checked the code from ImageEditorDialogs\Crop.ascx and the difference I see here might give us hints:

 <asp:Label ID="Label1" Text='<%$ appSettings:ImageResizeWidth %>' runat="server" style="display: none;" />
 <asp:Label ID="Label2" Text='<%$ appSettings:ImageResizeHeight %>' runat="server" style="display: none;" />

initialize: function () {

                    $IE.Crop.callBaseMethod(this, "initialize");

 

                    this._xTxt = this._getControlFromParent("txtX");

                    this._yTxt = this._getControlFromParent("txtY");

                    this._widthTxt = this._getControlFromParent("txtWidth");

                    this._heightTxt = this._getControlFromParent("txtHeight");

                    this._presetDD = this._findControlFromParent("rieAspectRatio");

                    this._cropBtn = this._findControlFromParent("btnApply");

                    this._cancelBtn = this._findControlFromParent("btnCancel");

                    this._constraintBtn = this._findControlFromParent("btnConstraint");

                    this._swapBtn = this._findControlFromParent("btnSwap");

                    this._sizeRatio = null;

                    this._zoomLevel = this._getImageZoomLevel();

 

                    this._createCropBox();

                    this._updateControlsFromCropBox();

                    this._constraintBtnClick(this._constraintBtn);

                    this._attachHandlers(true);

                    this.get_imageEditor().get_formDecorator().decorate($get(this.get_parentId() + "Table"));

 

                     

                      this.set_width(this._getControlFromParent("Label1").innerText); //where the size fixing is called

                      this.set_height(this._getControlFromParent("Label2").innerText); //where the size fixing is called

                     

                },

.

.

.

 

              set_width: function (value) {

                     

 

                    var imageSize = this.get_imageSize();

                    var bounds = this._cropBox.getBounds();

 

                    alert(bounds.x); //returns in Chrome deployed -0.000002741.....  all other returns 0

               alert(imageSize.width); //returns in Chrome deployed 257.....  all other returns 256

 

                    value = this._restrictValue(value, 0, imageSize.width - bounds.x);

 

                    alert(imageSize.height);  //returns in Chrome deployed 257.....  all other returns 256

                    alert(bounds.y); //returns in Chrome deployed -0.000002741.....  all other returns 0

 

                    value = this._applyWidthConstraintRatio(value, imageSize.height - bounds.y);

                    this.set_inputValue(this._widthTxt, value);

             

                }

2-In FF 26.0, this._getControlFromParent("Label1").innerText and this._getControlFromParent("Label2").innerText from code above returns "undefined" instead of 256 like all other browsers mentioned.

Please help

TIA


[Martin Roussel]

UPDATE:

Both problems still present with 2013.3 1114

[Vessy]

Hello Martin,

I am afraid that I was not able to reproduce the second issue on my side - could you please provide all the code that is needed to reproduce it?

Additionally, if you only want to set initial size of the cropbox, I would suggest you to try the approach bellow ans see whether it would fit your scenario better:

<telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="Jellyfish.jpg"OnClientCommandExecuted="modifyCommand">
</telerik:RadImageEditor>
<script type="text/javascript">
    function modifyCommand(imageEditor, args) {
        if (args.get_commandName() == "Crop") {
            waitForCommand(imageEditor, args.get_commandName(), function (widget) {
                var width = 256;
                var height = 256;
                var ratio = width / height;

                //widget._constraintBtn.set_checked(false); //stop the aspect ratio constraint
                widget._setCropBoxRatio(ratio);
                widget._sizeRatio = ratio;
                widget.set_width(width);
                widget.set_height(height);
                widget._constraintBtn.set_enabled(false);
                widget._updateCropBoxFromControls();
            });
        }
    }

    function waitForCommand(imageEditor, commandName, callback) {
        var timer = setInterval(function () {
            var widget = imageEditor.get_currentToolWidget();
            if (widget && widget.get_name() == commandName) {
                clearInterval(timer);
                callback(widget);
            }
        }, 100);
    }
</script>

Looking forward to hearing from you,
Veselina Raykova
Telerik

[Martin Roussel]

Veselina,

you're approach seems to work great. However, the values (256) need to come from the Web.config file. Can you show me the proper way to get these values and transmit them to the client-side variables?

If you check my initial code, im retrieving the values into hidden labels

<asp:Label ID="Label1" Text='<%$ appSettings:ImageResizeWidth %>' runat="server" style="display: none;" />
<asp:Label ID="Label2" Text='<%$ appSettings:ImageResizeHeight %>' runat="server" style="display: none;" />

then using the getControlFromParent in javascript (but this returns "undefined" in FF)

this.set_width(this._getControlFromParent("Label1").innerText);
this.set_height(this._getControlFromParent("Label2").innerText);

UPDATE: Ive edited my previous post since finally both problems still occurs with the latest version of the control

TIA

[Vessy]

Hi Martin,

After a firther investigation it tuned out that Firefox does not have an implementation for innerText property of the labels, so I would suggest that you use the innerHTML one, returning correct values in all browsers:

this.set_width(this._getControlFromParent("Label1").innerHTML); //where the size fixing is called
this.set_height(this._getControlFromParent("Label2").innerHTML); //where the size fixing is called

Hope this helps.

Regards,
Veselina Raykova
Telerik

[Martin Roussel]

Thanks Veselina,

innerHTML seems indeed the way to go!

Thanks!