smartsearch/h5app/src/utils/imageUtils.ts

/**
 * @param {file}
 * @returns {string} 转Base64文件
 */
export function getBase64(file:any) {
    return new Promise((resolve, reject) => {
        ///FileReader类就是专门⽤来读⽂件的
        const reader = new FileReader();
        //开始读⽂件
        //readAsDataURL: dataurl它的本质就是图⽚的⼆进制数据，进⾏base64加密后形成的⼀个字符串，
        reader.readAsDataURL(file);
        // 成功和失败返回对应的信息，reader.result⼀个base64，可以直接使⽤
        reader.onload = () => resolve(reader.result);
        // 失败返回失败的信息
        reader.onerror = (error) => reject(error);
    });
}
/**
 * @param {base64url}
 * @returns {string} // 获取文件得大小
 */
export function calSize(base64url:string) {
    let str = base64url.replace('data:image/png;base64,', '');
    const equalIndex = str.indexOf('=');
    if(str.indexOf('=') > 0) {
        str = str.substring(0, equalIndex);
    }
    const strLength = str.length;
    const fileLength = strLength - (strLength / 8) * 2;
    // 返回单位为MB的大小
    return  parseFloat((fileLength / (1024 * 1024)).toFixed(2));
}

/**
 * @param {path,w,callback}
 * @returns {callback} // 通过canvas压缩base64图片 并压缩
 */
export function dealImage(path:string, w=1000, callback:any){
    const newImage = new Image();
    const size=calSize(path);//获取mb大小
    let quality = 0.52
    if(size<=1){//1 mb
        quality=0.9;
    }
    if(size>1){
        quality = 0.8
    }

    newImage.src = path;
    newImage.setAttribute("crossOrigin", 'Anonymous');    // url为外域时需要
    let imgWidth;
    let imgHeight;
    newImage.onload = function() {
        imgWidth = newImage.width;
        imgHeight = newImage.height;
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d") as any;
        if (Math.max(imgWidth, imgHeight) > w) {
            if (imgWidth > imgHeight) {
                canvas.width = w;
                canvas.height = w * imgHeight / imgWidth;
            } else {
                canvas.height = w;
                canvas.width = w * imgWidth / imgHeight;
            }
        } else {
            canvas.width = imgWidth;
            canvas.height = imgHeight;
        }

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
        const newBase64 = canvas.toDataURL("image/jpeg", quality);
        callback(newBase64);
    }
}

/**
 * 统一批量导出
 * @method getBase64 文件转base64
 * @method dealImage 压缩图片
 * @method calSize 获取图片大小
 */
const other = {
    base64: (file:any) => {
        return getBase64(file)
    },
    getDealImage:(path:any, w:number, callback:any)=>{
        return dealImage(path, w, callback)
    },
    getCalSize:(url:string)=>{
        return calSize(url)
    }
}