ASP.NET MVC4使用JCrop裁剪圖片並上傳的例子

JCrop是一款非常不錯的jquery圖片裁剪插件了,今天我們就來介紹使用JCrop結合asp.net來實現圖片裁剪的例子。

引用下載好的css和js文件

代碼如下
<link href="@Url.Content("~/Scripts/Jcrop/jquery.Jcrop.min.css")" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/Jcrop/jquery.Jcrop.min.js")" type="text/javascript"></script>

異步的話還需要引用jquery.form.js文件

代碼如下
<script src="@Url.Content("~/Scripts/jquery.form.js")" type="text/javascript"></script>

布局

代碼如下

<div role="tabpanel" class="tab-pane" id="div_headportrait">
@using (Ajax.BeginForm("EditUserHeadPortrait", "Account", null, new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data", id = "form_headportrait" }))
{
@Html.AntiForgeryToken()
@Html.HiddenFor(m => m.HeadPortraitData, new { id = "imgData" })
@Html.Hidden("imgX")
@Html.Hidden("imgY")
@Html.Hidden("imgW")
@Html.Hidden("imgH")
<div class="form-horizontal">
<div class="form-group">
<div class="col-lg-3">當前頭像</div>
<div class="col-lg-5">
<div>設置新頭像</div>
<div>支持jpg、jpeg、gif、png或者bmp格式,可以在大照片中裁剪滿意的部分。</div>
<div id="btnBrowserPic">選 擇</div> <!--這裏使用的是百度webuploader插件-->
</div>
<div class="col-lg-3">預覽頭像</div>
</div>
<div class="form-group">
<div class="col-lg-3">
<img alt="當前頭像" id="imgCurrent" style="width: 100px; height: 100px;" @(string.IsNullOrEmpty(Model.HeadPortraitUrl) ? "" : "src=data:image/bmp;base64," + Model.HeadPortraitData + "") />
</div>
<div class="col-lg-5 div-origin" style="height:300px;height:300px;">
<img id="imgOrigin" style="max-width:300px;max-height:300px;" />
</div>
<div class="col-lg-3">
<div style="width:100px;height:100px;overflow:hidden;margin-left:5px;">
<img id="imgCropped" style="max-width:300px;max-height:300px;" />
</div>
</div>
</div>
<div class="form-group text-center">
<input type="button" value="保 存" id="btn_save" class="btn btn-primary" />
</div>
</div>
}
</div>

js代碼

代碼如下

var uploader = new WebUploader.Uploader({
swf: [email protected]("~/Scripts/webuploader-0.1.5/Uploader.swf")',
server: [email protected]("UploadImage", "FileUpload")',
fileVal: 'imgFile',
formData: { resizeWidth: 300, resizeHeight: 300 },
pick: '#btnBrowserPic', // 選擇圖片按鈕
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/.gif,.jpg,.jpeg,.bmp,.png'
},
auto: true, // 自動上傳
multiple: false, // 不允許多個文件同時上傳
fileNumLimit: 1 // 當前隊列數
});
//開始上傳
uploader.on("uploadStart", function () {

});
//上傳成功
uploader.on('uploadSuccess', function (file, response) {
  //根據自己返回的結果具體操作
  if (response.Status) {
$(".div-origin").html('<img id="imgOrigin" style="max-width:300px;max-height:300px;" />');
var base64Data = "data:image/bmp;base64," + response.Data;
      // 配置 jcrop
$("#imgOrigin").attr("src", base64Data).Jcrop({
onChange: setCoordsAndImgSize,
onSelect: setCoordsAndImgSize,
aspectRatio: 1,
setSelect: [50, 50, 150, 150]
});
$("#imgCropped").attr("src", base64Data).css({ width: $(".jcrop-holder").width() + "px", height: $(".jcrop-holder").height() + "px" });
$("#imgData").val(response.Data);
}
});
// 上傳失敗
uploader.on("uploadError", function (file) {
alert("圖片未載入成功!");
});
// 錯誤
uploader.on("error", function () {
  alert("一次只能上傳一張圖片(不是有效的圖片文件)!");
});
// 上傳完成
uploader.on("uploadComplete", function () {
uploader.reset(); // 重置當前隊列
});
$("#btn_save").on("click", function () {
  $form_headportrait.submit();
});
$form_headportrait.ajaxForm({
  dataType: 'json',
  success: function (data) {
    // 成功後,執行其他操作
  }
});
// 紀錄裁剪的位置
function setCoordsAndImgSize(e) {
var imgX = e.x, imgY = e.y, imgW = e.w, imgH = e.h;
$("#imgX").val(imgX);
$("#imgY").val(imgY);
$("#imgW").val(imgW);
$("#imgH").val(imgH);
if (parseInt(e.w) > 0) {
var rx = 100 / imgW;
var ry = 100 / imgH;
$('#imgCropped').css({
width: Math.round(rx * $(".jcrop-holder").width()) + 'px',
height: Math.round(ry * $(".jcrop-holder").height()) + 'px',
marginLeft: '-' + Math.round(rx * imgX) + 'px',
marginTop: '-' + Math.round(ry * imgY) + 'px'
}).show();
}
}


FileUpload控制器

代碼如下

public class FileUploadController : Controller
{
// GET: FileUpload
[HttpPost]
public ActionResult UploadImage(HttpPostedFileBase imgFile, int? resizeWidth, int? resizeHeight)
{
JsonObject jsonObj = new JsonObject();
if (imgFile != null && imgFile.ContentLength != 0)
{
try
{
jsonObj.Data = ImageHelper.ResizeImage(imgFile.InputStream, resizeWidth.Value, resizeHeight.Value);
jsonObj.Status = true;
jsonObj.Message = "successful";
}
catch (Exception)
{
jsonObj.Message = "fail";
}
}
return Json(jsonObj, JsonRequestBehavior.AllowGet);
}
}


圖片處理類

代碼如下

/// <summary>
/// 圖片處理
/// </summary>
public static class ImageHelper
{
public static string CropImage(byte[] content, int x, int y, int cropWidth, int cropHeight)
{
using (MemoryStream stream = new MemoryStream(content))
{
return CropImage(stream, x, y, cropWidth, cropHeight);
}
}
public static string CropImage(Stream content, int x, int y, int cropWidth, int cropHeight)
{
using (Bitmap sourceBitmap = new Bitmap(content))
{
// 將選擇好的圖片縮放
Bitmap bitSource = new Bitmap(sourceBitmap, sourceBitmap.Width, sourceBitmap.Height);
Rectangle cropRect = new Rectangle(x, y, cropWidth, cropHeight);
using (Bitmap newBitMap = new Bitmap(cropWidth, cropHeight))
{
newBitMap.SetResolution(sourceBitmap.HorizontalResolution, sourceBitmap.VerticalResolution);
using (Graphics g = Graphics.FromImage(newBitMap))
{
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
g.SmoothingMode = SmoothingMode.HighQuality;
g.PixelOffsetMode = PixelOffsetMode.HighQuality;
g.CompositingQuality = CompositingQuality.HighQuality;
g.DrawImage(bitSource, new Rectangle(0, 0, newBitMap.Width, newBitMap.Height), cropRect, GraphicsUnit.Pixel);
return GetBitmapBytes(newBitMap);
}
}
}
}
public static string GetBitmapBytes(Bitmap source)
{
ImageCodecInfo codec = ImageCodecInfo.GetImageEncoders()[4];
EncoderParameters parameters = new EncoderParameters(1);
parameters.Param[0] = new EncoderParameter(Encoder.Quality, 100L);
using (MemoryStream tmpStream = new MemoryStream())
{
source.Save(tmpStream, codec, parameters);
byte[] data = new byte[tmpStream.Length];
tmpStream.Seek(0, SeekOrigin.Begin);
tmpStream.Read(data, 0, (int)tmpStream.Length);
string result = Convert.ToBase64String(data);
return result;
}
}
/// <summary>
/// 圖片轉換Base64
/// </summary>
/// <param name="urlOrPath">圖片網路地址或本地路徑</param>
/// <returns></returns>
public static string ImageToBase64(string urlOrPath)
{
try
{
if (urlOrPath.Contains("http"))
{
Uri url = new Uri(urlOrPath);
using (var webClient = new WebClient())
{
var imgData = webClient.DownloadData(url);
using (var ms = new MemoryStream(imgData))
{
byte[] data = new byte[ms.Length];
ms.Seek(0, SeekOrigin.Begin);
ms.Read(data, 0, Convert.ToInt32(ms.Length));
string netImage = Convert.ToBase64String(data);
return netImage;
}
}
}
else
{
FileStream fileStream = new FileStream(urlOrPath, FileMode.Open);
Stream stream = fileStream as Stream;
byte[] data = new byte[stream.Length];
stream.Seek(0, SeekOrigin.Begin);
stream.Read(data, 0, Convert.ToInt32(stream.Length));
string netImage = Convert.ToBase64String(data);
return netImage;
}
}
catch (Exception)
{
return null;
}

}
/// <summary>
/// 按比例縮放圖片
/// </summary>
/// <param name="content"></param>
/// <param name="resizeWidth"></param>
/// <returns></returns>
public static string ResizeImage(Stream content, int resizeWidth, int resizeHeight)
{
using (Bitmap sourceBitmap = new Bitmap(content))
{
int width = sourceBitmap.Width,
height = sourceBitmap.Height;
if (height > resizeHeight || width > resizeWidth)
{
if ((width * resizeHeight) > (height * resizeWidth))
{
resizeHeight = (resizeWidth * height) / width;
}
else
{
resizeWidth = (width * resizeHeight) / height;
}
}
else
{
resizeWidth = width;
resizeHeight = height;
}
// 將選擇好的圖片縮放
Bitmap bitSource = new Bitmap(sourceBitmap, resizeWidth, resizeHeight);
bitSource.SetResolution(sourceBitmap.HorizontalResolution, sourceBitmap.VerticalResolution);
using (MemoryStream stream = new MemoryStream())
{
bitSource.Save(stream, ImageFormat.Jpeg);
byte[] data = new byte[stream.Length];
stream.Seek(0, SeekOrigin.Begin);
stream.Read(data, 0, Convert.ToInt32(stream.Length));
string newImage = Convert.ToBase64String(data);
return newImage;
}
}
}
}


效果圖

ASP.NET MVC4使用JCrop裁剪圖片並上傳的例子

更多相關文章
  • index.asp教程 上傳演示img_class.asp 獲取圖片的高度和寬度的類oupload.asp 上傳處理conn.asp 這個就不用我來說了.連接數據庫教程的.upload_class.asp采用艾恩無組
  • PHP swfupload圖片文件上傳實例代碼
    swfupload是一個flash插件它可以結合php來快速實現圖片文件無刷新上傳,同時還
  • jQuery SWFUpload與COS實現圖片批量上傳
    下文給我們介紹了一下基于jQuery SWFUpload配合COS來實現圖片批量上傳插件了,下面一起來看看,希望例子能幫助到各位同學哦.此文是jQuery + SWFUpload + COS的上傳插件源代碼,使用了jquery1.4.SWFUpload2.2和COS來制作jquery上傳插件.1.引 ...
  • UEditor編輯器爲百度公司出的一款功能強大的網頁線上編輯器了,這款編輯器在許多功能上是需要簡單的配置一下,下文我們來給各位介紹在Nodejs環境配置UEditor文件圖片上傳功能的操作方法,希望這個例子能夠爲大家
  • Dedecms圖集批量上傳提示報錯 302
    很久沒用dedecms系統了今天有同事要做個圖片網站于時就幫它利用dedecms的圖集功能來實現,結果發現配置好之後批量上傳照片時提示302錯誤了,如下圖.錯誤提醒後來在百度搜索了一下原理是版本的問題我們需要加以判斷即可解決.解決辦法在include/userlogin.class.php文件中的第
  • asp 無刷新上傳帶預覽程序代碼
    圖片上傳之前一般都有一個預覽效果了,如果我們沒有預覽效果不知道圖片上傳成功之後會怎麽樣,下
  • js 百度UEditor圖片上傳配置及默認使用遠程url地址
    文章爲各位介紹一下js 百度UEditor圖片上傳配置及默認使用遠程url地址例子,希望文
  • 本文章介紹了在java+ckeditor編輯器中實現圖片文件上傳並且一些問題解決辦法.html代碼 代碼如下 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnco ...
一周排行