[Solved] Image Resize - Always Proportional

[Henry]

Hi,
  Is there a way to make the built-in resizing functionality of an image to be always proportional?
  This is to ensure that content being created is not distorted (in terms of the original image used).

Many Thanks,
Henry Wu

[Rumen]

Hi Henry,

The following code will get you started:

<script type="text/javascript">
function OnClientLoad(editor, args)
{
    editor.attachEventHandler("oncontrolselect", function()
    {
        //Check if image
        window.setTimeout(function()
        {
            var selElem = editor.getSelection().getParentElement();
            if (selElem.tagName == "IMG")
            {
                //Store current width and height
                curWidth = selElem.offsetWidth;
                curHeight = selElem.offsetHeight;

                //Possible to resize, so attach eventhandler
                selElem.onresizeend = function(e)
                {
                    alert("I was resized");
                    selElem.style.width = "300";
                    selElem.style.height = "300";

                    selElem.onresizeend = null;//remove handler

                    //Make calculations about skaling, then re-size image
                };
            }
        }, 0);
    });
}
</script>
<br /><br /><br />
<telerik:RadEditor ID="RadEditor1"
    OnClientLoad="OnClientLoad" ToolbarMode="showOnFocus"
    runat="server"  Width="400" Height="400">
    <Content>test
      <img src="http://www.telerik.com/DEMOS/ASPNET/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif"/>
      <a href="www.telerik.com">telerik</a>
      <img src="http://www.telerik.com/DEMOS/ASPNET/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif"/>
    </Content>
</telerik:RadEditor>

You will notice that when you select an image and resize it an event will fire.
There is also most of the logic you need to get the job finished.

Due to the lack of onresizeend event in FireFox, there does not seem to be an approach that can make things work as needed there. Hopefully, the FireFox team will eventually add this useful event to the browser's implementation (similar to the lack of onpaste event in FF2 which was introduced in FF3).

All the best,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Henry]

Thanks again Rumen,

Your code did help us out in implementing the code:
I noticed that if Line 28 is not commented out, then there will be a chance where users can still resize the image after resizing the first time, and the image is still selected (with resize handlers), - thus subsequent resizing will not be handled by the onresizeend event.

Many Thanks,
Henry Wu

	function OnClientLoad(editor, args) {
	// Makes image resizing always proportional
	editor.attachEventHandler("oncontrolselect", function() {
	window.setTimeout(function() {
	var selElem = editor.getSelection().getParentElement();
	if (selElem.tagName == "IMG") {
	//Store current width and height
	currentWidth = selElem.offsetWidth;
	currentHeight = selElem.offsetHeight;
	//alert("I selected an Image");
	//Possible to resize, so attach eventhandler
	selElem.onresizeend = function(e) {
	//alert("I was resized");
	resizedWidth = selElem.offsetWidth;
	resizedHeight = selElem.offsetHeight;
	if (resizedWidth > resizedHeight) {
	resizedHeight = (resizedWidth * currentHeight) / currentWidth;
	}
	if (resizedWidth < resizedHeight) {
	resizedWidth = (resizedHeight * currentWidth) / currentHeight;
	}
	selElem.style.width = resizedWidth;
	selElem.style.height = resizedHeight;
	//selElem.onresizeend = null; //remove handler
	//Make calculations about skaling, then re-size image
	};
	}
	}, 100);
	});

[Rumen]

Hi Henry,

Thank you for sharing your solution with the community. I updated your Telerik points for your work.

All the best,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.