最近用到一些圖片相關的操作，記錄一下筆記。
將file轉化成base64
場景： 獲取到一個file型別的圖片，如果直接在html中預覽？這裡就是利用html5的新特性，將圖片轉換為Base64的形式顯示出來。有兩種方法：
- 方法一：利用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"，能正常顯示圖片。
- 方法二: 利用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>
複製程式碼img標籤的src將會是像這樣："data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAA==，能夠正常顯示。
canvas 轉為DataURL
場景： canvas畫出來的圖片，在html中的其他地方顯示。這裡的方法也是可以將canvas輸出為Dataurl的來放到img標籤中。
let imgSrc = canvas.toDataURL('image/png')
// canvas.toDataURL('image/jpeg')
複製程式碼canvas轉為blob物件
場景： canvas生成的圖片，如何上傳到七牛雲或伺服器？答案是將canvas輸出為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表示的圖片
場景： html中一張用DataURL形式顯示出來的圖片，可以下載到本地嗎？答案是使用一個a標籤，並設定download屬性，模擬點選。
function downloadImg () {
let aLink = document.createElement('a')
aLink.download = 'fileName.png' // 檔名字尾需要和dataurl表示的相同，否則可能亂碼
aLink.href = dataUrl
aLink.click()
}
複製程式碼