Canvas对象、Image对象、Blob对象之间的相互转换

目录

Blob对象转Image对象

blobToImg(blob) {
    return new Promise((resolve, reject) => {
        let reader = new FileReader()
        reader.addEventListener('load', () => {
            let img = new Image()
            img.src = reader.result
            img.addEventListener('load', () => resolve(img))
        })
        reader.readAsDataURL(blob)
    })
}

Image对象转Canvas对象

imgToCanvas(img) {
    let canvas = document.createElement('canvas')
    canvas.width = img.width
    canvas.height = img.height
    let ctx = canvas.getContext('2d')
    ctx.drawImage(img, 0, 0)
    return canvas
}

Canvas对象转Image对象

canvasToImg(canvas) {
    return new Promise((resolve, reject) => {
        let image = new Image();
        // canvas.toDataURL 返回的是一串Base64编码的URL
        // 指定格式 PNG
        image.src = canvas.toDataURL("image/png");
        image.addEventListener('load', () => {
            resolve(image);
        });
    })
}

Canvas对象转Blob对象

canvas.toBlob(blob => resolve(blob), "image/jpeg")

Blob对象转图片Url（图片）

let urlCreator = window.URL || window.webkitURL;
let imageUrl = urlCreator.createObjectURL(blob); // 图片标签 <image /> 的src属性