This is a migrated thread and some comments may be shown as answers.
Custom Crop browser issue
5 Answers 38 Views
This is a migrated thread and some comments may be shown as answers.
Martin Roussel
Top achievements
Rank 1
Martin Roussel asked on 13 Dec 2013, 01:30 PM
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


5 Answers, 1 is accepted

Sort by
0
Martin Roussel
Top achievements
Rank 1
answered on 14 Dec 2013, 03:55 PM
UPDATE:

Both problems still present with 2013.3 1114
0
Vessy
Telerik team
answered on 17 Dec 2013, 12:18 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Martin Roussel
Top achievements
Rank 1
answered on 17 Dec 2013, 01:08 PM
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
0
Vessy
Telerik team
answered on 20 Dec 2013, 02:24 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Martin Roussel
Top achievements
Rank 1
answered on 20 Dec 2013, 02:39 PM
Thanks Veselina,

innerHTML seems indeed the way to go!

Thanks!
Asked by
Martin Roussel
Top achievements
Rank 1
Answers by
Martin Roussel
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or