這個應用的關鍵: 1.讓左邊選擇區域和右邊顯示的圖像信息保持一至。 2.根據左邊選擇區域的大小,來讓右邊有一個對局部放大或縮小的效果。 3.后台上傳功能。 那么這一次,只談[放大]或[縮小]。[位置]和[上傳]問題,下次,我再寫下(因為那個插件代碼太多,我也沒看完,正在 ...
上一節隨筆中,我們已經知道了關於jQuery插件ImgAreaSelect基本的知識 那么現在看一下實例: 首先,要知道我們應該實現什么功能 圖片能夠實現上傳預覽功能 拖拽裁剪圖片,使其能夠顯示裁剪后的區域 顯示要裁剪區域的坐標 其次,該如何引用該插件呢 那就具體看一下吧 第一步:先將樣式和文件包引入 根據你自己的位置引入 lt 引入imgareaselect的css樣式 gt lt link r ...
2017-05-20 22:21 6 3514 推薦指數:
這個應用的關鍵: 1.讓左邊選擇區域和右邊顯示的圖像信息保持一至。 2.根據左邊選擇區域的大小,來讓右邊有一個對局部放大或縮小的效果。 3.后台上傳功能。 那么這一次,只談[放大]或[縮小]。[位置]和[上傳]問題,下次,我再寫下(因為那個插件代碼太多,我也沒看完,正在 ...
插件介紹 這是一個我在寫以前的項目的途中發現的一個國人寫的jQuery圖像裁剪插件,當時想實現用戶資料的頭像上傳功能,並且能夠預覽圖片,和對圖片進行簡單的裁剪、旋轉,花了不少時間才看到了這個插件,感覺功能挺全面,代碼實現起來也挺簡單,再加上用的是Bootstrap,對移動端操作也有適配,於是就 ...
在做頭像上傳的時候,瀏覽器默認是無法取得本地圖片的,當然 HTML5 是可以的。不過IE6-8怎么破?目前比較通用的方案都是 flash 解決。 說道頭像預覽和裁剪,我最熟悉的就是 Discuz 的那個了,非常方便好用。不僅可以選擇本地圖片,還能直接調用攝像頭拍攝,當然前提是你必須有個攝像頭 ...
Imgareaselect 是一個 允許用戶使用簡單、直觀的點擊、拖動界面圖像選擇矩形區域的jQuery插件。該插件可用於 web 應用程序中輕松實現圖像裁剪功能,以及其他功能,如照片標記、 圖像編輯功能,等等. 支持瀏覽器: Firefox 2+, Opera ...
最近工作真心忙碌,幾乎沒時間寫博客。今天趁周末來仿一個QQ頭像裁剪功能插件。效果如下: 所有文件都可在我的Github上下載,從頭到尾從簡到繁按步驟一共分了9個HTML文件,每個步驟文件里的注釋都寫的很清楚,故在本博客內不贅述。 原理: 主要是通過css的clip來裁剪圖片可視區 ...
最近由於項目需要,所以做了一個上傳頭像預覽並且可以預覽裁剪的功能,大概思路是上傳的圖片先保存到服務器,然后通過ajax從服務器獲取到圖片信息,再利用Jcrop插件進行裁剪,之后通過PHP獲取到的四個裁切點的坐標進行裁剪。 首先看一下uploadify上傳插件的API: uploader ...
效果 頁面結構 JS代碼 需要注意的是如果使用jQuery 1.9及以上版本移除了$.browser可以使用$.support來替代 ...
(本文原創,引用請注明出處--zhangjieatbky) 環境准備 准備jquery、jcrop的js和css(官網獲取)、jquery的文件上傳下載組件 html代碼 ...