這篇文章主要介紹了vue.js 實現圖片本地預覽裁剪壓縮上傳功能,程式碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
以下程式碼涉及Vue 2.0 及ES6 語法。
純javascrpit 實現,相容ie9以上瀏覽器,在本地做好檔案格式、長寬、大小的偵測,減少瀏覽器互動。
現實是殘酷的,為了相容Ie9 還是用上了 flash,第二篇來解釋解釋。
<p id="wrap"> <label> 点我上传图片 <input type='file' @change="change" ref="input"> </label> <img :src="src" ref="img"> </p> new Vue({ el: '#wrap', data: { // 一张透明的图片 src:'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7', elInput: null }, methods: { change(e){ // ... } } })
現代瀏覽器中十分簡單
function getSize(e){ return e.target.files[0].size; }
但ie9 下暫時沒有找到純JS 的方案。
因此,在需要判斷大小時,遇到ie9 直接繞過不去判斷
const refs = this.$refs const elInput = refs.input const elImg = refs.img
現代瀏覽器中,透過呼叫FileReader 讀取本機圖片,將圖片位址轉換為Base64 格式實現預覽。
function getSrc(){ const reader = new FileReader(); reader.onload = (e) => { const src = e.target.result; elImg.src = src; }; if (elInput.files && elInput.files[0]) { reader.readAsDataURL(elInput.files[0]); } }
但問題又來了,ie9 不支援 FileReader,但可以透過 ie 濾鏡顯示。
function getSrc(){ elInput.select(); elInput.blur(); const src = document.selection.createRange().text; document.selection.empty(); elImg.style.filter = `progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='${src}')`; }
濾鏡中 sizingMethod='scale'
的寫法是為了圖片能適應內容縮放。
由於IE9 對安全限制有所增強,實務上會遇到以下兩個問題:
如果file 控制項獲得焦點,則document.selection.createRange()
拒絕訪問,因此需要在elInput.select()
後面加一句elInput.blur()
即可。
為了讓上傳按鈕更美觀,預設給 input[type=file]
的設定了樣式 visible:hidden
,這樣會導致 ie9 下報錯誤。應該會被瀏覽器認為欺騙用戶點擊,只好曲線救國。
label{ overflow:hidden; } label input[type='file']{ position:absolute; top:9999px; left:9999px; }
同理,利用ie 濾鏡和FileReader 的方案分別對ie9 和非ie9 實作。
ie9 的方案
參數src 接受的是本機圖片路徑
let tempEl; const getSizeIncompatible = (src, callback) => { if (!tempEl) { tempEl = document.createElement('p'); tempEl.style.position = 'absolute'; tempEl.style.width = '1px'; tempEl.style.height = '1px'; tempEl.style.left = '-9999px'; tempEl.style.top = '-9999px'; tempEl.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)'; document.body.insertBefore(tempEl, document.body.firstChild); } tempEl.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; callback(tempEl.offsetWidth, tempEl.offsetHeight); };
其中sizingMethod='image'
是為了圖片顯示原始大小。
非ie9 方案
參數src 接受的是base64 編碼後的圖片路徑
##
const getSize = (src, callback) => { const image = new Image(); image.onload = () => { callback(image.width, image.height); }; image.src = src; };#上面是我整理給大家的,希望未來會對大家有幫助。 相關文章:
##
以上是在vue.js中實作圖片本地預覽 裁剪 壓縮 上傳等一系列功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!