我开发了以下视图:
<p><a href="#" id="hl-crop-image">Crop Image</a></p>
<p>
//First Image
<img id="my-origin-image" src="#"/>
//Second Image
<img id="my-origin-image" src="#" />
</p>
<p>
<input type='file' accept="image/*" name="image" id="imgUpload" />
</p>
<p>
<img id="my-cropped-image" src="#" style="display:none;" />
</p>
现在我想从客户端机器浏览图像并在第一个图像控件中显示图像(“id =”my-origin-image“”)。然后我想裁剪图像然后如果我点击链接裁剪图像(id =“hl-crop-image”),那么图像字节和它的坐标将被发送到mvc控制器上传。这是我用jquery ajax函数完成的。代码如下:
function cropImage() {
if (imageCropWidth === 0 && imageCropHeight === 0) {
alert("Please select crop area.");
return;
}
$.ajax({
url: '/Image/CropImage',
type: 'POST',
dataType: 'json',
data: {
imagePath: $("#my-origin-image").attr("src").replace(/^data:image\/(png|jpeg);base64,/, ""),
cropPointX: cropPointX,
cropPointY: cropPointY,
imageCropWidth: imageCropWidth,
imageCropHeight: imageCropHeight
},
success: function (data) {
$("#my-cropped-image")
.attr("src", data.photoPath + "?t=" + new Date().getTime())
.show();
},
error: function (data) { }
});
}
控制器功能
//byte[] imageBytes = System.Text.Encoding.UTF8.GetBytes(imagePath);
//byte[] imageBytes = Convert.FromBase64String(imagePath);
byte[] imageBytes = System.Convert.FromBase64String(HttpContext.Request["imagePath"]);
byte[] croppedImage = ImageHelper.CropImage(imageBytes, cropPointX.Value, cropPointY.Value, imageCropWidth.Value, imageCropHeight.Value);
string tempFolderName = Server.MapPath("~/" + ConfigurationManager.AppSettings["Image.TempFolderName"]);
string fileName = Path.GetFileName(imagePath);
try
{
FileHelper.SaveFile(croppedImage, Path.Combine(tempFolderName, fileName));
}
catch (Exception ex)
{
//Log an error
return new HttpStatusCodeResult((int)HttpStatusCode.InternalServerError);
throw ex;
}
string photoPath = string.Concat("/", ConfigurationManager.AppSettings["Image.TempFolderName"], "/", fileName);
return Json(new { photoPath = photoPath }, JsonRequestBehavior.AllowGet);
问题控制器无法正确获取图像字节并将文件上传到服务器中。任何人都可以让我知道问题出在哪里。