前端之图片操作

一、图片URL转Blob（图片大小不变）

注意点：图片不能跨域!!!

方式一：通过XHR请求获取

function urlToBlobByXHR(url) {
    const xhr = new XMLHttpRequest();
    xhr.open("get", url);
    xhr.responseType = "blob"; // 设置响应请求格式
    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"); // 调用

我们知道，XHR操作是异步的，只有在onload方法里面才能获取到Blob，相应的业务代码也要写到里面。怎么能够做到调用这个方法，直接得到Blob结果呢？
Promise便解决了诸如此类的痛点。

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(); // 调用