發(fā)送ajax請求如何實現(xiàn)上傳圖片顯示在網(wǎng)頁上

這篇“發(fā)送ajax請求如何實現(xiàn)上傳圖片顯示在網(wǎng)頁上”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“發(fā)送ajax請求如何實現(xiàn)上傳圖片顯示在網(wǎng)頁上”文章吧。

　　前言

　　在手機上通過網(wǎng)頁 input 標簽拍照上傳圖片，有一些手機會出現(xiàn)圖片旋轉(zhuǎn)了90度d的問題，包括 iPhone 和個別三星手機。這些手機豎著拍的時候才會出現(xiàn)這種問題，橫拍出來的照片就正常顯示。因此，可以通過獲取手機拍照角度來對照片進行旋轉(zhuǎn)，從而解決這個問題。

　　Orientation

　　這個參數(shù)并不是所有圖片都有的，不過手機拍出來的圖片是帶有這個參數(shù)的。旋轉(zhuǎn)角度參數(shù)值0°1

　　順時針90°6

　　逆時針90°8

　　180°3

　　參數(shù)為 1 的時候顯示正常，那么在這些橫拍顯示正常，即 Orientation=1 的手機上，豎拍的參數(shù)為 6。

　　想要獲取 Orientation 參數(shù)，可以通過 exif.js 庫來操作。exif.js 功能很多，體積也很大，未壓縮之前足足有 30k，這對手機頁面加載來說是非常大影響的。而我只需要獲取 Orientation 信息而已，所以我這里刪減了 exif.js 庫的一些代碼，將代碼縮小到幾KB。

　　exif.js 獲取 Orientation ：EXIF.getData（file, function（） {

　　var Orientation=EXIF.getTag（this, 'Orientation'）;

　　}）;

　　file 則是 input 文件表單上傳的文件。上傳的文件經(jīng)過 fileReader.readAsDataURL（file） 就可以實現(xiàn)預覽圖片了，這方面不清楚的可以查看：HTML5 進階系列：文件上傳下載

　　旋轉(zhuǎn)

　　旋轉(zhuǎn)需要用到 canvas 的 rotate（） 方法。ctx.rotate（angle）;

　　rotate 方法的參數(shù)為旋轉(zhuǎn)弧度。需要將角度轉(zhuǎn)為弧度：degrees * Math.PI / 180

　　旋轉(zhuǎn)的中心點默認都在 canvas 的起點，即 （ 0, 0 ）。旋轉(zhuǎn)的原理如下圖：

　　旋轉(zhuǎn)原理圖

　　旋轉(zhuǎn)之后，如果從 （ 0, 0 ） 點進行 drawImage（），那么畫出來的位置就是在左圖中的旋轉(zhuǎn) 90 度后的位置，不在可視區(qū)域呢。旋轉(zhuǎn)之后，坐標軸也跟著旋轉(zhuǎn)了，想要顯示在可視區(qū)域呢，需要將 （ 0, 0 ） 點往 y 軸的反方向移 y 個單位，此時的起始點則為 （ 0, -y ）。

　　同理，可以獲得旋轉(zhuǎn) -90 度后的起始點為 （ -x, 0 ），旋轉(zhuǎn) 180 度后的起始點為 （ -x, -y ）。

　　壓縮

　　手機拍出來的照片太大，而且使用 base64 編碼的照片會比原照片大，那么上傳的時候進行壓縮就非常有必要的?，F(xiàn)在的手機像素這么高，拍出來的照片寬高都有幾千像素，用 canvas 來渲染這照片的速度會相對比較慢。

　　因此第一步需要先對上傳照片的寬高做限制，判斷寬度或高度是否超出哪個范圍，則等比壓縮其寬高。var ratio=width / height;if（imgWidth > imgHeight && imgWidth > xx）{

　　imgWidth=xx;

　　imgHeight=Math.ceil（xx / ratio）;

　　}else if（imgWidth < imgHeight && imgHeight > yy）{

　　imgWidth=Math.ceil（yy * ratio）;

　　imgHeight=yy;

　　}

　　第二步就通過 canvas.toDataURL（） 方法來壓縮照片質(zhì)量。canvas.toDataURL（"image/jpeg", 1）;

　　toDataURL（） 方法返回一個包含圖片展示的 data URI 。使用兩個參數(shù)，第一個參數(shù)為圖片格式，默認為 image/png。第二個參數(shù)為壓縮質(zhì)量，在指定圖片格式為 image/jpeg 或 image/webp的情況下，可以從 0 到 1 的區(qū)間內(nèi)選擇圖片的質(zhì)量。

以上就是關(guān)于“發(fā)送ajax請求如何實現(xiàn)上傳圖片顯示在網(wǎng)頁上”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。