canvas转换图片格式

在项目中遇到将png格式的图片转换为jpg格式的图片,可以通过canvas进行转换。

/**
 * 转换图片格式
 * @param {Blob} blob
 * @param {String} suffix 图片后缀 png jpeg webp
 */
async function convertFormat(blob, suffix) {
    // 使用promise返回,不然在img.onload中直接return返回不了
    return new Promise((resolve, reject) => {        
        // 创建图片实例
        let img = new Image()
        img.onerror = (error) => {
            console.error('图片加载失败:', error);
            reject('图片加载失败');
        };
        // 图片加载完后
        img.onload =  () => {
            // 创建canvas元素
            let canvas = document.createElement('canvas')
            canvas.width = img.width
            canvas.height = img.height
            let ctx = canvas.getContext('2d')
            //   图片来源,x坐标,y坐标
            ctx?.drawImage(img, 0, 0)

            // 转换为base64格式
            const transUrl = canvas.toDataURL(`image/${suffix}`)
            
            // 释放资源
            canvas.remove()
            ctx = null
            img.src = ''
            URL.revokeObjectURL(img.src)

            resolve(transUrl)
        }

        img.src = URL.createObjectURL(blob)
    })
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值