이미지 유형 변환, URL, 파일, Base64, Blob

1. 이미지 URL을 파일로 변환

function urlToFile(url, imageName) {
    return new Promise((resolve, reject) => {
        var blob = null
        var xhr = new XMLHttpRequest()
        xhr.open('GET', url)
        xhr.setRequestHeader('Accept', 'image/png')
        xhr.responseType = 'blob'
        xhr.onload = () => {
            blob = xhr.response
            let imgFile = new File([blob], imageName, { type: 'image/png' })
            resolve(imgFile)
        }
        xhr.onerror = (e) => {
            reject(e)
        }
        xhr.send()
    })
}

매개변수는 이미지 URL과 생성할 파일 이름입니다.

둘째, 이미지 파일을 base64로 변환합니다.

function fileToBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
}

매개변수는 이미지 파일과 함수로 전달됩니다.

사용하면 imageBase는 생성된 이미지 base64입니다.

fileToBase64(res, imageBase => {
    console.log('base64', imageBase)
})

3개, base64 변환 이미지 파일

이미지의 base64와 생성할 파일 이름을 전달합니다.

function base64toFile(dataurl, filename) {
    var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {
        type: mime
    });
}

4, blob:http:xxxxxxx는 base64를 변환합니다.

업로드 후 요소 구성 요소의 이미지는 다음과 같습니다. 생성되는 경로는 매번 다릅니다. 로컬에서만 접근 가능합니다.

function blobToBase64(blob){
    return new Promise((resolve) => {
        const image = new Image() // 新建一个img标签（还没嵌入DOM节点)
        image.src = blob;
        image.onload = () => {
            const canvas = document.createElement('canvas')
            canvas.width = image.width
            canvas.height = image.height
            const context = canvas.getContext('2d')
            context.drawImage(image, 0, 0, image.width, image.height);
            let imgUrl = canvas.toDataURL() //图片的base64地址
            // console.log(imgUrl);
            resolve(imgUrl)
        }
    })
}

 사용

blobToBase64(blobUrl).then((result) => {
     console.log(result);
})

5개, base64 변환 Blob

function base64toBlob(dataurl) {
    var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}

base64 형식을 입력하세요.

6, Blob 변환 base64

blobToBase64(blob, callback){
    const fileReader = new FileReader();
    fileReader.onload = (e) => {
        callback(e.target.result);
    };
    fileReader.readAsDataURL(blob);
}

사용

blobFileToBase64(blob,(result)=>{
    console.log(result);
})