File Canvas Image Blob DataURL 转

const converter = {
    file2dataURL: (file) => {
        return new Promise((resolve, reject) => {
            try {
                let reader = new FileReader()
                reader.onload = (e) => {
                    resolve(e.currentTarget.result)
                }
                reader.readAsDataURL(file)
            } catch (e) {
                reject(e.currentTarget.result)
            }
        })
    },
    dataURLToImage: (dataURL) => {
        return new Promise((resolve, reject) => {
            let img = new Image()
            img.src = dataURL
            resolve(img)
        })
    },
    imageToCanvas: (image, width = 200, height = 200) => {
        return new Promise((resolve, reject) => {
            let canvas = document.createElement("canvas")

            canvas.height = height
            canvas.width = width

            const ctx = canvas.getContext("2d")

            let naturalWidth = image.naturalWidth
            let naturalHeight = image.naturalHeight

            ctx.drawImage(image, 0, 0, width, height)

            resolve(canvas)
        })
    },
    canvas2Image: (canvas, width = 200, height = 200) => {
        return new Promise((resolve, reject) => {
            let image = new Image()
            image.width = width
            image.height = height
            image.src = canvas.toDataURL("image/png")
            resolve(image)
        })
    },
    image2Blob: (image) => {
        return new Promise((resolve, reject) => {
            let xhr = new XMLHttpRequest()
            xhr.open("get", image.src, true)
            xhr.responseType = "blob"
            xhr.onload = (x) => {
                resolve(xhr.response)
            }
            xhr.send()
        })
    },
    canvas2DataURL: (canvas) => {
        return new Promise((resolve, reject) => {
            let dataURL = canvas.toDataURL("image/png")
            resolve(dataURL)
        })
    },
    canvas2Blob: (canvas) => {
        return new Promise((resolve, reject) => {
            let dataURL = canvas.toDataURL("image/png")
            let blob = new Blob([dataURL], {type: "image/png"})
            resolve(blob)
        })
    },
    blob2File: (blob, fileName = "NAME", typeName = "image/png") => {
        return new Promise((resolve, reject) => {
            let file = new File([blob], fileName, {type: typeName})
            resolve(file)
        })
    }
}

export default converter

示例

this.$converter.file2dataURL(file).then((dataURLResult) => {
            // console.log(dataURLResult)//data:img
            return this.$converter.dataURLToImage(dataURLResult)
          }).then((imageResult) => {
            // document.documentElement.append(imageResult)
            return this.$converter.imageToCanvas(imageResult, this.width, this.height)
          }).then((canvasResult) => {
            return this.$converter.canvas2Image(canvasResult, this.width, this.height)
          }).then((imageResult) => {
            return this.$converter.image2Blob(imageResult)
          }).then((blobResult) => {
              //do something
          })