实现
图片剪切上传并在
服务器端显示
图片，可以按照以下步骤进行：
1.在前端页面中，使用 JavaScript 插件实现
图片剪切功能，比如 popular 的插件 jCrop。
2.在 Asp.net MVC 中，建立一个控制器，用于处理
图片上传和
剪切。
3.在控制器中编写代码，接收前端页面中
上传的
图片，并将其保存在
服务器端。
4.使用 C# 的 System.Drawing 命名空间中的类，对保存在
服务器端的
图片进行
剪切处理，并保存
剪切后的
图片。
5.最后，通过 ViewBag 将
剪切后的
图片路径传递给前端视图，在前端页面中显示
剪切后的
图片。
以下是一个简单的示例代码：
前端页面代码：
```html
<div>
<img id="preview" src="#" alt="
选择图片" />
</div>
<div>
<input type="file" id="image" />
</div>
<div>
<button id="crop">
剪切并
上传</button>
</div>
```
JavaScript 代码：
```javascript
$(function () {
var jcrop_api;
$('#image').change(function () {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function (e) {
$('#preview').attr('src', e.target.result).Jcrop({
aspectRatio: 1,
boxWidth: 500,
boxHeight: 500,
setSelect: [0, 0, 100, 100],
onSelect: updateCoords,
onChange: updateCoords
}, function () {
jcrop_api = this;
});
}
reader.readAsDataURL(file);
});
function updateCoords(c) {
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
}
$('#crop').click(function () {
var x = $('#x').val();
var y = $('#y').val();
var w = $('#w').val();
var h = $('#h').val();
var image = $('#preview').attr('src');
$.ajax({
type: 'POST',
url: '/Image/CropAndUpload',
data: {
'x': x,
'y': y,
'w': w,
'h': h,
'image': image
},
success: function (data) {
$('#preview').attr('src', data);
},
error: function () {
alert('
剪切并
上传失败！');
}
});
});
});
```
控制器代码：
```csharp
public class ImageController : Controller
{
// GET: Image
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult CropAndUpload(string x, string y, string w, string h, string image)
{
// 将 base64 编码转为 byte[] 数组
byte[] bytes = Convert.FromBase64String(image.Split(',')[1]);
// 将 byte[] 数组转为
图片对象
System.Drawing.Image img = null;
using (MemoryStream ms = new MemoryStream(bytes))
{
img = System.Drawing.Image.FromStream(ms);
}
// 对
图片进行
剪切
int ix = Convert.ToInt32(x);
int iy = Convert.ToInt32(y);
int iw = Convert.ToInt32(w);
int ih = Convert.ToInt32(h);
Bitmap bmp = new Bitmap(iw, ih);
Graphics g = Graphics.FromImage(bmp);
g.DrawImage(img, new Rectangle(0, 0, iw, ih), new Rectangle(ix, iy, iw, ih), GraphicsUnit.Pixel);
// 保存
剪切后的
图片
string fileName = Guid.NewGuid().ToString() + ".jpg";
string filePath = Server.MapPath("~/Uploads/" + fileName);
bmp.Save(filePath, System.Drawing.Imaging.ImageFormat.Jpeg);
// 返回
剪切后的
图片路径
return Json("/Uploads/" + fileName);
}
}
```
上述代码中，使用了 jCrop 插件实现
图片剪切功能，使用了 System.Drawing 命名空间中的类对
图片进行
剪切处理，并将
剪切后的
图片保存在
服务器端的 Uploads 文件夹中。最后，将
剪切后的
图片路径以 JSON 格式返回给前端页面，并在前端页面中显示
剪切后的
图片。
扫一扫
1310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
