function ImageResizer(canvasWidth, canvasHeight, sourceWidth,sourceHeight, destinationX, destinationY, destinationWidth, destinationHeight) {var canvasRatio = canvasWidth / canvasHeight;var sourceRatio = sourceWidth / sourceHeight;if (sourceWidth > canvasWidth || sourceHeight > canvasHeight) {//if the image does not fit into the required canvasif (canvasRatio >= 1) {//if the canvas is landscapeif (sourceRatio <= 1) {//if the image is portraitdestinationHeight = canvasHeight;destinationWidth = destinationHeight * sourceRatio;destinationX = (canvasWidth - destinationWidth) / 2;destinationY = 0;}else if (sourceRatio > 1) {//if the image is landscapeif (canvasRatio < sourceRatio) {//make the landscape image fit inside the required Canvas.//In this case, ImageX is bigger than//canvasWidth & ImageY is smaller than canvasHeightdestinationWidth = canvasWidth;destinationHeight = destinationWidth / sourceRatio;destinationX = 0;destinationY = (canvasHeight - destinationHeight) / 2;} else if (canvasRatio >= sourceRatio) {//In this case, ImageY is bigger than canvasHeight &//ImageX is smaller than canvasWidthdestinationHeight = canvasHeight;destinationWidth = destinationHeight * sourceRatio;destinationX = (canvasWidth - destinationWidth) / 2;destinationY = 0;}}}else if (canvasRatio < 1) {//if the canvas is portraitif (sourceRatio >= 1) {//if the image is landscapedestinationWidth = canvasWidth;destinationHeight = destinationWidth / sourceRatio;destinationX = 0;destinationY = (canvasHeight - destinationHeight) / 2;}else if (sourceRatio < 1) {//if the image is portraitif (canvasRatio > sourceRatio) {//make the portrait image fit inside the required Canvas.//In this case, ImageY is bigger than//canvasHeight & ImageX is small than canvasWidthdestinationHeight = canvasHeight;destinationWidth = destinationHeight * sourceRatio;destinationX = (canvasWidth - destinationWidth) / 2;destinationY = 0;} else if (canvasRatio <= sourceRatio) {//In this case, ImageX is bigger than canvasWidth &//ImageY is smaller than canvasHeightdestinationWidth = canvasWidth;destinationHeight = destinationWidth / sourceRatio;destinationX = 0;destinationY = (canvasHeight - destinationHeight) / 2;}}}}else {//image will directly fit inside the canvasdestinationWidth = sourceWidth;destinationHeight = sourceHeight;destinationX = (canvasWidth - sourceWidth) / 2;destinationY = (canvasHeight - sourceHeight) / 2;}console.log("img.width=" + sourceWidth + " img.height=" +sourceHeight + " destinationX=" + destinationX + " destinationY=" +destinationY + " destinationWidth=" + destinationWidth +" destinationHeight=" + destinationHeight);
}

要了解该算法，您必须考虑下图：

<img data-attachment-id="1262"data-permalink="https://debchy.wordpress.com/2017/07/29/
create-asp-net-control-for-image-resizer-and-cropper-keeping-aspect-ratio/capture-2/"data-orig-file="https://debchy.files.wordpress.com/2017/07/capture1.png"data-orig-size="656,274" data-comments-opened="1"data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="Capture"data-image-description=""data-medium-file="https://debchy.files.wordpress.com/2017/07/capture1.png?w=300"data-large-file="https://debchy.files.wordpress.com/2017/07/capture1.png?w=656"class="alignnone size-full wp-image-1262"src="https://debchy.files.wordpress.com/2017/07/capture1.png?w=809" alt="Capture"srcset="https://debchy.files.wordpress.com/2017/07/capture1.png 656w,
https://debchy.files.wordpress.com/2017/07/capture1.png?w=150 150w,
https://debchy.files.wordpress.com/2017/07/capture1.png?w=300 300w"sizes="(max-width: 656px) 100vw, 656px"   />

这是一个名为hdnResultImage的隐藏字段。您可以从控件对象访问该字段，因为隐藏字段是public属性。