網站開發經常使用jQuery插件總結(14)圖片修剪插件Jcrop

時間 2019-12-08

標籤網站開發經常使用 jquery 插件總結圖片修剪 jcrop 欄目網站開發简体版

原文原文鏈接

1、插件功能

用於對圖片進行修剪。可是在使用Jcrop時，還須要配合服務器端開發語言（如asp.net,php等）使用。javascript

2、官方地址

http://deepliquid.com/content/Jcrop.html
在官方地址中有5個demo,在這5個demo中，有3個帶有代碼說明。有1個提供了完整的實例，前端(js)與後臺（php）交互，修剪圖片並顯示。而本次測試時，後臺使用的是asp.net來修剪圖片。在文章的下面有完整的測試代碼可供下載。
官方Demo也能夠下載，可是下載下來的文件包含js代碼不少，做者多是爲了演示jcrop的完整功能，因此包含了儘量多的代碼。其實咱們在使用時，應該只會涉及到很簡單的一部分。
測試效果截圖：

php

3、插件使用

1.引用文件css

<link href="css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.js"></script>

2.Css樣式文件。測試時使用插件的默認樣式，瞭解詳細的樣式定義能夠看jquery.Jcrop.css。html

3.Js代碼。在官方Event Handler Demo中，使用了兩個事件。分別爲onChange,onSelect。OnChange事件在選取修剪範圍時觸發，onSelect在選取完畢後觸發。本次測試只使用了onSelect事件。
若是須要動態顯示縮略圖，能夠看官方提供的Thumbnail Demo。並且在這個Demo中，也提供了一種思路，那就是如何修剪等比例縮放的圖片（按百分比尋找座標位置）。在使用Jcrop修剪圖片時，若是圖片按比例縮小了，那麼就須要按比例修改座標，座標爲x(鼠標按下時的x座標)，y(鼠標按下時的y座標)，w(寬度)，h(高度)，都要替換爲原圖的座標。但最簡單的方式仍是在上傳圖片的時候，就將圖片按比例壓縮，而後顯示上傳後的原圖。
而本次測試使用的js代碼主要分爲兩部分。
第一部分，修剪圖片時保存座標前端

$('#portrait').Jcrop({
   onSelect: storeCoords
});
function storeCoords(c) {
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
};

第二部分，以ajax的方式提交座標到後臺java

function toCrop() {
    var x = $('#x').val();
    var y = $('#y').val();
    var w = $('#w').val();
    var h = $('#h').val();
    if ($.trim(x) == "" || $.trim(y) == "" || $.trim(w) == "" || $.trim(h) == "") {
        console.log("數據不能爲空!");
        return;
    }
    var params="x="+x+"&y="+y+"&w="+w+"&h="+h;
    $.ajax({
        type: "POST",
        url: "crop.ashx",
        data: params,
        success: function (html) {
            console.log(html);
            //顯示返回的圖片路徑
            $("#result").html('<img src="' + html + '"/>');
        }
    });
}

4.html代碼。在html代碼中，須要有元素保存第3步中提到的座標，本次測試使用text保存座標。jquery

<img src="imgs/1.jpg"  id="portrait"/>
<br /><br />
<p id="result"></p>
<p><label for="x">x座標</label><input type="text" id="x" /></p>
<p><label for="y">y座標</label><input type="text" id="y" /></p>
<p><label for="w">寬度</label><input type="text" id="w" /></p>
<p><label for="h">高度</label><input type="text" id="h" /></p>
<p><input type="button" value="切割" id="btnCrop" /></p>

5.asp.net代碼。經過ajax將座標傳入後臺ashx文件，而後修剪原圖並保存修剪後的圖片，而後將修剪後的圖片路徑返回給前端，前端顯示。ajax

public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/plain";
    string img = context.Server.MapPath("~/imgs/1.jpg");
    int w = Convert.ToInt32(context.Request.Form["w"]);
    int h = Convert.ToInt32(context.Request.Form["h"]);
    int x = Convert.ToInt32(context.Request.Form["x"]);
    int y = Convert.ToInt32(context.Request.Form["y"]);
    byte[] CropImage = CropImg(img, w, h, x, y);
    using (MemoryStream ms = new MemoryStream(CropImage, 0, CropImage.Length))
    {
        ms.Write(CropImage, 0, CropImage.Length);
        using (SD.Image CroppedImage = SD.Image.FromStream(ms, true))
        {
            string saveTo = string.Format("imgs/crop/{0}.jpg", Guid.NewGuid().ToString().Replace("-",""));
            CroppedImage.Save(context.Server.MapPath(saveTo), CroppedImage.RawFormat);
            context.Response.Write(saveTo);
        }
    }
}
static byte[] CropImg(string img, int width, int height, int x, int y)
{
    try
    {
        using (SD.Image OriginalImage = SD.Image.FromFile(img))
        {
            using (SD.Bitmap bmp = new SD.Bitmap(width, height))
            {
                bmp.SetResolution(OriginalImage.HorizontalResolution, OriginalImage.VerticalResolution);
                using (SD.Graphics graphic = SD.Graphics.FromImage(bmp))
                {
                    graphic.SmoothingMode = SmoothingMode.AntiAlias;
                    graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
                    graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
                    graphic.DrawImage(OriginalImage, new SD.Rectangle(0, 0, width, height), x, y, width, height, SD.GraphicsUnit.Pixel);
                    MemoryStream ms = new MemoryStream();
                    bmp.Save(ms, OriginalImage.RawFormat);
                    return ms.GetBuffer();
                }
            }
        }
    }
    catch (Exception Ex)
    {
        throw (Ex);
    }
}