使用Cropper.js与ASP.NET裁剪图片时获取错误区域的问题

这个问题我之前也踩过坑，核心原因是你忽略了Cropper.js返回的坐标是相对页面显示的图片尺寸，而非原图的真实像素尺寸，再加上几个细节处理不到位，导致裁剪区域总是跑偏。下面分点给你拆解解决方案：

1. 关键：坐标的比例换算 #

Cropper.js 计算的left/top/width/height是基于页面上显示的图片容器尺寸，而不是原图的真实像素尺寸。比如原图是2000x2000，但你页面上显示的是400x400的缩略图，那Cropper返回的150px宽度对应的原图实际宽度是750px。

你需要先拿到两个关键尺寸：

• 原图的真实尺寸：originalWidth = source.Width，originalHeight = source.Height
• Cropper.js所在页面中，图片的显示尺寸（可以通过前端JS获取，比如cropper.getImageData().width和.height）

然后计算比例系数并换算坐标：

Dim scaleX As Double = source.Width / displayImageWidth
Dim scaleY As Double = source.Height / displayImageHeight

Dim realX As Integer = Math.Round(cropperLeft * scaleX)
Dim realY As Integer = Math.Round(cropperTop * scaleY)
Dim realWidth As Integer = Math.Round(cropperWidth * scaleX)
Dim realHeight As Integer = Math.Round(cropperHeight * scaleY)

2. 修复Graphics的单位设置 #

你的原代码没有指定Graphics的单位，默认可能受图片DPI影响导致缩放。在创建Graphics后，加上这行确保按像素处理：

gr.PageUnit = GraphicsUnit.Pixel

3. 处理浮点数截断问题 #

Cropper返回的top:50.5直接转Integer会被截断成50，导致垂直方向偏移，用Math.Round四舍五入更准确。

修正后的完整代码 #

Public Shared Function CropImage(ByVal source As Image, ByVal cropperLeft As Double, ByVal cropperTop As Double, ByVal cropperWidth As Double, ByVal cropperHeight As Double, ByVal displayImageWidth As Integer, ByVal displayImageHeight As Integer) As Bitmap
    ' 换算到原图真实坐标
    Dim scaleX As Double = source.Width / displayImageWidth
    Dim scaleY As Double = source.Height / displayImageHeight
    
    Dim realX As Integer = Math.Round(cropperLeft * scaleX)
    Dim realY As Integer = Math.Round(cropperTop * scaleY)
    Dim realWidth As Integer = Math.Round(cropperWidth * scaleX)
    Dim realHeight As Integer = Math.Round(cropperHeight * scaleY)
    
    ' 确保裁剪区域不超出原图范围
    realX = Math.Max(0, realX)
    realY = Math.Max(0, realY)
    realWidth = Math.Min(realWidth, source.Width - realX)
    realHeight = Math.Min(realHeight, source.Height - realY)
    
    Dim crop As Rectangle = New Rectangle(realX, realY, realWidth, realHeight)
    Dim bmp = New Bitmap(crop.Width, crop.Height)
    
    Using gr = Graphics.FromImage(bmp)
        gr.PageUnit = GraphicsUnit.Pixel ' 确保按像素单位处理
        gr.DrawImage(source, New Rectangle(0, 0, bmp.Width, bmp.Height), crop, GraphicsUnit.Pixel)
    End Using
    
    Return bmp
End Function

额外注意事项 #

• 前端传递参数时，要把页面上图片的displayImageWidth和displayImageHeight一起传到后端，不然没法换算比例。
• 如果你的Cropper容器和图片是等比缩放的，scaleX和scaleY应该相等，不过保险起见还是分开计算。

内容的提问来源于stack exchange，提问作者Dylan