将file转化成blob
- 利用URL.createObjectURL()
let $img = document.getElementById('img')
file.onchange = function (e) {
let file = e.target.files[0]
let fileUrl = window.URL.createObjectURL(file)
$img.src = fileUrl
img.onload = function () {
// 手动回收
URL.revokeObjectURL(fileUrl)
}
}
当抉择图片后,生成的img src相似”blob:null/4304d4f3-c13b-43e8-83f6-8c80426520ff”,能失常显示图片。
将file转化为DataURL
- 利用FileReader.readAsDataURL()
let $img = document.getElementById('img')
file.onchange = function (e) {
console.log(e.target.files)
let file = e.target.files[0]
const fr = new FileReader(file)
fr.readAsDataURL(file)
fr.onload = function () {
$img.src = this.result
}
}
canvas转为DataURL
canvas画进去的图片,在html中的其余中央显示。这里的办法也是能够将canvas输入为Dataurl的来放到img标签中。
let imgSrc = canvas.toDataURL('image/png')
// canvas.toDataURL('image/jpeg')
canvas转为blob对象
将canvas输入为Blob对象,这样就能够像File对象一样操作它了
canvas.toBlob(function (blobObj) {
console.log(blobObj) //blobObj就是blob对象(类文件)
})
Blob对象显示图片
同上,如果拿到blob对象,亦能够应用
URL.createObjectURL()
来进行转换
canvas.toBlob(function (blobObj) {
console.log(blobObj) //blobObj就是blob对象(类文件)
let imgSrc = window.URL.createObjectURL(blobObj)
document.getElementById('img').src = imgSrc
})
最初附一个下载DataURL下载办法:
function downloadImg () {
let aLink = document.createElement('a')
aLink.download = 'fileName.png' // 文件名后缀须要和dataurl示意的雷同,否则可能乱码
aLink.href = dataUrl
aLink.click()
}
发表回复