前端實(shí)現(xiàn)圖片的裁剪和壓縮
1俄烁、壓縮圖片
drawImage，壓縮圖片長(zhǎng)寬或者質(zhì)量參數(shù)來實(shí)現(xiàn)壓縮

/**
 * 壓縮圖片
 * @param {*} src 圖片的src
 * @param {*} resolve  回調(diào)函數(shù)海诲，用于處理異步繁莹，比如 promise 返回 
 * @param {*} fileName 文件名稱
 */
const compressImage = (src, resolve, fileName = "img") => {
    const image = new Image() // 新建一個(gè)img標(biāo)簽（還沒嵌入DOM節(jié)點(diǎn))
    image.src = src// 將圖片的路徑設(shè)成file路徑
    image.onload = () => {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');

        // 圖片原始尺寸
        const originWidth = image.width;
        const originHeight = image.height;

        // 最大尺寸限制
        const maxWidth = Math.min(image.width, 1200);
        const maxHeight = Math.min(image.height, 1200);
        // 目標(biāo)尺寸
        let targetWidth = originWidth;
        let targetHeight = originHeight;

        let quality = 0.92; // 默認(rèn)質(zhì)量
        // 圖片尺寸超過 1200 * 1200 的限制
        if (originWidth > maxWidth || originHeight > maxHeight) {
            if (originWidth / originHeight > maxWidth / maxHeight) {
                // 更寬，按照寬度限定尺寸
                targetWidth = maxWidth;
                targetHeight = Math.round(maxWidth * (originHeight / originWidth));
            } else {
               // 更高饿肺，按照高度限定尺寸
                targetHeight = maxHeight;
                targetWidth = Math.round(maxHeight * (originWidth / originHeight));
            }
        }

        canvas.width = targetWidth;
        canvas.height = targetHeight;

        // 繪制圖片
        context.drawImage(image, 0, 0, targetWidth, targetHeight)蒋困；
        // 獲取圖片url, base64格式
        const data = canvas.toDataURL('image/jpeg', quality);
        // base64格式 轉(zhuǎn)為 file 格式，用于上傳
        const newfile = dataURLtoFile(data, `${fileName}.jpeg`);
        resolve(newfile, data);
    }
}

2敬辣、圖片base64轉(zhuǎn)為file雪标，blob格式

/**
 * base64轉(zhuǎn)file對(duì)象
 * @param {*} dataurl 圖片base64 數(shù)據(jù)
 * @param {*} filename 文件名稱
 * @returns 
 */
const dataURLtoFile = (dataurl, filename) => {
    const arr = dataurl.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]); let n = bstr.length; const u8arr = new Uint8Array(n);
    // eslint-disable-next-line no-plusplus
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, { type: mime });  // 轉(zhuǎn)成了jpeg格式
}

3、用異步的方式用裁剪圖片

    // 裁剪圖片
    convertImage = (file) => {
        const that = this;
        return new Promise((resolve) => {
            const image = new Image() // 新建一個(gè)img標(biāo)簽（還沒嵌入DOM節(jié)點(diǎn))
            image.src = file // 將圖片的路徑設(shè)成file路徑
            image.onload = () => {
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');

                const targetWidth = 210; // 裁剪目標(biāo)寬度 210 px
                const targetHeight = image.height; // 裁剪目標(biāo)高度 image.height 圖片本身高度


                canvas.width = targetWidth; // canvas寬度 210 px
                canvas.height = targetHeight; // canvas寬度 targetHeight

                context.drawImage(image, 115, 0, targetWidth, targetHeight, 0, 0, targetWidth, targetHeight); // 裁剪圖片
                const data = canvas.toDataURL('image/jpeg', 1);
                resolve(data);
            }
        })
    }

4溉跃、FileReader 讀取本地上傳的圖片文件路徑

    readImage = (file) => new Promise((resolve) => {
        // 獲取文件名
        const fileName = file.name.substring(0, file.name.indexOf('.'));
        const reader = new FileReader(); // 讀取file
        reader.readAsDataURL(file);
        reader.onloadend = (e) => {
            const imgSrc = e.target.result; // 獲取文件的src
            // ... 執(zhí)行后續(xù)操作
        }
    })