現在幾乎所有的App都有用戶登錄模塊,需要設置用戶頭像,而關於用戶頭像部分無疑也是比較頭疼的,目前大部分應用的頭像部分會有兩種方式:一種是利用系統的裁剪功能去獲取用戶頭像,一種就是獲取到圖片或者照片的地址后自定義頭像裁剪界面。而我這里提供了一種利用系統的裁剪功能來獲取頭像的寫法 ...
最近工作真心忙碌,幾乎沒時間寫博客。今天趁周末來仿一個QQ頭像裁剪功能插件。效果如下: 所有文件都可在我的Github上下載,從頭到尾從簡到繁按步驟一共分了 個HTML文件,每個步驟文件里的注釋都寫的很清楚,故在本博客內不贅述。 原理: 主要是通過css的clip來裁剪圖片可視區域,拖動剪裁窗口這里使用了JQ UI的draggable插件 但是縮放沒有,貪方便可以使用Resizable插件,但都用 ...
2014-09-14 23:59 13 4074 推薦指數:
現在幾乎所有的App都有用戶登錄模塊,需要設置用戶頭像,而關於用戶頭像部分無疑也是比較頭疼的,目前大部分應用的頭像部分會有兩種方式:一種是利用系統的裁剪功能去獲取用戶頭像,一種就是獲取到圖片或者照片的地址后自定義頭像裁剪界面。而我這里提供了一種利用系統的裁剪功能來獲取頭像的寫法 ...
上一節隨筆中,我們已經知道了關於jQuery插件ImgAreaSelect基本的知識;那么現在看一下實例: 首先,要知道我們應該實現什么功能? (1)圖片能夠實現上傳預覽功能 (2)拖拽裁剪圖片,使其能夠顯示裁剪后的區域 (3)顯示要裁剪區域的坐標 其次,該如何引用該插件 ...
由於最近一段時間比較忙,發現好久沒寫博客了,給大家分享下最近搞的logo上傳截取功能。在實現這個功能之前找了一些jq的插件,最后選定了cropper在github中可以找到。 具體的思路是1:選擇上傳的圖片,在change事件中用 ...
由於最近一段時間比較忙,發現好久沒寫博客了,給大家分享下最近搞的logo上傳截取功能。在實現這個功能之前找了一些jq的插件,最后選定了cropper在github中可以找到。 具體的思路是1:選擇上傳的圖片,在change事件中用form.jquery.js中的formajax異步提交表單,保存 ...
插件介紹 這是一個我在寫以前的項目的途中發現的一個國人寫的jQuery圖像裁剪插件,當時想實現用戶資料的頭像上傳功能,並且能夠預覽圖片,和對圖片進行簡單的裁剪、旋轉,花了不少時間才看到了這個插件,感覺功能挺全面,代碼實現起來也挺簡單,再加上用的是Bootstrap,對移動端操作也有適配,於是就 ...
(本文原創,引用請注明出處--zhangjieatbky) 環境准備 准備jquery、jcrop的js和css(官網獲取)、jquery的文件上傳下載組件 html代碼 ...
這里使用的是開源是的插件,做的很不錯 https://github.com/we-plugin/we-cropper.git git下來之后,如果急着使用效果。可以直接到example目錄下 把we-cropper文件夾直接放在自己的小程序項目中,現在我使用的是照片裁剪上傳的功能。 所以需要 ...
組件與api地址: npm地址地址:https://www.npmjs.com/package/vue-cropper/v/0.4.7 GitHub地址:https://github. ...