這篇文章主要介紹了H5調用相機拍照並壓縮圖片的實例代碼,內容挺不錯的,現在分享給大家,也給大家做個參考。
整理文檔,搜尋一個H5呼叫相機拍照並壓縮圖片的實例程式碼,稍微整理精簡一下做下分享。
背景
最近要做一個h5的頁面,主要功能就是呼叫相機拍照或是相簿選圖並且把照片壓縮轉base64之後上傳到後台伺服器,然後伺服器傳回識別結果。
前端的主要功能點有:
H5如何呼叫相機
- ##圖片如何壓縮
- #圖片轉base64
H5呼叫相機/相簿
呼叫相機最簡單的方法就是使用input file[camera ]屬性:
<input type="file" capture=camera accept="image/*">//相机
<input type="file" accept="image/*">//相册
登入後複製
這個種方法相容性還是有問題的,在iphone手機上可以正常開啟相機,但是在安卓手機上點擊之後是相機、圖庫、檔案管理器等混合選擇項目。在網路上搜了很多都沒有什麼好的解決辦法,只能繼續往下寫了。 。 。
圖片壓縮
圖片壓縮就要用到
FileReader和
FileReader物件允許Web應用程式非同步讀取儲存在電腦上的檔案的內容,使用File或Blob物件指定要讀取的檔案或資料。