真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

高級(jí)前端進(jìn)階（六）

最近有個(gè)需求，就是上傳圖片的時(shí)候，圖片過(guò)大，需要壓縮一下圖片再上傳。
需求雖然很容易理解，但要做到，不是那么容易的。
這里涉及到的知識(shí)有點(diǎn)多，不多說(shuō)，本篇博客有點(diǎn)重要呀！

一、圖片URL轉(zhuǎn)Blob（圖片大小不變）

注意點(diǎn)：圖片不能跨域!!!

專(zhuān)注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)青山免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

方式一：通過(guò)XHR請(qǐng)求獲取

function urlToBlobByXHR(url) {
    const xhr = new XMLHttpRequest();
    xhr.open("get", url);
    xhr.responseType = "blob"; // 設(shè)置響應(yīng)請(qǐng)求格式
    xhr.onload = (e) => {
        if (e.target.status == 200) {
            console.log(e.target.response); // e.target.response返回的就是Blob。
            return e.target.response；// 這樣是不行的
        }
        else {
            console.log("異常");
        }
    };
    xhr.send();
}
urlToBlobByXHR("圖片URL"); // 調(diào)用

我們知道，XHR操作是異步的，只有在onload方法里面才能獲取到Blob，相應(yīng)的業(yè)務(wù)代碼也要寫(xiě)到里面。怎么能夠做到調(diào)用這個(gè)方法，直接得到Blob結(jié)果呢？
Promise便解決了諸如此類(lèi)的痛點(diǎn)。

function urlToBlobByXHR(url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open("get", url);
        xhr.responseType = "blob";
        xhr.onload = (e) => {
            if (e.target.status == 200) {
                resolve(e.target.response); // resolve
            }
            else {
                reject("異常"); // reject
            }
        };
        xhr.send();
    })
}
async f() {
    try {
    console.log(await urlToBlobByXHR(this.imgUrl)); // 直接返回Blob
  } catch (e) {
    console.log(e);
  }
}
f(); // 調(diào)用

方式二：通過(guò)canvas轉(zhuǎn)化（圖片大小會(huì)變大很多）

基本原理：就是新建一個(gè)canvas元素，然后在里面將圖片畫(huà)上去，接著利用canvas轉(zhuǎn)為Blob。

function canvasToBlob(imgUrl) {
    return new Promise((resolve, reject) => {
        const imgObj = new Image();
        imgObj.src = imgUrl;
        imgObj.onload = () => {
            const canvasObj = document.createElement("canvas");
            const ctx = canvasObj.getContext("2d");
            canvasObj.width = imgObj.naturalWidth;
            canvasObj.height = imgObj.naturalHeight;
            ctx.drawImage(imgObj, 0, 0, canvasObj.width, canvasObj.height);
            canvasObj.toBlob((blob) => {
                resolve(blob);
            });
        }
    })
}

const blobCanvas = await canvasToBlob(imgUrl); // 調(diào)用，直接獲取到blob

不過(guò)呢，利用canvas轉(zhuǎn)化，圖片會(huì)變大很多，在canvas上面畫(huà)圖片，期間圖片分辨率會(huì)改變，加上可能還有圖片解析的原因，會(huì)導(dǎo)致圖片變大很多。
而且canvas是可以截圖的，不過(guò)這一點(diǎn)是人為可以控制的。

二、圖片壓縮

原理：我們知道在canvas里面畫(huà)圖，canvas相當(dāng)于圖片的容器，既然是容器，那便可以控制容器的寬高，相應(yīng)的改變圖片的寬高，通過(guò)這一點(diǎn)，不就可以縮小圖片了嗎？
不過(guò)要注意的是，縮小圖片要等比例的縮小，雖然提供的接口里面支持更改圖片清晰度，但個(gè)人并不建議這么做，至于原因自己想吧。

版本一：

// imageUrl:圖片URL，圖片不能跨域
// maxSize:圖片最大多少M(fèi)
// scale:圖片放大比例
function compressImg1(imageUrl, maxSize = 1, scale = 0.8, imgWidth, imgHeight) {
    let maxSizeTemp = maxSize * 1024 * 1024;
    return new Promise((resolve, reject) => {
        const imageObj = new Image();
        imageObj.src = imageUrl;
        imageObj.onload = () => {
            const canvasObj = document.createElement("canvas");
            const ctx = canvasObj.getContext("2d");
            if (imgWidth && imgHeight) { // 等比例縮小
                canvasObj.width = scale * imgWidth;
                canvasObj.height = scale * imgHeight;
            }
            else {
                canvasObj.width = imageObj.naturalWidth;
                canvasObj.height = imageObj.naturalHeight;
            }
            ctx.drawImage(imageObj, 0, 0, canvasObj.width, canvasObj.height);
            canvasObj.toBlob((blob) => {
                resolve({ blob, canvasObj });
            });
        }
    }).then(({ blob, canvasObj }) => {
        if (blob.size / maxSizeTemp < maxSize) {
            let file = new File([blob], `test${imageUrl.substring(imageUrl.lastIndexOf("."))}`);
            return Promise.resolve({ blob, file });
        }
        else {
            return compressImg1(imageUrl, maxSize, scale, canvasObj.width, canvasObj.height); // 遞歸調(diào)用
        }
    })
}
const { blob } = await compressImg1("圖片地址"); // 調(diào)用

需求是實(shí)現(xiàn)了，但用到了遞歸，性能完全由縮小比例跟圖片大小決定。
圖片過(guò)大的話(huà)或者縮小比例大了點(diǎn)，會(huì)導(dǎo)致不斷遞歸，性能低下，這是肯定的。
以上還有兩個(gè)耗時(shí)的操作：
1、不斷請(qǐng)求圖片
2、不斷操作DOM

版本二：

有個(gè)潛規(guī)則，能不用遞歸就不用遞歸。
試想，怎樣一步到位可以把圖片縮小到需要的大小呢？再深入直接一點(diǎn)，如何得到有效的scale，等比例縮小后就能使圖片縮小到想要的程度呢？
然后再把以上兩個(gè)耗時(shí)操作再優(yōu)化一下，只需加載一次圖片。便得到了版本二。

function compressImg2(imageUrl, maxSize = 1, scale = 1) {
    let maxSizeTemp = maxSize * 1024 * 1024;
    return new Promise((resolve, reject) => {
        const imageObj = new Image(); // 只需加載一次圖片
        imageObj.src = imageUrl;
        imageObj.onload = () => {
            const canvasObj = document.createElement("canvas"); // 只需創(chuàng)建一次畫(huà)布
            const ctx = canvasObj.getContext("2d");
            canvasObj.width = imageObj.naturalWidth;
            canvasObj.height = imageObj.naturalHeight;
            ctx.drawImage(imageObj, 0, 0, canvasObj.width, canvasObj.height);
            canvasObj.toBlob((blob1) => {
                resolve({ imageObj, blob1, canvasObj, ctx });
            });
        }
    }).then(({ imageObj, blob1, canvasObj, ctx }) => {
        if (blob1.size / maxSizeTemp < maxSize) {
            let file = new File([blob1], `test${imageUrl.substring(imageUrl.lastIndexOf("."))}`);
            return Promise.resolve({ blob: blob1, file });
        }
        else {
            const ratio = Math.round(blob1.size / maxSizeTemp); // 比例
            canvasObj.width = (imageObj.naturalWidth / ratio) * scale; // 比例調(diào)整
            canvasObj.height = (imageObj.naturalHeight / ratio) * scale;
            ctx.drawImage(imageObj, 0, 0, canvasObj.width, canvasObj.height);
            return new Promise((resolve) => {
                canvasObj.toBlob((blob2) => {
                    let file = new File([blob2], `test${imageUrl.substring(imageUrl.lastIndexOf("."))}`);
                    resolve({ blob: blob2, file });
                });
            })
        }
    })
}

版本三（Promise轉(zhuǎn)為async await）

我們知道Promise跟asnc await是等價(jià)的。

async function compressImg(imageUrl, maxSize = 1, scale = 1) {
    let maxSizeTemp = maxSize * 1024 * 1024;
    const { imageObj, blob1, canvasObj, ctx } = await new Promise((resolve, reject) => {
        const imageObj = new Image();
        imageObj.src = imageUrl;
        imageObj.onload = () => {
            const canvasObj = document.createElement("canvas");
            const ctx = canvasObj.getContext("2d");
            canvasObj.width = imageObj.naturalWidth;
            canvasObj.height = imageObj.naturalHeight;
            // console.log(canvasObj);
            ctx.drawImage(imageObj, 0, 0, canvasObj.width, canvasObj.height);
            canvasObj.toBlob((blob1) => {
                // console.log('blob1', blob1);
                resolve({ imageObj, blob1, canvasObj, ctx });
            });
        };
    });
    if (blob1.size / maxSizeTemp < maxSize) {
        let file = new File([blob1], `test${imageUrl.substring(imageUrl.lastIndexOf("."))}`);
        return Promise.resolve({ blob: blob1, file });
    }
    else {
        // const ratio = Math.round(Math.sqrt(blob1.size / maxSizeTemp));
        const ratio = Math.round(blob1.size / maxSizeTemp);
        // console.log('ratio', ratio);
        canvasObj.width = (imageObj.naturalWidth / ratio) * scale;
        canvasObj.height = (imageObj.naturalHeight / ratio) * scale;
        // console.log(canvasObj);
        ctx.drawImage(imageObj, 0, 0, canvasObj.width, canvasObj.height);
        const { blob: blob2, file } = await new Promise((resolve) => {
            canvasObj.toBlob((blob2) => {
                // console.log('blob2', blob2);
                let file = new File([blob2], `test${imageUrl.substring(imageUrl.lastIndexOf("."))}`);
                resolve({ blob: blob2, file });
            });
        })
        return { blob: blob2, file };
    }
}

三、詳細(xì)講解下Promise

簡(jiǎn)單的一個(gè)例子

let p = new Promise((resolve) => {
  setTimeout(() => {
    resolve(); // 5秒后輸出
  }, 5000);
});
p.then((s) => {
  console.log(s); // 通過(guò)then的參數(shù)就可以獲取到結(jié)果
});

let s = await p; // async await轉(zhuǎn)換，簡(jiǎn)化then寫(xiě)法
console.log(s);

其實(shí)呢，Promise本質(zhì)上就是回調(diào)函數(shù)的使用，而Promise主要是為了解決回調(diào)地獄（回調(diào)函數(shù)嵌套）而出現(xiàn)的，async await寫(xiě)法主要是為了簡(jiǎn)化方便。

咱來(lái)模擬一下最簡(jiǎn)單的Promise，手寫(xiě)一個(gè)簡(jiǎn)單一點(diǎn)的。

// 首先定義一下Promise狀態(tài)
const status = {
  pending: "pending",
  fulfilled: "fulfilled",
  rejected: "rejected",
};

不支持異步（先來(lái)個(gè)簡(jiǎn)單的）

function MyPromise(executor) {
  const self = this;// this指向
  self.promiseStatus = status.pending;
  self.promiseValue = undefined;
  self.reason = undefined;
  function resolve(value) {
    if (self.promiseStatus == status.pending) {
      self.promiseStatus = status.fulfilled;
      self.promiseValue = value;
    }
  }
  function reject(reason) {
    if (self.promiseStatus == status.pending) {
      self.promiseStatus = status.rejected;
      self.reason = reason;
    }
  }
  try {
    executor(resolve, reject); // 在這里比較難以理解，函數(shù)resolve作為函數(shù)executor的參數(shù)，new MyPromise調(diào)用的時(shí)候，傳的也是個(gè)函數(shù)。
  } catch (e) {
    reject(e);
  }
}
MyPromise.prototype.then = function (onResolve, onReject) { // 利用原型添加方法
  const self = this;
  if (self.promiseStatus == status.fulfilled) {
    onResolve(self.promiseValue);
  }
  if (self.promiseStatus == status.rejected) {
    onReject(self.reason);
  }
};
// 調(diào)用
const myPromise = new MyPromise((resolve, reject) => { // MyPromise的參數(shù)也是個(gè)函數(shù)
  resolve(); // 暫時(shí)不支持異步
});
myPromise.then((data) => {
  console.log("data", data); // 輸出
});

支持異步的

function MyPromise(executor) {
  const self = this;
  self.promiseStatus = status.pending;
  self.promiseValue = undefined;
  self.reason = undefined;
  self.onResolve = [];
  self.onReject = [];
  function resolve(value) {
    if (self.promiseStatus == status.pending) {
      self.promiseStatus = status.fulfilled;
      self.promiseValue = value;
      self.onResolve.forEach((fn) => fn(value)); //支持異步
    }
  }
  function reject(reason) {
    if (self.promiseStatus == status.pending) {
      self.promiseStatus = status.rejected;
      self.reason = reason;
      self.onReject.forEach((fn) => fn(reason)); // //支持異步
    }
  }
  try {
    executor(resolve, reject);
  } catch (e) {
    reject(e);
  }
}
MyPromise.prototype.then = function (onResolve, onReject) {
  const self = this;
  if (self.promiseStatus == status.fulfilled) {
    onResolve(self.promiseValue);
  }
  if (self.promiseStatus == status.rejected) {
    onReject(self.reason);
  }
  if (self.promiseStatus == status.pending) {
    self.onResolve.push(onResolve);
    self.onReject.push(onReject);
  }
};
// 調(diào)用
const myPromise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(); // 異步
  }, 3000);
});
myPromise.then((data) => {
  console.log("data", data); // 輸出
});

個(gè)人覺(jué)得，能明白大致原理，會(huì)用就行了，至于能不能手寫(xiě)一個(gè)Promise并不是很重要的，不斷重復(fù)造輪子沒(méi)啥意思，
但是呢，理解其大概思路以及實(shí)現(xiàn)所用到的思想還是很重要的，對(duì)成長(zhǎng)的幫助很大。

總結(jié)

圖片壓縮還有待優(yōu)化，
Promise，大家應(yīng)該都很熟悉，用的非常多，可真正會(huì)用的人并不是太多的。

最后，祝大家中秋快樂(lè)！

分享名稱(chēng)：高級(jí)前端進(jìn)階（六）
網(wǎng)頁(yè)URL：http://weahome.cn/article/dsojgii.html

其他資訊

在線(xiàn)咨詢(xún)

微信咨詢(xún)

電話(huà)咨詢(xún)

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部