小議頭像預覽裁剪上傳的實現

2021-09-06 17:24:21 字數 908 閱讀 9693

在做頭像上傳的時候,瀏覽器預設是無法取得本地的,當然 html5 是可以的。

不過ie6-8怎麼破?

目前比較通用的方案都是 flash 解決。

說道頭像預覽和裁剪,我最熟悉的就是 discuz 的那個了,非常方便好用。

不僅可以選擇本地,還能直接呼叫攝像頭拍攝,當然前提是你必須有個攝像頭。

於是我心血來潮的想把他剝離出來給專案用,於是有就了此文。。

我就不說怎麼提取怎麼呼叫,就簡單的談談他是怎麼處理好了,反正不是我們想的那樣,和我想的出入非常大。

這個外掛程式呢,差不多分為四步處理:

1. 前台用js生成ie或現代瀏覽器用的flash嵌入標籤

2. 通過 flash 選擇上傳給伺服器 (沒錯, 這貨是直接上傳原圖的)

3. 讀取剛剛上傳到伺服器的,進行裁剪處理。

4. 把裁剪好的分別縮放為 200x200, 120x120, 48x48 的圖,當然不檔案,而是編碼資料提交給後台,

沒仔細看是什麼編碼,反正後台解碼後fopen寫入檔案的。

當然果然是攝像頭拍攝的話,2, 3步變為拍攝,1, 4一樣的。

好了,看過步驟,相信大家和我一樣灰常桑心,,說好的預覽,腫麼變成上傳後預覽了,那要你何用?

難道僅僅為了裁剪而呼叫這麼**的外掛程式麼?這不是我的作風。(當然目前用他,因為專案時間有限,之後再重寫)

下面我們來談下 js 實現思路吧。

既然沒辦法預覽(html5除外),那麼我們就先上傳,然後"裁剪"即可。

formdata或iframe做偽ajax上傳,得到檔案路徑後,就可以預覽,然後"裁剪"即可。

當然不是真正的裁剪,也是偽裁剪,只是記錄座標後提交給後台,讓後台為我們真正的裁剪。

因為第一步上傳了,第二步我們只要ajax提交裁剪區域座標即可,不需要重新上傳。

相信聰明的你一定想到怎麼實現了。

android裁剪頭像上傳

由於最近沒什麼事,把以前經常用到的東西自己重頭寫一遍,然後記錄下來,給需要的朋友使用,也方便自己以後學習 思路 1.首先選擇 2.進行裁剪 3.儲存到本地 intent intent new intent android.media.action.image capture intent.putex...

php檔案上傳及頭像預覽

php檔案上傳原理是通過form表單的enctype multipart form data 屬性將檔案臨時放到wamp資料夾中的tmp目錄下,再通過後台php 程式將檔案儲存在體統中。html 後台處理介面 shangchuan.php 有以下幾點需要注意 1.控制上傳檔案的型別 2.控制上傳檔案...

處理微信小程式上傳頭像裁剪功能。

這裡使用的是開源是的外掛程式,做的很不錯 git下來之後,如果急著使用效果。可以直接到example目錄下 把we cropper資料夾直接放在自己的小程式專案中,現在我使用的是 裁剪上傳的功能。所以需要兩個頁面來共同完成。a頁面 展示修改裁剪後 的頁面,b頁面的原來實現裁剪功能的頁面。a頁面的 通...