沐鳴測速註冊_File、Blob、dataURL 和 canvas 的應用與轉換
(2) Data URLs 由四個部分組成：前綴(data:)、指示數據類型的MIME類型、如果非文本則為可選的base64標記、數據本身：data:[ ][;base64],,(2) File 對象是特殊類型的 Blob，且可以用在任意的 Blob 類型的 context 中。比如：FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能處理 Blob 和 File。,(1) 通常情況下， File 對象是來自用戶在一個 input 元素上選擇文件后返回的 FileList 對象,也可以是來自由拖放操作生成的 DataTransfer 對象，或者來自 htmlCanvasElement 上的 mozGetAsFile() API。,1. File,function fileToDataURL(file) {
let reader = new FileReader()
reader.readAsDataURL(file)
// reader 讀取文件成功的回調
reader.onload = function(e) {
return reader.result
}
},2. Blob,// 思路：File, Blob ——> dataURL ——> canvas
function fileAndBlobToCanvas(fileDataURL) {
let img = new Image()
img.src = fileDataURL
let canvas = document.createElement(‘canvas’)
if(!canvas.getContext) {
alert(‘瀏覽器不支持canvas’)
return;
}
let ctx = canvas.getContext(‘2d’)
document.getElementById(‘container’).appendChild(canvas)
img.onload = function() {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
}
},
,(1) Canvas API 提供了一個通過JavaScript 和 html的 canvas 元素來繪製圖形的方式。它可以用於動畫、遊戲畫面、數據可視化、圖片編輯以及實時視頻處理等方面。,function dataURLToBlob(fileDataURL) {
let arr = fileDataURL.split(‘,’),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while(n –) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], {type: mime})
},(1) Blob 對象表示一個不可變、原始數據的類文件對象。它的數據可以按文本或二進制的格式進行讀取，也可以轉換成 ReadableStream 來用於數據操作。,(2) Blob 表示的不一定是JavaScript原生格式的數據。File 接口基於Blob，繼承了 blob 的功能並將其擴展使其支持用戶系統上的文件。,(1) Data URLs，即前綴為 data: 協議的URL，其允許內容創建者向文檔中嵌入小文件。,(2) Data URLs 由四個部分組成：前綴(data:)、指示數據類型的MIME類型、如果非文本則為可選的base64標記、數據本身：data:[ ][;base64],