亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue.js 實(shí)現(xiàn)圖片本地預(yù)覽 裁剪 壓縮 上傳功能

 更新時(shí)間:2018年03月01日 11:28:08   作者:siwuxie  
這篇文章主要介紹了vue.js 實(shí)現(xiàn)圖片本地預(yù)覽裁剪壓縮上傳功能,代碼簡單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下

以下代碼涉及 Vue 2.0 及 ES6 語法。

目標(biāo)

純 javascrpit 實(shí)現(xiàn),兼容ie9及以上瀏覽器,在本地做好文件格式、長寬、大小的檢測,減少瀏覽器交互。

現(xiàn)實(shí)是殘酷的,為了兼容Ie9 還是用上了 flash,第二篇來解釋解釋。

代碼結(jié)構(gòu)

<div id="wrap">
 <label>
  點(diǎn)我上傳圖片
  <input type='file' @change="change" ref="input">
 </label>
 <img :src="src" ref="img">
</div>
new Vue({
 el: '#wrap',
 data: {
  // 一張透明的圖片
  src:'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7', 
  elInput: null
 },
 methods: {
  change(e){
   // ...
  }
 }
})

如何獲取圖片大小

現(xiàn)代瀏覽器中十分簡單

function getSize(e){
 return e.target.files[0].size;
}

但 ie9 下暫時(shí)沒有找到純 JS 的方案。

因此,在需要判斷大小時(shí),遇到 ie9 直接繞過不去判斷

如何預(yù)覽本地圖片

const refs = this.$refs
const elInput = refs.input
const elImg = refs.img

現(xiàn)代瀏覽器中,通過調(diào)用 FileReader 讀取本地圖片,將圖片地址轉(zhuǎn)成 Base64 格式實(shí)現(xiàn)預(yù)覽。

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' 的寫法是為了圖片能適應(yīng)內(nèi)容縮放。

由于 IE9 對安全限制有所增強(qiáng),實(shí)踐中會(huì)遇到以下兩個(gè)問題:

如果 file 控件獲得焦點(diǎn),則 document.selection.createRange() 拒絕訪問,因此需要在 elInput.select() 后面加一句 elInput.blur() 即可。

為了讓上傳按鈕更美觀,默認(rèn)給 input[type=file] 的設(shè)置了樣式 visible:hidden ,這樣會(huì)導(dǎo)致 ie9 下報(bào)錯(cuò)。應(yīng)該會(huì)被瀏覽器認(rèn)為欺騙用戶點(diǎn)擊,只好曲線救國。

label{
 overflow:hidden;
}
label input[type='file']{
 position:absolute;
 top:9999px;
 left:9999px;
}

如何獲取圖片長寬

同理,利用 ie 濾鏡和 FileReader 的方案對 ie9 和非 ie9 分別實(shí)現(xiàn)。

ie9 的方案

參數(shù) src 接受的是本地圖片路徑

let tempEl;
const getSizeIncompatible = (src, callback) => {
 if (!tempEl) {
  tempEl = document.createElement('div');
  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 方案

參數(shù) src 接受的是 base64 編碼后的圖片路徑

const getSize = (src, callback) => {
 const image = new Image();
 image.onload = () => {
  callback(image.width, image.height);
 };
 image.src = src;
};

參考

https://elemefe.github.io/ima...

總結(jié)

以上所述是小編給大家介紹的vue.js 實(shí)現(xiàn)圖片本地預(yù)覽 裁剪 壓縮 上傳功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • Vue Router應(yīng)用方法詳解

    Vue Router應(yīng)用方法詳解

    在看這篇文章的幾點(diǎn)要求:需要你先知道Vue-Router是個(gè)什么東西,用來解決什么問題,以及它的基本使用。如果你還不懂的話,建議上官網(wǎng)了解下Vue-Router的基本使用后再回來看這篇文章
    2022-09-09
  • Vue中的組件注冊方法及注意事項(xiàng)

    Vue中的組件注冊方法及注意事項(xiàng)

    在Vue中,組件是構(gòu)建頁面的基本單位。通過組件化開發(fā),可以提高代碼的復(fù)用性和可維護(hù)性。組件的注冊方法包括全局注冊和局部注冊兩種方式。同時(shí),需要注意組件名的命名規(guī)范、組件選項(xiàng)的定義方式、組件之間的通信等問題,以實(shí)現(xiàn)更好的組件復(fù)用和開發(fā)效率
    2023-05-05
  • 圖文講解用vue-cli腳手架創(chuàng)建vue項(xiàng)目步驟

    圖文講解用vue-cli腳手架創(chuàng)建vue項(xiàng)目步驟

    本次小編給大家?guī)淼氖顷P(guān)于用vue-cli腳手架創(chuàng)建vue項(xiàng)目步驟講解內(nèi)容,有需要的朋友們可以學(xué)習(xí)下。
    2019-02-02
  • 關(guān)于Vue.js一些問題和思考學(xué)習(xí)筆記(2)

    關(guān)于Vue.js一些問題和思考學(xué)習(xí)筆記(2)

    這篇文章主要為大家分享了關(guān)于Vue.js一些問題和思考的學(xué)習(xí)筆記,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • vue 自定義組件 v-model雙向綁定、 父子組件同步通信的多種寫法

    vue 自定義組件 v-model雙向綁定、 父子組件同步通信的多種寫法

    父子組件通信,都是單項(xiàng)的,很多時(shí)候需要雙向通信。這篇文章主要介紹了vue 自定義組件 v-model雙向綁定、 父子組件同步通信,需要的朋友可以參考下
    2017-11-11
  • Vue3?入口文件createApp函數(shù)詳解

    Vue3?入口文件createApp函數(shù)詳解

    這篇文章主要介紹了Vue3?入口文件createApp函數(shù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-04-04
  • vue實(shí)現(xiàn)div單選多選功能

    vue實(shí)現(xiàn)div單選多選功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)div單選多選功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-07-07
  • 一篇帶你搞懂Vue中的自定義指令

    一篇帶你搞懂Vue中的自定義指令

    自定義指令,是Vue提供的一種擴(kuò)展和定制的機(jī)制,使開發(fā)者能夠在組件中直接操作DOM、處理事件、添加樣式等,并提供了與第三方庫集成的方式,定義指令使得Vue在處理交互和DOM操作時(shí)更加靈活和強(qiáng)大,本文將帶大家搞懂Vue中的自定義指令,需要的朋友可以參考下
    2023-07-07
  • vue-lazyload使用總結(jié)(推薦)

    vue-lazyload使用總結(jié)(推薦)

    vue項(xiàng)目用到vue-lazyload做圖片懶加載,這篇文章主要介紹了vue-lazyload使用總結(jié),解決這個(gè)插件的坑,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2018-11-11
  • vue在組件中使用v-model的場景

    vue在組件中使用v-model的場景

    這篇文章主要介紹了vue在組件中使用v-model的場景,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下
    2022-07-07

最新評論