Lock cropping resize

4 posts, 0 answers
  1. HSLaw
    HSLaw avatar
    153 posts
    Member since:
    Jan 2006

    Posted 09 Apr 2014 Link to this post

    Hi,
    Referring to the screencap http://upload.ximnet.com.my/huisheng/crop.png

    Requirement: I want to let user crop a 300x300 thumbnail:

    1. I have locked the width and height and hide the aspect ratio using JavaScript:

    //This code sets the initial dimensions of the CropBox and the aspect ratio
           this._widthTxt.value = 300;
           this._heightTxt.value = 300;
           var ratio = 100 / 100; // (w/h)
           this._setCropBoxRatio(ratio);
           this._sizeRatio = ratio;
           this._updateCropBoxFromControls();


    2. But if user drag the resize handler, they are still able to change the thumbnail size.
    How do I lock the resize handler to prevent user from re-sizing when cropping?

    3. What is the best way / correct way to load the thumbnail size from database?  Is it to use Ajax call in the ascx or there is a better method?

    Thanks.

  2. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 14 Apr 2014 Link to this post

    Hello,

    The resizing of the crop box cannot be controlled out of the box, but you can disable it by adding the following override of the draggable resize box's _createResizeExtender() method at the end of the page, containing RadImageEditor:
        <script type="text/javascript">
            Telerik.Web.UI.ImageEditor.DraggableResizeBox.prototype._createResizeExtender = function () {
                var jCropElement = $telerik.$(this._boxElement);
                var extenderProperties;
     
                if (currentCommand == "InsertImage") {
                    extenderProperties = { move: jCropElement.find(".rieDraggableBoxMove")[0] };
                }
                else {
                    extenderProperties =
                    {
                        move: jCropElement.find(".rieDraggableBoxMove")[0]
                    };
                }
     
                this._resizeExtender = new Telerik.Web.UI.ResizeExtender(this, this._boxElement, extenderProperties);
                this._overrideResizeExtenderMethods();
                this._resizeExtenderScroller = new Telerik.Web.UI.ImageEditor.ResizeExtenderScroller(this._resizeExtender);
                this._resizeExtenderScroller.add_scrolling($telerik.$.proxy(this._onScrolling, this));
            }
        </script>
    </form>

    Regarding your second question - this depends a lot on the exact requirements you have. Could you describe in more details the exact functionality you want to achieve?

    Regards,
    Vessy
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. HSLaw
    HSLaw avatar
    153 posts
    Member since:
    Jan 2006

    Posted 14 Apr 2014 in reply to Vessy Link to this post

    Hi,

    Referring to the screen cap http://s23.postimg.org/sgipjd06x/crop_width_height.png

    We need to set the width and height of the cropping size dynamically.
    We have a setting page for admin to do so.
    The setting page will store the value to database and then in the cropping window we need to pull them out from database and set the width and height.

    Thanks.
  5. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 17 Apr 2014 Link to this post

    Hi,

    Accessing database values from a JavaScript function is not directly related to Telerik Controls, but is a general programing task. There are several ways to do that and which one you would choose depends entirely on you and the exact setup you have - you can keep the desired values in a Server-side variables or you can refer them directly in a JavaScript function.

    More information on this matter is available in various resources on Internet, for example, you could start your research from here:
    Javascript Access SQl Server Database Table
    passing database values to javascript function

    Kind regards,
    Vessy
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top