Try   HackMD
tags: Hexschool File API

File API map







%0



httpUrl

HTTP URL



xhr

ajax



httpUrl->xhr


load: callback



img

Image



httpUrl->img


<img src=http url />



file

File/Blob



xhr->file


load: callback



inputFile

HTML input
(type='file')



files

FileList



inputFile->files


files = input.files



files->file


file = files.item(0)



reader

FileReader



Text

Text Data



reader->Text


load: callback



dataURI

DataURL
(Base64)



reader->dataURI


load: callback



binaryString

binaryString



reader->binaryString


不建議



TypeArray

Type Array
(ArrayBuffer)



reader->TypeArray


(readAsArrayBuffer)



dataURI->binaryString


字串處理



dataURI->img


<img src='dataURI'>



binaryString->TypeArray


new Uint8Array(size)
everyChar.charCodeAt(index)



TypeArray->dataURI


btoa(
String.fromCharCode.apply(null, typeArray)
)



TypeArray->file


new Blob([uint8array], {type})



canvas

HTML Canvas



img->canvas


ctx.drawImage(img)



file->reader


reader.readAsArrayBuffer(blob)
reader.readAsText(blob, 'UTF-8')
reader.readAsDataURL(blob)



blobUrl

Blob URL



file->blobUrl


URL.createObjectURL(file)



download

Download File



blobUrl->img


<img src='blob url'>



blobUrl->download


<a href='blob url'
 download='file name'/>



canvas->dataURI


canvas.getDataURL()



canvas->TypeArray


ctx.getImageData().data
( Uint8ClampedArray)
Last changed by 
 
Chris
https://dwatow.github.io
0
329
Published on HackMD