html5 canvas移動瀏覽器上實現圖片壓縮上傳

2020-03-24 17:30:40

字體：大中小

來源：轉載

供稿：網友

最近在移動端設計頭像上傳功能時，原本是以 input type= file 直接通過formData上傳，然而實際使用情況是：對于過大的圖片（高像素手機所拍攝的照片等）上傳時間過長會導致上傳失敗，而每次都上傳原始大小的圖片（后臺處理壓縮）十分影響用戶體驗，所以研究了一下通過canvashtml' target='_blank'>壓縮圖片并上傳的方法，以下是整理的一些思路和心得：一、 input type= file 獲取本地圖片，并將圖片繪制到畫布中。此處的難點在于：由于瀏覽器的保護機制，無法直接獲取到本地文件的圖片路徑，所以需要將本地圖片編譯成base64格式再做上傳，代碼如下：JavaScript Code復制內容到剪貼板
varresult=document.getElementById( /*出錯信息顯示塊*/ ); varinput=document.getElementById( /*上傳文件標簽*/ ); if(typeofFileReader==='undefined'){ result.innerHTML= p 抱歉，你的瀏覽器不支持FileReader /p ; input.setAttribute('disabled','disabled'); }else{ input.addEventListener('change',readFile,false); } functionreadFile(){ varfile=this.files[0]; if(!/image///w+/.test(file.type)){ alert( 請確保文件為圖像類型 ); returnfalse; } varreader=newFileReader(); reader.readAsDataURL(file); reader.onload=function(e){ //this.result編譯后的圖像編碼，可直接用src顯示 } }
varc=document.getElementById( /*canvas標簽的id*/ ); varcxt=c.getContext( 2d ); varimg=newImage(); img.src=/*獲取的圖片編碼地址*/; varwidth=img.width; varheight=img.height; dic=height/width; c.width=200;//圖片壓縮的標準，這里是按照定款200px計算 c.height=200*dic; cxt.clearRect(0,0,200,200*dic); cxt.drawImage(img,0,0,200,200*dic); varfinalURL=c.toDataURL(); //最終得到的finalURL即為壓縮后的圖片編碼，可用來上傳或者直接生成img標簽
這里需要注意的幾點是：1、本地調試時會有一個報錯，原因為跨域問題，需要再服務端調試；2、canvas中的drawImage()方法具備圖像剪裁功能，但將圖像拉伸和剪裁同時寫入的話，會優先執行剪裁的方法；3、使用AJAX上傳圖像編碼時，編碼內的加號會被轉成空格上傳導致后臺編譯失敗；4、關于對圖片區域選擇上傳的方法尚在嘗試階段，后續會補上心得。以上就是本文的全部內容，希望對大家的學習有所幫助。原文：http://www.cnblogs.com/liaojh/p/5209433.htmlhtml教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML5 Canvas陰影使用方法實例演示

下一篇：html5指南-6.如何創建離線web應用程序實現離線訪問