Hexschool
File API
%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)
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up
Sign in with Wallet
HackMD