目录
总览
我们在图像大小调整和裁剪方面存在长期问题。我们的问题是，如果我们在服务器端调整大小，图像质量被破坏并且我们无法根据宽高比进行裁剪，因为上载的图像可以是任何大小和尺寸。对于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 the image does not fit into the required canvas
if (canvasRatio >= 1) {
//if the canvas is landscape
if (sourceRatio <= 1) {
//if the image is portrait
destinationHeight = canvasHeight;
destinationWidth = destinationHeight * sourceRatio;
destinationX = (canvasWidth - destinationWidth) / 2;
destinationY = 0;
}
else if (sourceRatio > 1) {
//if the image is landscape
if (canvasRatio < sourceRatio) {
//make the landscape image fit inside the required Canvas.
//In this case, ImageX is bigger than
//canvasWidth & ImageY is smaller than canvasHeight
destinationWidth = 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 canvasWidth
destinationHeight = canvasHeight;
destinationWidth = destinationHeight * sourceRatio;
destinationX = (canvasWidth - destinationWidth) / 2;
destinationY = 0;
}
}
}
else if (canvasRatio < 1) {
//if the canvas is portrait
if (sourceRatio >= 1) {
//if the image is landscape
destinationWidth = canvasWidth;
destinationHeight = destinationWidth / sourceRatio;
destinationX = 0;
destinationY = (canvasHeight - destinationHeight) / 2;
}
else if (sourceRatio < 1) {
//if the image is portrait
if (canvasRatio > sourceRatio) {
//make the portrait image fit inside the required Canvas.
//In this case, ImageY is bigger than
//canvasHeight & ImageX is small than canvasWidth
destinationHeight = 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 canvasHeight
destinationWidth = canvasWidth;
destinationHeight = destinationWidth / sourceRatio;
destinationX = 0;
destinationY = (canvasHeight - destinationHeight) / 2;
}
}
}
}
else {
//image will directly fit inside the canvas
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);
}要了解该算法，您必须考虑下图：
得到所有适当的参数后，要将图像绘制到画布上，您必须将值传递给Canvas2D API中命名为CanvasRenderingContext2D.drawImage()的JavaScript方法。
除了调整器算法之外，我还应用了一个名为“jquery.Jcrop.js”的JQuery裁剪API 。
我已经在Github上上传了这个控件的所有源代码，以获得其他程序员的帮助。我现在显示控件的文件夹结构：
源代码结构
F-ImageUploader是包含了所有的控制所需的文件的文件夹。
- ImageResizeNCrop.js包含所有用于调整大小、裁剪和保存的JavaScript代码。
- 一个ASP.NET处理程序文件（HandlerImageUploader.ashx）用于通过Ajax保存该文件。
- CMS_ImageResizeNCropp_CS.aspx和CMS_ImageResizeNCropp_VB.aspx是控件的容器，它们将在fancybox iframe中打开。
- ASP.NET自定义控制器Control_CMS_ImageResizeNCropp_CS.ascx和Control_CMS_ImageResizeNCropp_VB.ascx用于通过从VS解决方案资源管理器中拖动来快速插入并播放控件。
- 图像将保存在/Admin/Content文件夹中。
在本文中，我将不解释每一个代码。如果您是ASP.NET和JavaScript开发人员，则可以从我在这里解释的提示和要点轻松地理解源代码。
如何在网页上使用控件？
在这里，Width和Height你需要的图像尺寸。图像将根据该比例进行裁剪。ButtonName是您需要在按钮上显示的文本。另外，您可以按CssClass属性将CSS传递给该控件。
如何从控件中获取上传的图像？
首先，看看控制器标记：
<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属性。
源代码
参考文献
- Javascript
drawImagehttps://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage - Jquery Cropper API: http://jcrop.com
