Custom Crop browser issue

6 posts, 0 answers
  1. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 13 Dec 2013 Link to this post

    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


  2. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 14 Dec 2013 Link to this post

    UPDATE:

    Both problems still present with 2013.3 1114
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 17 Dec 2013 Link to this post

    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.
  5. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 17 Dec 2013 Link to this post

    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
  6. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 20 Dec 2013 Link to this post

    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.
  7. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 20 Dec 2013 Link to this post

    Thanks Veselina,

    innerHTML seems indeed the way to go!

    Thanks!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017