jquery怎么打開本地圖片預(yù)覽，點(diǎn)擊確定后上傳

1, tapmodo / Jcrop

創(chuàng)新互聯(lián)主營鹽池網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app軟件開發(fā)公司,鹽池h5微信小程序搭建,鹽池網(wǎng)站營銷推廣歡迎鹽池等地區(qū)企業(yè)咨詢

Jcrop是人氣最高的圖片裁剪jQuery插件，stars數(shù)量2k+，功能非常豐富，文檔齊全，首選。Github.com官網(wǎng)也使用了這個插件。有一個小細(xì)節(jié)是，邊框線的螞蟻線是動畫的，真的很用心。

2, fengyuanchen / cropper

Cropper也是一款圖片裁剪jQuery插件，stars數(shù)量1k+，是杭州的前端工程師Fengyuan Chen所寫的，功能也相當(dāng)豐富，裁剪時還可以對原圖進(jìn)行旋轉(zhuǎn)。

3, imgAreaSelect 也是比較經(jīng)典的圖片裁剪jQuery插件，我很久以前就在自己的項目中使用過，stars數(shù)量500+。

Jquery的Jcrop圖片裁剪插件，被裁剪的圖片改不了，重新給別的src顯示還是原來那張圖

之前專門寫的一個基于Jcrop圖片裁剪實現(xiàn)的插件文章，希望對你有幫助

怎么用js或者jquery實現(xiàn)本地裁剪

網(wǎng)上很多這樣的圖片裁剪插件，最好用最常用的是jcrop，這里是他的官網(wǎng)

當(dāng)然中文翻譯過來的文章也很多，樓主可以搜索下~

js或者jQuery在這里只能實現(xiàn)確立要裁剪的范圍，實際的裁剪是要交給后臺進(jìn)行的。

基本思路就是，設(shè)定一個半透明框，在要裁剪的圖片中進(jìn)行拖動和定位，然后把這個框的范圍（也就是四個角的坐標(biāo)送到后臺），后臺如PHP提供相關(guān)的圖片處理函數(shù)，對圖片進(jìn)行裁剪。

思路比較簡單，操作起來也不難。

希望對樓主有幫助~~

如何用jquery.imgareaselect保存剪切后的預(yù)覽圖像

你的思路應(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ū)的圖像。