使用jcrop進行頭像剪下

2022-08-03 12:57:31 字數 1134 閱讀 8968

專案需要做乙個頭像擷取的功能,類似於qq頭像擷取功能。在網上搜了下,最後使用jquery外掛程式jcrop來擷取,

在後台來進行切割。

頭像擷取的原理:在前台使用jcrop獲取切面的x軸座標、y軸座標、切面高度、切面寬度,然後將這四個值傳給後

臺。在後台要進行放大處理:將切面放大n倍,n=原圖/前台展示的頭像。即x

= x*原圖寬/前圖寬,y = y*原圖高/前

圖高,w = w*原圖寬/前圖寬,h = h*原圖高/前圖高。

例項:jsp:

樣式:大圖、小圖展示都需要固定高度、寬度,因為後台需要進行放大處理。

即:jquery.jcrop.js

、jquery.js

使用方法:

//裁剪影象

function cutimage());

//簡單的事件處理程式,響應自onchange,onselect事件,按照上面的jcrop呼叫

function showcoords(obj) );}}}

在使用jcrop前一定要先將$(「」).jcrop();進行預初始化,否則沒有效果。

還有一種呼叫的方法,

var api = $.jcrop('#cropbox',);
這種方法是將jcrop生成的物件賦給乙個全域性變數,這樣操作就會比較方便。

通過上面的js,就將x軸座標、y軸座標、高度h、寬度w這個四個值傳遞給後台了,後台就只需要根據這四個值

進行放大處理,然後切割即可。

action

/**

* 裁剪頭像

*/public string cutimage()

}

public class imagecut 

} catch (ioexception e)

}}

效果圖:

點選確認後,就會在指定路徑下生成相應的:

使用jcrop進行頭像剪下

例項 jsp div id cutimage style display none div class bigimg style float left img id srcimg src width 400px height 270px div div id preview box class pr...

vue專案如何進行頭部元件的抽離復用

建立乙個頭部元件headertop,對於不同的頁面,頭部的中間內容title可能都不一樣,所以我們可以通過父子元件傳值的方式,通過props進行傳值。而對於頭部的左邊和右邊的內容,有的頁面可能會有,有的頁面可能不會有,可以通過插槽slot去解決,slot需要指明name的值,如下 class hea...

使用with進行回溯

with dept deptid,pdeptid as select udepid,uparentid from oa.dbo.depinfo where udepid in select p.udepid from oa.dbo.postinfo as p inner join oa.dbo.us...