###### tags: `Hexschool` `File API`

# File API map

digraph {

httpUrl [label="HTTP URL" shape=box]
xhr [label="ajax"]

inputFile [label="HTML input\n(type='file')" shape=box]
files [label="FileList" color=darkorange]

reader [label="FileReader" color=darkorange]
Text [label="Text Data" shape=box]
dataURI [label="DataURL\n(Base64)"]
binaryString
TypeArray [label="Type Array\n(ArrayBuffer)"]

img [label="Image"]
file [label="File\/Blob" color=darkorange]

download [label="Download File" shape=box]
blobUrl [label="Blob URL" color=darkorange]

{rank=same;blobUrl reader}
{rank=same;download Text}

httpUrl->img [label="<img src=http url />"]
httpUrl->xhr->file [label="load: callback"]

inputFile->files [label="files = input.files\n"]
files->file [label="file = files.item(0)"]
file->blobUrl [label="URL.createObjectURL(file)"]
file->reader [label="reader.readAsArrayBuffer(blob)\nreader.readAsText(blob, 'UTF-8')\nreader.readAsDataURL(blob)"]

img->canvas [label="ctx.drawImage(img)" color=Red]

dataURI->img [label="<img src='dataURI'>"]
dataURI->binaryString [label="字串處理"]
binaryString->TypeArray [label="new Uint8Array(size)\neveryChar.charCodeAt(index)"]

canvas [label="HTML Canvas"]
canvas->dataURI [label="canvas.getDataURL()" color=Red]
canvas->TypeArray [label="ctx.getImageData().data\n( Uint8ClampedArray)" color=Red]

blobUrl->img [label="<img src='blob url'>"]
blobUrl->download [label="<a href='blob url'\n download='file name'/>"]

reader->Text [label="load: callback" color=Blue]
reader->TypeArray [label="(readAsArrayBuffer)" color=Blue]
reader->binaryString [label="不建議" color=Blue]
reader->dataURI [label="load: callback" color=Blue]

TypeArray->file [label="new Blob([uint8array], {type})"]
TypeArray->dataURI [label="btoa(\nString.fromCharCode.apply(null, typeArray)\n)"]
}