調(diào)用該方法參數(shù) (根據(jù)坐標(biāo)值裁剪原圖片,生成大小為1024*768c尺寸的圖片)
我們提供的服務(wù)有:成都網(wǎng)站建設(shè)、網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、魯山ssl等。為近1000家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的魯山網(wǎng)站制作公司
var cropObj = {"x":100,"y":68,"x2":767,"y2":568.25,"w":667,"h":500.25};
var width = 1024;
var height = 768;
clipImage(key,cropObj, width, height);
網(wǎng)上很多這樣的圖片裁剪插件,最好用最常用的是jcrop,這里是他的官網(wǎng)
當(dāng)然中文翻譯過來的文章也很多,樓主可以搜索下~
js或者jQuery在這里只能實現(xiàn)確立要裁剪的范圍,實際的裁剪是要交給后臺進(jìn)行的。
基本思路就是,設(shè)定一個半透明框,在要裁剪的圖片中進(jìn)行拖動和定位,然后把這個框的范圍(也就是四個角的坐標(biāo)送到后臺),后臺如PHP提供相關(guān)的圖片處理函數(shù),對圖片進(jìn)行裁剪。
思路比較簡單,操作起來也不難。
希望對樓主有幫助~~
不知道你所說的圖片是不是用戶上傳的
如果是的話我有寫了一個插件可以用
這個網(wǎng)址是測試用的
這個網(wǎng)址有使用方法
如果使用方法看不懂的可以直接私信我
順便說一句
這個插件支持手機網(wǎng)頁
之前專門寫的一個基于Jcrop圖片裁剪實現(xiàn)的插件文章,希望對你有幫助
你的思路應(yīng)該錯了,我給你梳理下吧:
用jquery.imgareaselect實際上主要是利用它幫你獲得預(yù)覽圖和剪裁數(shù)據(jù)。然后將數(shù)據(jù)發(fā)送后臺根據(jù)這些數(shù)據(jù)就可以從原始圖片中重新畫出你選擇部分的圖片信息了。
1,你異步上傳后將圖片訪問路徑設(shè)置到剪裁區(qū)img.src;
2,利用imgareaselect的回調(diào)函數(shù)拿到圖片引用img和選擇對象selection,從img拿到引用圖片width\height,selection拿到左上角的坐標(biāo)x1\y1,右下角的坐標(biāo)x2\y2,選擇區(qū)寬高width\height。
3,將2中拿到的數(shù)據(jù)發(fā)送到后臺,后臺根據(jù)這些數(shù)據(jù)和原始圖片信息畫出選擇區(qū)的圖像。