網(wǎng)站用戶頭像剪裁上傳完整案例

array_huang 發(fā)布于2019-08-01 15:38 / 705人閱讀

摘要：做為網(wǎng)站前段開發(fā)人員來說，用戶頭像剪裁和上傳是一個很常用的功能，一般這個功能涉及到圖片的放大，縮小，移動，旋轉(zhuǎn)，和剪裁。下面我們來做一個完整的，剪裁后的圖片以的形式返回，怎么上傳到后臺服務(wù)器，很簡單，這里不做介紹。

做為網(wǎng)站前段開發(fā)人員來說，用戶頭像剪裁和上傳是一個很常用的功能，一般這個功能涉及到圖片的放大，縮小，移動，旋轉(zhuǎn)，和剪裁。下面我們來做一個完整的demo，剪裁后的圖片以base64的形式返回，base64怎么上傳到后臺服務(wù)器，很簡單，這里不做介紹。

圖片的操作：手機端操作和其他手機圖片應(yīng)用操作沒有任何區(qū)別。PC端：通過鼠標的滾輪是實現(xiàn)圖片的放大縮小，長按左鍵移動鼠標實現(xiàn)圖片的移動，雙擊圖片現(xiàn)實圖片的旋轉(zhuǎn)。

demo下載地址：下載1 下載2

在這個demo中，我們使用Jquery的插件（jquery.photoClip.js）完成。【在我的下一個博客我們分析下photoClip的源碼實現(xiàn)】。在使用jquery.photoClip.js，我們還得添加幾個依賴插件：iscroll-zoom.js（實現(xiàn)圖片的移動）、hammer.js、lrz.all.bundle.js。（這3個js擴展庫，在我給出的demo下載地址一并給出）。下面是簡單實現(xiàn)的源碼：










圖片裁剪

如有興趣可以加我的Q群一起討論學(xué)習(xí)js，css，python爬蟲等技術(shù)。（QQ群：512245829）

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/50018.html

相關(guān)文章

網(wǎng)站用戶頭像剪裁上傳完整案例

摘要：做為網(wǎng)站前段開發(fā)人員來說，用戶頭像剪裁和上傳是一個很常用的功能，一般這個功能涉及到圖片的放大，縮小，移動，旋轉(zhuǎn)，和剪裁。下面我們來做一個完整的，剪裁后的圖片以的形式返回，怎么上傳到后臺服務(wù)器，很簡單，這里不做介紹。做為網(wǎng)站前段開發(fā)人員來說，用戶頭像剪裁和上傳是一個很常用的功能，一般這個功能涉及到圖片的放大，縮小，移動，旋轉(zhuǎn)，和剪裁。下面我們來做一個完整的demo，剪裁后的圖片以bas...

ivan_qhz 2019-08-20 10:28 評論0 收藏0
Web3程序員用Davatar.xyz為所有加密網(wǎng)站引入通用頭像

摘要：網(wǎng)站支持用戶為生態(tài)系統(tǒng)中的數(shù)字錢包和加密幣網(wǎng)站創(chuàng)建獨一無二的頭像。蓋爾稱我們決定用域名域名主要是因為它已被公認為加密幣網(wǎng)站的標準域名。許多在創(chuàng)造互聯(lián)網(wǎng)新格局如元宇宙和Web3的平臺正開始啟用.xyz域名，例如去中心化自治組織FlamingoDAO.xyz供成員為非同質(zhì)代幣投資匯集資金；加密幣投資項目消息平臺使用Launchpool.xyz作為官網(wǎng)；以及為加密幣交易提供最新匯率的去...

不知名網(wǎng)友 2021-11-25 09:55 評論0 收藏0
【CSS】CSS 世界 -- 元素的顯示與隱藏學(xué)習(xí)總結(jié)

摘要：應(yīng)用場景用戶上傳頭像，實時顯示并裁減實現(xiàn)方式模塊外部容器設(shè)置，剪裁區(qū)域里面放一個加載效果，設(shè)置。圖片尺寸獲取成功后，再正常初始化，然后讓外部容器屬性重置為。這樣體驗就會好很多，用戶只會看到加載中剪裁界面，而不是占位界面加載中最終操作界面。一、Display 幾種隱藏方式 1、希望元素不可見、不占據(jù)空間、輔助設(shè)備無法訪問、不渲染使用標簽：

wyk1184 2019-08-29 17:20 評論0 收藏0
Django搭建個人博客：上傳頭像圖片

摘要：到目前為止我們的博客處理的都是文字。比如說圖片上傳是年月日，則圖片會保存在中。添加標簽用于上傳圖片。除了上傳，圖片的處理還包括驗證格式改變尺寸更名裁剪美化等多種多樣的需求。如果上傳的圖片重名，會導(dǎo)致報錯嗎請試試看。到目前為止我們的博客處理的都是文字?，F(xiàn)代互聯(lián)網(wǎng)早就進入了讀圖時代，圖片的維護、展示也就相當重要。上一章中預(yù)留了avatar字段，用來保存用戶上傳的頭像，現(xiàn)在我們來實現(xiàn)這個...

summerpxy 2019-07-30 18:37 評論0 收藏0
編寫一個頭像裁剪組件（一）

摘要：需求是編寫一個頭像剪裁工具再封裝成為一個組件，然后根據(jù)功能開始逐步編寫代碼先是上傳圖片預(yù)覽圖片編輯圖片。需求是編寫一個頭像剪裁工具再封裝成為一個組件，然后根據(jù)功能開始逐步編寫代碼：先是上傳圖片 => 預(yù)覽圖片 => 編輯圖片。剛開始沒有去考慮兼容性的問題，直接編寫upload部分的代碼，參考了很多代碼還有HTML5 FILE API之后，發(fā)現(xiàn)很少有React編寫的這樣的代碼，因為想...

whatsns 2019-08-23 10:31 評論0 收藏0