Croppic插件使用介绍-asp.net
具体的参数使用和基本使用方式请看:http://www.uedsc.com/croppic-api.html
需要说明的几点:
1.支持两种上传方式:
(1)先将原图上传至服务器,然后再次将切图信息传给服务器。(两次请求,需要提供uploadUrl
和cropUrl
两个)
(2)直接将图片通过Data URI scheme的方式将图片缓存在浏览器内,用户切图完毕后同切图信息一并发送至服务器。(一次请求,只需要提供cropUrl
)
2.如果需要自定义切图的模板大小,需要修改croppic.js文件,修改如下:
然后在你程序使用的页面内灵活给这两个参数赋值就可以了。
3.后台程序处理的代码共享(注:使用了第二种,一次性上传的方式)
前台:
<div id="croppic"></div>
<script type="text/javascript">
@{
if (brand.Type==0)
{
<text>
var my_cropH = 203;
var my_cropW = 282;
</text>
}else {
<text>
var my_cropH = 300;
var my_cropW = 224;
</text>
}
}
var croppicHeaderOptions = {
cropData: {
"Id": '@brand.Id'
},
cropUrl: '/Brand/CutImg',
//customUploadButtonId: 'cropContainerHeaderButton',
modal: false,
processInline: true,
loaderHtml: '<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
onBeforeImgUpload: function () { console.log('onBeforeImgUpload') },
onAfterImgUpload: function () { console.log('onAfterImgUpload') },
onImgDrag: function () { console.log('onImgDrag') },
onImgZoom: function () { console.log('onImgZoom') },
onBeforeImgCrop: function () { console.log('onBeforeImgCrop') },
onAfterImgCrop: function () { console.log('onAfterImgCrop') },
onReset: function () { console.log('onReset') },
onError: function (errormessage) { console.log('onError:' + errormessage) }
}
var croppic = new Croppic('croppic', croppicHeaderOptions);
</script>
后台:
public ActionResult CutImg(int? imgInitW, int? imgInitH, decimal? imgW, decimal? imgH, int? imgY1, int? imgX1, decimal? cropH, decimal? cropW, int? rotation)
{
//保存图片
var displayImageStream = Request["imgUrl"] == null ? null : Request["imgUrl"];
byte[] imgByte = Convert.FromBase64String(displayImageStream.Substring(displayImageStream.IndexOf(",") + 1));
Image oldImage;
using (MemoryStream mstream = new MemoryStream(imgByte, 0, imgByte.Length))
{
oldImage = Image.FromStream(mstream);
if (!oldImage.RawFormat.Equals(System.Drawing.Imaging.ImageFormat.Jpeg))
{
return Json(new { status = "error", message = "切图出现问题" });
}
}
//构建新的图片
var croppedBitmap = new Bitmap((int)cropW, (int)cropH);
try
{
using (var g = Graphics.FromImage(croppedBitmap))
{
Bitmap bitmap = new Bitmap(oldImage, (int)imgW, (int)imgH);
g.DrawImage(bitmap,
new Rectangle(0, 0, (int)cropW, (int)cropH),
new Rectangle((int)imgX1, (int)imgY1, (int)cropW, (int)cropH), GraphicsUnit.Pixel);
}
}
catch (Exception e)
{
return Json(new { status = "error", message = "internal error cropping the image" });
}
string relativePic = DateTime.Now.ToString("yyyy/MM/dd/") + Guid.NewGuid().ToString() + ".jpg";
string strNewPic = AppDomain.CurrentDomain.BaseDirectory + relativePic;
if (!Directory.Exists(Path.GetDirectoryName(strNewPic)))
Directory.CreateDirectory(Path.GetDirectoryName(strNewPic));
croppedBitmap.Save(strNewPic);
return Json(new { status = "success", url = "../../" + relativePic });
}
学习:https://codeload.github.com/danielbcorreia/croppic-net/zip/master 从这个链接学习了部分代码,感谢。