在B2B类型的项目中，用户经常需要上传图像，但往往不会自行调整图像大小，导致上传的图像过大，影响网站加载速度。为了解决这个问题，开发了一种强制调整上传图像大小的方法，同时保持原始图像的长宽比和质量。用户还可以选择裁剪部分图像。
以下是用户可以进行裁剪的画布：
裁剪完成后，用户可以预览裁剪后的图像，并有机会重新选择裁剪部分，然后按照固定的比例上传所需大小的图像（保持为图像设置的长宽比）。上传图像后，无需刷新页面即可预览上传的图像。
整个过程都是通过JavaScript、JQuery和AJAX完成的，因此不需要回传或刷新页面，这种缩放、裁剪、上传的过程现在更加专业。可以设置肖像和风景图像的比例进行裁剪，而不会扭曲当前图像的比例。为此，开发了自己的缩放算法，并用JavaScript实现。以下是JavaScript格式的算法：
function ImageResizer(canvasWidth, canvasHeight, sourceWidth, sourceHeight, destinationX, destinationY, destinationWidth, destinationHeight) {
var canvasRatio = canvasWidth / canvasHeight;
var sourceRatio = sourceWidth / sourceHeight;
if (sourceWidth > canvasWidth || sourceHeight > canvasHeight) {
if (canvasRatio >= 1) {
if (sourceRatio <= 1) {
destinationHeight = canvasHeight;
destinationWidth = destinationHeight * sourceRatio;
destinationX = (canvasWidth - destinationWidth) / 2;
destinationY = 0;
} else if (sourceRatio > 1) {
if (canvasRatio < sourceRatio) {
destinationWidth = canvasWidth;
destinationHeight = destinationWidth / sourceRatio;
destinationX = 0;
destinationY = (canvasHeight - destinationHeight) / 2;
} else if (canvasRatio >= sourceRatio) {
destinationHeight = canvasHeight;
destinationWidth = destinationHeight * sourceRatio;
destinationX = (canvasWidth - destinationWidth) / 2;
destinationY = 0;
}
}
} else if (canvasRatio < 1) {
if (sourceRatio >= 1) {
destinationWidth = canvasWidth;
destinationHeight = destinationWidth / sourceRatio;
destinationX = 0;
destinationY = (canvasHeight - destinationHeight) / 2;
} else if (sourceRatio < 1) {
if (canvasRatio > sourceRatio) {
destinationHeight = canvasHeight;
destinationWidth = destinationHeight * sourceRatio;
destinationX = (canvasWidth - destinationWidth) / 2;
destinationY = 0;
} else if (canvasRatio <= sourceRatio) {
destinationWidth = canvasWidth;
destinationHeight = destinationWidth / sourceRatio;
destinationX = 0;
destinationY = (canvasHeight - destinationHeight) / 2;
}
}
}
} else {
destinationWidth = 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);
}
要理解这个算法，需要考虑下面的图像：
在获取所有适当的参数后，需要将值传递给名为CanvasRenderingContext2D.drawImage()的JavaScript方法，该方法是Canvas 2D API的一部分，用于将图像绘制到画布上。
除了缩放算法，还应用了一个名为jquery.Jcrop.js的JQuery裁剪API。
已经将所有源代码上传到GitHub账户，以帮助其他程序员。现在将展示如何使用这个控件：
F-ImageUploader文件夹包含控件所需的所有文件：
在本文中，不会解释每一行代码。如果是ASP.NET和JavaScript开发者，可以根据在这里提供的提示和要点轻松理解源代码。
这里，Width和Height是所需的图像尺寸。图像将根据该比例进行裁剪。ButtonName是按钮上显示的文本。此外，可以通过CssClass属性传递CSS到该控件。
首先，看看控制器标记：
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Control_CMS_ImageResizeNCropp_CS.ascx.cs" Inherits="Control_CMS_ImageResizeNCropp_CS" %>
<div class="row">
<div class="col-xs-12">
<asp:Image ID="imgResultImage" runat="server" style="display:none;border: rgba(128, 128, 128, 0.33) dashed 1px;"/>
<asp:HiddenField ID="hdnResultImage" runat="server"/>
</div>
<div class="col-xs-12" style="margin-top:5px;">
<a href='/F-ImageUploader/CMS_ImageResizeNCropp_CS.aspx?controlID=<%= this.ID %>&width=<%= Width %>&height=<%= Height %>' class="imageUpload btn btn-primary fancybox.iframe <%= CssClass %>"><%= ButtonName %></a>
</div>
</div>