js插件Jcrop自定義截取圖片功能
當(dāng)初說(shuō)這個(gè)需求的時(shí)候,在網(wǎng)上找了一點(diǎn)資料,但是基本上感覺(jué)不符合項(xiàng)目中的需求。參照一些項(xiàng)目,和同事的改造,終于是像點(diǎn)樣子了。
截圖大致截為3個(gè)像素,每個(gè)像素使用的地方也不同,考慮圖片不會(huì)是很多,分別壓縮保存下來(lái)。
根據(jù)截取的像素位置,對(duì)應(yīng)的壓縮成相應(yīng)的圖片:
首先需要下載Jcrop.js與uploadify.js 上傳圖片的插件和截圖的插件
Comm_UploadJcrop.js
//剪裁頭像對(duì)象和寬高比例
var jcrop_api, boundx, boundy;
//上傳圖片
//Id:上傳控件Id
//IsShowProgress:是否需要展示進(jìn)度條
//SuccessFunc: 上傳成功執(zhí)行的方法
function UploadImg(Id, IsShowProgress, SuccessFunc,IsJcrop) {
var uploadObj = $("#" + Id);
var htmlstr = "<div class='upload_ShowFileProgress' id='" + Id + "-queue' " + (IsShowProgress ? "" : "style='display:none;'") + "></div>";
uploadObj.parent().append(htmlstr);
var img_UploadUrl = IsJcrop ? "/Upload/UploadifyHeader" : "/Upload/UploadifyImg"; //Upload控制器中方法
uploadObj.uploadify({
//指定swf文件
'swf': '/Scripts/uploadify/uploadify.swf',//下載uploadify插件中的uploadify.swf
//后臺(tái)處理的頁(yè)面
'uploader': img_UploadUrl,
//進(jìn)度條id
'queueID': Id + "-queue",
//進(jìn)度條顯示完成后是否自動(dòng)消失
'removeCompleted': false,
//按鈕相關(guān)
'buttonClass': 'btn_Upload',
'buttonText': '請(qǐng)選擇圖片',
'height': '31',
'width': '108',
//在瀏覽窗口底部的文件類型下拉菜單中顯示的文本
'fileTypeDesc': 'Image Files',
//允許上傳的文件后綴
'fileTypeExts': '*.gif; *.jpg; *.png; *.bmp; *.jpeg; *.svg',
//選擇文件后自動(dòng)上傳
'auto': true,
//設(shè)置為true將允許多文件上傳
'multi': false,
'onUploadSuccess': function (file, data, response) {
if (SuccessFunc != undefined && SuccessFunc != null && SuccessFunc.length > 0) {
eval(SuccessFunc + "(file,data,response)");
}
}
});
}
//上傳文件
//Id:上傳控件Id
//IsShowProgress:是否需要展示進(jìn)度條
//SuccessFunc: 上傳成功執(zhí)行的方法
function UploadFile(Id, IsShowProgress, SuccessFunc) {
var uploadObj = $("#" + Id);
var htmlstr = "<div class='upload_ShowFileProgress' id='" + Id + "-queue' " + (IsShowProgress ? "" : "style='display:none;'") + "></div>";
uploadObj.parent().append(htmlstr);
uploadObj.uploadify({
//指定swf文件
'swf': '/Scripts/uploadify/uploadify.swf',
//后臺(tái)處理的頁(yè)面
'uploader': '/Upload/Uploadify',
//進(jìn)度條id
'queueID': Id + "-queue",
//進(jìn)度條顯示完成后是否自動(dòng)消失
'removeCompleted': false,
//按鈕相關(guān)
'buttonClass': 'btn_Upload',
'buttonText': '請(qǐng)選擇文件',
'height': '31',
'width': '108',
//上傳文件的類型 默認(rèn)為所有文件
'All Files': '*.*',
//在瀏覽窗口底部的文件類型下拉菜單中顯示的文本
//'fileTypeDesc': 'Image Files',
//允許上傳的文件后綴
'fileTypeExts': '*.*',
//選擇文件后自動(dòng)上傳
'auto': false,
//設(shè)置為true將允許多文件上傳
'multi': true,
'onUploadSuccess': function (file, data, response) {
if (SuccessFunc != undefined && SuccessFunc != null && SuccessFunc.length > 0) {
eval(SuccessFunc + "(file,data,response)");
}
}
});
}
//設(shè)定圖片
function SetJcropImage(url) {
$(".div_NoFileTip").hide();
$(".UploadImgContainer").show();
$("#preview_large").attr("src", url);
$("#preview_large2").attr("src", url);
$("#preview_large3").attr("src", url);
$("#imgsrc").val(url);
ErealizeJcrop(url);
}
//剪切圖片
function ErealizeJcrop(url) {
var $pcnt = $('#preview_large2').parent(),
xsize = $pcnt.width(),
ysize = $pcnt.height();
$('#preview_large').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
onSelect: updateCoords,
aspectRatio: xsize / ysize
}, function () {
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
jcrop_api = this;
// $preview.appendTo(jcrop_api.ui.holder);
});
//更換圖片時(shí)重新加載圖片
if (jcrop_api != undefined)
jcrop_api.setImage(url);
function updateCoords(c) {
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function updatePreview(c) {
if (parseInt(c.w) > 0) {
var rx = xsize / c.w;
var ry = ysize / c.h;
$("#preview_large2").css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
$pcnt = $('#preview_large3').parent(),
xsize2 = $pcnt.height();
ysize2 = $pcnt.height();
var rx2 = xsize2 / c.w;
var ry2 = ysize2 / c.h;
$("#preview_large3").css({
width: Math.round(rx2 * boundx) + 'px',
height: Math.round(ry2 * boundy) + 'px',
marginLeft: '-' + Math.round(rx2 * c.x) + 'px',
marginTop: '-' + Math.round(ry2 * c.y) + 'px'
});
}
};
后臺(tái)代碼:
#region 判斷文件夾是否存在,不存在則創(chuàng)建,返回文件夾路徑
private void CheckFileExistsCreateNew(string filepath)
{
if (!Directory.Exists(Server.MapPath(filepath)))
{
Directory.CreateDirectory(Server.MapPath(filepath));//創(chuàng)建文件夾
}
}
#endregion
#region 上傳圖片
//上傳頭像
[HttpPost]
public JsonResult UploadifyHeader(HttpPostedFileBase fileData)
{
if (fileData != null)
{
try
{
// 文件上傳后的保存路徑
string fileName = Path.GetFileName(fileData.FileName);// 原始文件名稱
string fileExtension = Path.GetExtension(fileName); // 文件擴(kuò)展名
string saveName =DateTime.Now.ToString("yyyyMMddHHmmssffff")+"_Y" + fileExtension; // 保存文件名稱
string Url = "/Upload/" + CurrentUserInfo.Sys_RentCompany.CompanyKey + "/" + CurrentUserInfo.Comm_User.Id + "/UploadImg"; //在項(xiàng)目中創(chuàng)建一個(gè)Upload文件夾存放上傳和截取的圖片 CurrentUserInfo.Sys_RentCompany.CompanyKey 為session 保存的值 這里對(duì)應(yīng)的文件夾的路徑 自己可以定義
string ShowUrl = Url + "/" + saveName;
string filePhysicalPath = Server.MapPath(ShowUrl);
//當(dāng)前登陸人文件夾
CheckFileExistsCreateNew(Url);
fileData.SaveAs(filePhysicalPath);
//壓縮圖片
string YsFileImg = ImgHandler.YsImg(ShowUrl, filePhysicalPath);
return Json(YsFileImg);
}
catch (Exception ex)
{
return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);
}
}
else
{
return Json(new { Success = false, Message = "請(qǐng)選擇要上傳的文件!" }, JsonRequestBehavior.AllowGet);
}
}
//上傳頭像
[HttpPost]
public JsonResult UploadifyImg(HttpPostedFileBase fileData)
{
if (fileData != null)
{
try
{
// 文件上傳后的保存路徑
string fileName = Path.GetFileName(fileData.FileName);// 原始文件名稱
string fileExtension = Path.GetExtension(fileName); // 文件擴(kuò)展名
string saveName = DateTime.Now.ToString("yyyyMMddHHmmssffff") + "_Y" + fileExtension; // 保存文件名稱
//string filed = "/Upload/" + saveName;//路經(jīng)
string Url = "/Upload/" + CurrentUserInfo.Sys_RentCompany.CompanyKey + "/" + CurrentUserInfo.Comm_User.Id + "/UploadImg";
string ShowUrl = Url + "/" + saveName;
string filePhysicalPath = Server.MapPath(ShowUrl);
//當(dāng)前登陸人文件夾
CheckFileExistsCreateNew(Url);
fileData.SaveAs(filePhysicalPath);
return Json(ShowUrl);
}
catch (Exception ex)
{
return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);
}
}
else
{
return Json(new { Success = false, Message = "請(qǐng)選擇要上傳的文件!" }, JsonRequestBehavior.AllowGet);
}
}
//保存剪切的圖片
[HttpPost]
public JsonResult JcropImg(FormCollection colls)
{
JsonFormatResult result = new JsonFormatResult { IsSuccess = true, Message = "保存成功!" };
try
{
int x = int.Parse(colls["x"]);
int y = int.Parse(colls["y"]);
int w = int.Parse(colls["w"]);
int h = int.Parse(colls["h"]);
string imgsrc = colls["imgsrc"];
string Path = ImgHandler.CutAvatar(imgsrc, x, y, w, h);
result.Data = Path;
}
catch (Exception e)
{
result.IsSuccess = false;
result.Message = e.Message;
}
return Json(result);
}
#endregion
照搬的代碼肯定會(huì)有缺陷,可以根據(jù)需求修改成適合的項(xiàng)目。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崿F(xiàn)隨機(jī)驗(yàn)證碼功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)隨機(jī)驗(yàn)證碼功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12
通過(guò)javascript獲取iframe里的值示例代碼
iframe里的值在實(shí)現(xiàn)一些比較特殊功能時(shí)需要獲取的,下面為大家詳細(xì)介紹下使用javascript獲取iframe里值的方法,感興趣的各位可以參考下哈2013-06-06
如何在面試中手寫出javascript節(jié)流和防抖函數(shù)
這篇文章主要介紹了如何在面試中手寫出javascript節(jié)流和防抖函數(shù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
JS實(shí)現(xiàn)單個(gè)或多個(gè)文件批量下載的方法詳解
在前端Web開(kāi)發(fā)中,下載文件是一個(gè)很常見(jiàn)的需求。這篇文章就來(lái)和大家介紹下幾種download解決方案,以及特殊Case的最佳方案選擇,希望對(duì)大家有所幫助2023-02-02
JavaScript DOM節(jié)點(diǎn)操作實(shí)例小結(jié)(新建,刪除HTML元素)
這篇文章主要介紹了JavaScript DOM節(jié)點(diǎn)操作,結(jié)合實(shí)例形式總結(jié)分析了JS操作DOM實(shí)現(xiàn)新建與刪除HTML元素的具體步驟與相關(guān)技巧,需要的朋友可以參考下2017-01-01
微信小程序?qū)崿F(xiàn)tab頁(yè)面切換效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)tab頁(yè)面切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08
javascript貪吃蛇游戲設(shè)計(jì)與實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了javascript貪吃蛇游戲設(shè)計(jì)與實(shí)現(xiàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09
JavaScript 進(jìn)度條實(shí)現(xiàn)代碼(Firefox等相似瀏覽器下不支持)
JavaScript實(shí)現(xiàn)的進(jìn)度條,可惜在Firefox等相似瀏覽器下不支持(遠(yuǎn)程)2009-07-07
如何基于uni-app實(shí)現(xiàn)微信小程序一鍵登錄與退出登錄功能
uni-app 是使用vue的語(yǔ)法+小程序的標(biāo)簽和API的一套框架,是一套代碼多端使用,目前是大前端的一種趨勢(shì),下面這篇文章主要給大家介紹了關(guān)于如何基于uni-app實(shí)現(xiàn)微信小程序一鍵登錄與退出登錄功能的相關(guān)資料,需要的朋友可以參考下2022-09-09

