图片地址转base64，再转文件流file

1、先转base64

function getBase64Image(img) {
    var canvas = document.createElement("canvas")
    canvas.width = img.width
    canvas.height = img.height
    var ctx = canvas.getContext("2d")
    ctx.drawImage(img, 0, 0, img.width, img.height)
    var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase()
    var dataURL = canvas.toDataURL("image/" + ext)

    return dataURL
}

2、再由base64转文件流file

function btof(data, fileName) {
    const dataArr = data.split(",")
    const byteString = atob(dataArr[1])

    const options = {
        type: "image/jpeg",
        endings: "native"
    }
    const u8Arr = new Uint8Array(byteString.length)
    for (let i = 0; i < byteString.length; i++) {
        u8Arr[i] = byteString.charCodeAt(i)
    }
    return new File([u8Arr], fileName + ".jpg", options)
}

3、例子

function toImg(img) {
    var image = new Image()
    image.src = img
    // image.setAttribute("crossOrigin", "Anonymous")
    image.setAttribute("crossorigin", " *")
    image.onload = function() {
        var base64 = getBase64Image(image)

        //转换base64到file
        var file = btof(base64, "test")
        console.log(file)
    }
}

4、图片跨域问题

可以在图片地址后面添加参数，例如：图片地址 + '?time='+new Date().getTime()

补充：图片地址转base64

// 方法一
function convertImgToBase64(url, callback) {
    var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'),
        img = new Image()
    img.crossOrigin = 'Anonymous'
    img.onload = function () {
        canvas.height = img.height
        canvas.width = img.width
        ctx.drawImage(img, 0, 0)
        var dataURL = canvas.toDataURL('image/png')
        callback.call(this, dataURL)
        canvas = null
    }
    img.src = url
}

// 方法二
function getBase64(imgUrl) {
    window.URL = window.URL || window.webkitURL
    var xhr = new XMLHttpRequest()
    xhr.open('get', imgUrl, true)
    xhr.responseType = 'blob'
    xhr.onload = function () {
        if (this.status == 200) {
            //得到一个blob对象
            var blob = this.response
            let oFileReader = new FileReader()
            oFileReader.onloadend = function (e) {
                let base64 = e.target.result
                console.log(base64)
            }
            oFileReader.readAsDataURL(blob)

            let src = window.URL.createObjectURL(blob)
            console.log(src)
        }
    }
    xhr.send()
}

// 使用
var url =
    'http://static.chouxiaowa.cn/uploads/2020/1209/9fb5209ed3ae8a564e24cd7b6085593c.jpg' +
    '?time=' +
    new Date().getTime()
convertImgToBase64(url, function (base64Img) {
    //转化后的base64
    console.log(base64Img)
})
getBase64(url)