vue怎么使用 FileReader 将 HEIC 文件转换为 JPEG 格式
在 Vue 中可以使用 FileReader 对象来读取 HEIC 文件,并使用 canvas 对象将其转换为 JPEG 格式。以下是示例代码:
methods: {
convertHEICtoJPEG(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.readAsArrayBuffer(file)
reader.onload = () => {
const blob = new Blob([reader.result])
const url = URL.createObjectURL(blob)
const img = new Image()
img.onload = () => {
const canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
const context = canvas.getContext('2d')
context.drawImage(img, 0, 0, img.width, img.height)
canvas.toBlob((blob) => {
resolve(blob)
}, 'image/jpeg', 0.8)
URL.revokeObjectURL(url)
}
img.src = url
}
reader.onerror = (error) => {
reject(error)
}
})
}
}
在以上代码中,我们首先创建了一个 Promise 对象,以便异步返回转换后的 JPEG 文件。然后使用 FileReader 对象读取 HEIC 文件,并在读取完成后使用 Blob 对象创建一个 URL。接着我们创建一个 Image 对象并将其加载到 URL 中,等待其加载完成后,我们创建一个 canvas 对象并将其大小设置为图片的大小。使用 canvas 的 getContext 方法获取上下文对象并使用 drawImage 方法将图片绘制在 canvas 上。最后,我们使用 canvas 的 toBlob 方法将其转换为 Blob 对象,并将其作为 Promise 对象的返回值。
原文地址: http://www.cveoy.top/t/topic/D5g 著作权归作者所有。请勿转载和采集!