Недавно я использовал некоторые операции с изображениями для записи заметок.
Преобразовать файл в base64
Сценарий: получить изображение типа файла, если вы просматриваете его непосредственно в html? Здесь нужно использовать новые возможности html5 для преобразования изображения в Base64 и его отображения. Есть два способа:
- Способ 1: используйте URL.createObjectURL()
<!DOCTYPE html>
<html>
<head>
<title>base</title>
</head>
<body>
<input type="file" name="" id="file">
<img src="" id="img">
<script type="text/javascript">
window.onload = function () {
let $img = document.getElementById('img')
file.onchange = function (e) {
console.log(e.target.files[0])
let file = e.target.files[0]
let fileUrl = window.URL.createObjectURL(file)
$img.src = fileUrl
img.onload = function () {
// 手动回收
URL.revokeObjectURL(fileUrl)
}
}
}
</script>
</body>
</html>
Когда изображение выбрано, сгенерированный img src похож на"blob:null/4304d4f3-c13b-43e8-83f6-8c80426520ff", изображение может отображаться нормально.
- Способ 2: используйте FileReader.readAsDataURL()
<!DOCTYPE html>
<html>
<head>
<title>base</title>
</head>
<body>
<input type="file" name="" id="file">
<img src="" id="img">
<script type="text/javascript">
window.onload = function () {
let $img = document.getElementById('img')
file.onchange = function (e) {
console.log(e.target.files[0])
let file = e.target.files[0]
const fr = new FileReader(file)
fr.readAsDataURL(file)
fr.onload = function () {
$img.src = this.result
}
}
}
</script>
</body>
</html>
src тега img будет таким:"data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAA==, может отображаться нормально.
холст в DataURL
Сцена: изображение, нарисованное холстом, отображается в другом месте html. Метод здесь также может выводить холст как Dataurl, чтобы поместить его в тег img.
let imgSrc = canvas.toDataURL('image/png')
// canvas.toDataURL('image/jpeg')
холст для объекта blob
Сценарий: как загрузить изображения, созданные холстом, в облако Qiniu или на сервер? Ответ заключается в том, чтобы вывести холст как объект Blob, чтобы им можно было манипулировать как объектом File.
canvas.toBlob(function (blobObj) {
console.log(blobObj)
})
Отображение изображения объекта BLOB-объекта
Сценарий: Полученное изображение в формате Blob, как его отобразить в html? Ответ заключается в преобразовании объекта Blob в форму DataUrl.
canvas.toBlob(function (blobObj) {
let imgSrc = window.URL.createObjectURL(blobObj)
document.getElementById('img').src = imgSrc
})
Загрузите изображение, представленное DataURL
Сценарий: изображение, отображаемое в виде DataURL в html, можно загрузить локально? Ответ заключается в использовании тега и установке атрибута загрузки для имитации клика.
function downloadImg () {
let aLink = document.createElement('a')
aLink.download = 'fileName.png' // 文件名后缀需要和dataurl表示的相同，否则可能乱码
aLink.href = dataUrl
aLink.click()
}