images to svg
Before Width: | Height: | Size: 3.2 KiB |
22
4-binary/01-arraybuffer-binary-arrays/8bit-integer-256.svg
Normal file
|
@ -0,0 +1,22 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="195px" height="145px" viewBox="0 0 195 145" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>8bit-integer-256.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="binary" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="8bit-integer-256.svg">
|
||||
<rect id="Rectangle-227" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="24" y="33" width="100" height="28"></rect>
|
||||
<text id="100000000" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" letter-spacing="3" fill="#000000">
|
||||
<tspan x="12.8" y="51">10000000</tspan>
|
||||
<tspan x="113.6" y="51">0</tspan>
|
||||
</text>
|
||||
<text id="8-bit-integer" font-family="OpenSans-Regular, Open Sans" font-size="16" font-weight="normal" fill="#000000">
|
||||
<tspan x="28.640625" y="25">8-bit intege</tspan>
|
||||
<tspan x="112.828125" y="25" letter-spacing="3">r</tspan>
|
||||
</text>
|
||||
<text id="256" font-family="OpenSans-Regular, Open Sans" font-size="16" font-weight="normal" fill="#9B9B9B">
|
||||
<tspan x="135.777344" y="51">256</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 6.8 KiB |
Before Width: | Height: | Size: 3.1 KiB |
22
4-binary/01-arraybuffer-binary-arrays/8bit-integer-257.svg
Normal file
|
@ -0,0 +1,22 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="195px" height="145px" viewBox="0 0 195 145" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>8bit-integer-257.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="binary" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="8bit-integer-257.svg">
|
||||
<rect id="Rectangle-227-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="24" y="33" width="100" height="28"></rect>
|
||||
<text id="100000001" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" letter-spacing="3" fill="#000000">
|
||||
<tspan x="12.8" y="51">10000000</tspan>
|
||||
<tspan x="113.6" y="51">1</tspan>
|
||||
</text>
|
||||
<text id="8-bit-integer" font-family="OpenSans-Regular, Open Sans" font-size="16" font-weight="normal" fill="#000000">
|
||||
<tspan x="28.640625" y="25">8-bit intege</tspan>
|
||||
<tspan x="112.828125" y="25" letter-spacing="3">r</tspan>
|
||||
</text>
|
||||
<text id="257" font-family="OpenSans-Regular, Open Sans" font-size="16" font-weight="normal" fill="#9B9B9B">
|
||||
<tspan x="133.777344" y="50">257</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 6.6 KiB |
Before Width: | Height: | Size: 40 KiB |
|
@ -0,0 +1,171 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="707px" height="463px" viewBox="0 0 707 463" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>arraybuffer-view-buffersource.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="binary" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="arraybuffer-view-buffersource.svg">
|
||||
<rect id="Rectangle" stroke-opacity="0.35" stroke="#979797" fill="#F2F2F2" x="238.5" y="44.5" width="449" height="391"></rect>
|
||||
<rect id="Rectangle-227" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="237" y="61" width="31" height="58"></rect>
|
||||
<rect id="Rectangle-227-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="268" y="61" width="28" height="58"></rect>
|
||||
<rect id="Rectangle-227-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="296" y="61" width="28" height="58"></rect>
|
||||
<rect id="Rectangle-227-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="324" y="61" width="28" height="58"></rect>
|
||||
<rect id="Rectangle-227" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="352" y="61" width="28" height="58"></rect>
|
||||
<rect id="Rectangle-227-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="380" y="61" width="28" height="58"></rect>
|
||||
<rect id="Rectangle-227-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="408" y="61" width="28" height="58"></rect>
|
||||
<rect id="Rectangle-227-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="436" y="61" width="28" height="58"></rect>
|
||||
<rect id="Rectangle-227" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="463" y="61" width="28" height="58"></rect>
|
||||
<rect id="Rectangle-227-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="491" y="61" width="28" height="58"></rect>
|
||||
<rect id="Rectangle-227-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="519" y="61" width="28" height="58"></rect>
|
||||
<rect id="Rectangle-227-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="547" y="61" width="28" height="58"></rect>
|
||||
<rect id="Rectangle-227" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="575" y="61" width="28" height="58"></rect>
|
||||
<rect id="Rectangle-227-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="603" y="61" width="28" height="58"></rect>
|
||||
<rect id="Rectangle-227-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="631" y="61" width="28" height="58"></rect>
|
||||
<rect id="Rectangle-227-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="659" y="61" width="28" height="58"></rect>
|
||||
<rect id="Rectangle-227-Copy-19" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="237" y="155" width="59" height="44"></rect>
|
||||
<rect id="Rectangle-227-Copy-22" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="82" y="155" width="157" height="44"></rect>
|
||||
<rect id="Rectangle-227-Copy-17" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="296" y="155" width="56" height="44"></rect>
|
||||
<rect id="Rectangle-227-Copy-15" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="352" y="155" width="56" height="44"></rect>
|
||||
<text id="0-copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="263.8" y="180">0</tspan>
|
||||
</text>
|
||||
<text id="2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="375.8" y="180">2</tspan>
|
||||
</text>
|
||||
<text id="1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="320.8" y="180">1</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-227-Copy-13" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="408" y="155" width="56" height="44"></rect>
|
||||
<text id="3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="431.8" y="180">3</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-227-Copy-11" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="463" y="155" width="56" height="44"></rect>
|
||||
<rect id="Rectangle-227-Copy-9" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="519" y="155" width="56" height="44"></rect>
|
||||
<rect id="Rectangle-227-Copy-7" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="575" y="155" width="56" height="44"></rect>
|
||||
<rect id="Rectangle-227-Copy-5" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="631" y="155" width="56" height="44"></rect>
|
||||
<text id="4" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="485.8" y="180">4</tspan>
|
||||
</text>
|
||||
<text id="5" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="541.8" y="180">5</tspan>
|
||||
</text>
|
||||
<text id="6" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="597.8" y="180">6</tspan>
|
||||
</text>
|
||||
<text id="7" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="654.8" y="180">7</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-227-Copy-20" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="236" y="234" width="116" height="58"></rect>
|
||||
<path d="M82,234 L82,292 L238,292 L238,234 L82,234 Z" id="Rectangle-227-Copy-23" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
|
||||
<rect id="Rectangle-227-Copy-16" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="352" y="234" width="112" height="58"></rect>
|
||||
<text id="0-copy-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="293" y="267">0</tspan>
|
||||
</text>
|
||||
<text id="1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="404" y="267">1</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-227-Copy-12" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="463" y="234" width="112" height="58"></rect>
|
||||
<rect id="Rectangle-227-Copy-8" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="575" y="234" width="112" height="58"></rect>
|
||||
<text id="2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="516" y="267">2</tspan>
|
||||
</text>
|
||||
<text id="3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="628" y="267">3</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-227-Copy-21" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="237" y="328" width="227" height="28"></rect>
|
||||
<text id="0" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="348.8" y="346">0</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-227-Copy-14" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="463" y="328" width="224" height="28"></rect>
|
||||
<text id="1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="569.8" y="345">1</tspan>
|
||||
</text>
|
||||
<text id="new-ArrayBuffer(16)" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
|
||||
<tspan x="330.8" y="26">new ArrayBuffer(16)</tspan>
|
||||
</text>
|
||||
<text id="ArrayBufferView" transform="translate(50.000000, 236.000000) rotate(-90.000000) translate(-50.000000, -236.000000) " font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
|
||||
<tspan x="-22" y="241">ArrayBufferView</tspan>
|
||||
</text>
|
||||
<text id="Uint16Array-Int16Arr" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="16" fill="#000000">
|
||||
<tspan x="115.3" y="172">Uint16Array</tspan>
|
||||
<tspan x="119.5" y="188">Int16Array</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-227-Copy-25" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="82" y="61" width="157" height="58"></rect>
|
||||
<text id="Uint8Array-Int8Array" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="119.5" y="79">Uint8Array</tspan>
|
||||
<tspan x="123.7" y="94">Int8Array</tspan>
|
||||
<tspan x="90.1" y="109">Uint8ClampedArray</tspan>
|
||||
</text>
|
||||
<text id="Uint32Array-Int32Arr" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="16" fill="#000000">
|
||||
<tspan x="114.3" y="248">Uint32Array</tspan>
|
||||
<tspan x="118.5" y="264">Int32Array</tspan>
|
||||
<tspan x="110.1" y="280">Float32Array</tspan>
|
||||
</text>
|
||||
<path d="M82,328 L82,356 L238,356 L238,328 L82,328 Z" id="Rectangle-227-Copy-24" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
|
||||
<rect id="Rectangle-227-Copy-27" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="238" y="391" width="449" height="28"></rect>
|
||||
<path d="M82,391 L82,419 L238,419 L238,391 L82,391 Z" id="Rectangle-227-Copy-26" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
|
||||
<text id="Float64Array-Copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="111.1" y="345">Float64Array</tspan>
|
||||
</text>
|
||||
<text id="DataView" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="128.4" y="408">DataView</tspan>
|
||||
</text>
|
||||
<text id="get/setUint8(offset)" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="243.3" y="409">get/setUint8(offset) get/setFloat32(offset)...</tspan>
|
||||
</text>
|
||||
<text id="BufferSource" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
|
||||
<tspan x="11.4" y="28">BufferSource</tspan>
|
||||
</text>
|
||||
<path id="Line-2" d="M48.5,93.5 L48.5,42.5 L51.5,42.5 L51.5,93.5 L59.5,93.5 L50,112.5 L40.5,93.5 L48.5,93.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
|
||||
<path id="Line-2-Copy" d="M192.5,25.5 L143.5,25.5 L143.5,22.5 L192.5,22.5 L192.5,14.5 L211.5,24 L192.5,33.5 L192.5,25.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
|
||||
<text id="1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="276.8" y="92">1</tspan>
|
||||
</text>
|
||||
<text id="0" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="249.8" y="92">0</tspan>
|
||||
</text>
|
||||
<text id="2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="304.8" y="92">2</tspan>
|
||||
</text>
|
||||
<text id="3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="332.8" y="92">3</tspan>
|
||||
</text>
|
||||
<text id="4" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="360.8" y="92">4</tspan>
|
||||
</text>
|
||||
<text id="5" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="388.8" y="92">5</tspan>
|
||||
</text>
|
||||
<text id="6" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="416.8" y="92">6</tspan>
|
||||
</text>
|
||||
<text id="7" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="444.8" y="92">7</tspan>
|
||||
</text>
|
||||
<text id="8" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="471.8" y="92">8</tspan>
|
||||
</text>
|
||||
<text id="9" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="499.8" y="92">9</tspan>
|
||||
</text>
|
||||
<text id="10" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="524.6" y="92">10</tspan>
|
||||
</text>
|
||||
<text id="11" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="551.6" y="92">11</tspan>
|
||||
</text>
|
||||
<text id="12" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="579.6" y="92">12</tspan>
|
||||
</text>
|
||||
<text id="13" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="608.6" y="92">13</tspan>
|
||||
</text>
|
||||
<text id="14" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="636.6" y="92">14</tspan>
|
||||
</text>
|
||||
<text id="15" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="663.6" y="92">15</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 98 KiB |
Before Width: | Height: | Size: 16 KiB |
150
4-binary/01-arraybuffer-binary-arrays/arraybuffer-views.svg
Normal file
|
@ -0,0 +1,150 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="603px" height="286px" viewBox="0 0 603 286" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>arraybuffer-views.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="binary" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="arraybuffer-views.svg">
|
||||
<rect id="Rectangle" stroke-opacity="0.35" stroke="#979797" fill="#F2F2F2" x="127.5" y="52.5" width="448" height="198"></rect>
|
||||
<rect id="Rectangle-227" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="126" y="72" width="31" height="28"></rect>
|
||||
<rect id="Rectangle-227-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="157" y="72" width="28" height="28"></rect>
|
||||
<rect id="Rectangle-227-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="185" y="72" width="28" height="28"></rect>
|
||||
<rect id="Rectangle-227-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="213" y="72" width="28" height="28"></rect>
|
||||
<rect id="Rectangle-227" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="241" y="72" width="28" height="28"></rect>
|
||||
<rect id="Rectangle-227-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="269" y="72" width="28" height="28"></rect>
|
||||
<rect id="Rectangle-227-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="297" y="72" width="28" height="28"></rect>
|
||||
<rect id="Rectangle-227-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="325" y="72" width="28" height="28"></rect>
|
||||
<rect id="Rectangle-227" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="352" y="72" width="28" height="28"></rect>
|
||||
<rect id="Rectangle-227-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="380" y="72" width="28" height="28"></rect>
|
||||
<rect id="Rectangle-227-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="408" y="72" width="28" height="28"></rect>
|
||||
<rect id="Rectangle-227-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="436" y="72" width="28" height="28"></rect>
|
||||
<rect id="Rectangle-227" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="464" y="72" width="28" height="28"></rect>
|
||||
<rect id="Rectangle-227-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="492" y="72" width="28" height="28"></rect>
|
||||
<rect id="Rectangle-227-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="520" y="72" width="28" height="28"></rect>
|
||||
<rect id="Rectangle-227-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="548" y="72" width="28" height="28"></rect>
|
||||
<rect id="Rectangle-227-Copy-19" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="126" y="116" width="59" height="28"></rect>
|
||||
<rect id="Rectangle-227-Copy-22" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="21" y="116" width="107" height="28"></rect>
|
||||
<rect id="Rectangle-227-Copy-17" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="185" y="116" width="56" height="28"></rect>
|
||||
<rect id="Rectangle-227-Copy-15" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="241" y="116" width="56" height="28"></rect>
|
||||
<text id="1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="166.8" y="89">1</tspan>
|
||||
</text>
|
||||
<text id="0" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="139.8" y="89">0</tspan>
|
||||
</text>
|
||||
<text id="0-copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="152.8" y="134">0</tspan>
|
||||
</text>
|
||||
<text id="2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="264.8" y="134">2</tspan>
|
||||
</text>
|
||||
<text id="1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="209.8" y="134">1</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-227-Copy-13" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="297" y="116" width="56" height="28"></rect>
|
||||
<text id="3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="320.8" y="134">3</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-227-Copy-11" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="352" y="116" width="56" height="28"></rect>
|
||||
<rect id="Rectangle-227-Copy-9" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="408" y="116" width="56" height="28"></rect>
|
||||
<rect id="Rectangle-227-Copy-7" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="464" y="116" width="56" height="28"></rect>
|
||||
<rect id="Rectangle-227-Copy-5" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="520" y="116" width="56" height="28"></rect>
|
||||
<text id="2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="194.8" y="89">2</tspan>
|
||||
</text>
|
||||
<text id="3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="222.8" y="89">3</tspan>
|
||||
</text>
|
||||
<text id="4" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="250.8" y="89">4</tspan>
|
||||
</text>
|
||||
<text id="5" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="278.8" y="89">5</tspan>
|
||||
</text>
|
||||
<text id="6" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="306.8" y="89">6</tspan>
|
||||
</text>
|
||||
<text id="7" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="334.8" y="89">7</tspan>
|
||||
</text>
|
||||
<text id="8" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="361.8" y="89">8</tspan>
|
||||
</text>
|
||||
<text id="9" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="389.8" y="89">9</tspan>
|
||||
</text>
|
||||
<text id="10" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="413.6" y="89">10</tspan>
|
||||
</text>
|
||||
<text id="11" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="440.6" y="89">11</tspan>
|
||||
</text>
|
||||
<text id="12" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="469.6" y="89">12</tspan>
|
||||
</text>
|
||||
<text id="13" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="497.6" y="89">13</tspan>
|
||||
</text>
|
||||
<text id="14" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="525.6" y="89">14</tspan>
|
||||
</text>
|
||||
<text id="15" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="553.6" y="89">15</tspan>
|
||||
</text>
|
||||
<text id="4" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="374.8" y="134">4</tspan>
|
||||
</text>
|
||||
<text id="5" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="430.8" y="134">5</tspan>
|
||||
</text>
|
||||
<text id="6" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="486.8" y="134">6</tspan>
|
||||
</text>
|
||||
<text id="7" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="543.8" y="134">7</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-227-Copy-20" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="125" y="160" width="116" height="28"></rect>
|
||||
<rect id="Rectangle-227-Copy-23" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="21" y="160" width="106" height="28"></rect>
|
||||
<rect id="Rectangle-227-Copy-16" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="241" y="160" width="112" height="28"></rect>
|
||||
<text id="0-copy-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="180.8" y="178">0</tspan>
|
||||
</text>
|
||||
<text id="1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="291.8" y="178">1</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-227-Copy-12" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="352" y="160" width="112" height="28"></rect>
|
||||
<rect id="Rectangle-227-Copy-8" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="464" y="160" width="112" height="28"></rect>
|
||||
<text id="2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="403.8" y="178">2</tspan>
|
||||
</text>
|
||||
<text id="3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="516.8" y="178">3</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-227-Copy-21" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="126" y="204" width="227" height="28"></rect>
|
||||
<text id="0" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="237.8" y="222">0</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-227-Copy-14" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="352" y="204" width="224" height="28"></rect>
|
||||
<text id="1" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="458.8" y="221">1</tspan>
|
||||
</text>
|
||||
<text id="new-ArrayBuffer(16)" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="121.7" y="38">new ArrayBuffer(16)</tspan>
|
||||
</text>
|
||||
<text id="Uint16Array" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="28.3" y="133">Uint16Array</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-227-Copy-25" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="21" y="72" width="107" height="28"></rect>
|
||||
<text id="Uint8Array" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="32.5" y="89">Uint8Array</tspan>
|
||||
</text>
|
||||
<text id="Uint32Array" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="27.3" y="177">Uint32Array</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-227-Copy-24" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="21" y="204" width="106" height="28"></rect>
|
||||
<text id="Float64Array" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#000000">
|
||||
<tspan x="23.1" y="221">Float64Array</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 40 KiB |
|
@ -41,7 +41,7 @@ For instance:
|
|||
|
||||
So, the binary data in an `ArrayBuffer` of 16 bytes can be interpreted as 16 "tiny numbers", or 8 bigger numbers (2 bytes each), or 4 even bigger (4 bytes each), or 2 floating-point values with high precision (8 bytes each).
|
||||
|
||||

|
||||

|
||||
|
||||
`ArrayBuffer` is the core object, the root of everything, the raw binary data.
|
||||
|
||||
|
@ -157,13 +157,13 @@ For instance, let's try to put 256 into `Uint8Array`. In binary form, 256 is `10
|
|||
|
||||
For bigger numbers, only the rightmost (less significant) 8 bits are stored, and the rest is cut off:
|
||||
|
||||

|
||||

|
||||
|
||||
So we'll get zero.
|
||||
|
||||
For 257, the binary form is `100000001` (9 bits), the rightmost 8 get stored, so we'll have `1` in the array:
|
||||
|
||||

|
||||

|
||||
|
||||
In other words, the number modulo 2<sup>8</sup> is saved.
|
||||
|
||||
|
@ -266,4 +266,4 @@ We'll see these terms in the next chapters. `BufferSource` is one of the most co
|
|||
|
||||
Here's a cheatsheet:
|
||||
|
||||

|
||||

|
||||
|
|
|
@ -6,7 +6,7 @@ In the browser, there are additional higher-level objects, described in [File AP
|
|||
|
||||
`Blob` consists of an optional string `type` (a MIME-type usually), plus `blobParts` -- a sequence of other `Blob` objects, strings and `BufferSources`.
|
||||
|
||||

|
||||

|
||||
|
||||
The constructor syntax is:
|
||||
|
||||
|
|
Before Width: | Height: | Size: 10 KiB |
51
4-binary/03-blob/blob.svg
Normal file
|
@ -0,0 +1,51 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="659px" height="111px" viewBox="0 0 659 111" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
|
||||
<title>blob.svg</title>
|
||||
<desc>Created with sketchtool.</desc>
|
||||
<g id="binary" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="blob.svg">
|
||||
<rect id="Rectangle-227" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="108" y="56" width="96" height="28"></rect>
|
||||
<text id="image/png" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
|
||||
<tspan x="113.8" y="74">image/pn</tspan>
|
||||
<tspan x="190.6" y="74" letter-spacing="3">g</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-227" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="238" y="56" width="71" height="28"></rect>
|
||||
<text id="blob1" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
|
||||
<tspan x="250" y="74">blob1</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-227-Copy" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="308" y="56" width="71" height="28"></rect>
|
||||
<text id="blob2" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
|
||||
<tspan x="320" y="74">blob2</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-227-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="475" y="56" width="71" height="28"></rect>
|
||||
<text id="str" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
|
||||
<tspan x="497.1" y="74">str</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-227-Copy-4" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="546" y="56" width="71" height="28"></rect>
|
||||
<text id="buffer" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
|
||||
<tspan x="553.7" y="74">buffer</tspan>
|
||||
</text>
|
||||
<rect id="Rectangle-227-Copy-2" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="379" y="56" width="96" height="28"></rect>
|
||||
<text id="..." font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal" fill="#000000">
|
||||
<tspan x="413.1" y="74">...</tspan>
|
||||
</text>
|
||||
<text id="type" font-family="OpenSans-Regular, Open Sans" font-size="20" font-weight="normal" fill="#000000">
|
||||
<tspan x="135.692383" y="24">type</tspan>
|
||||
</text>
|
||||
<text id="Blob" font-family="OpenSans-Regular, Open Sans" font-size="20" font-weight="normal" fill="#000000">
|
||||
<tspan x="24.8232422" y="76">Blob</tspan>
|
||||
</text>
|
||||
<text id="blobParts" font-family="OpenSans-Regular, Open Sans" font-size="20" font-weight="normal" fill="#000000">
|
||||
<tspan x="378.209961" y="24">blobParts</tspan>
|
||||
</text>
|
||||
<text id="+" font-family="OpenSans-Regular, Open Sans" font-size="20" font-weight="normal" fill="#D0021B">
|
||||
<tspan x="216.782227" y="77">+</tspan>
|
||||
</text>
|
||||
<text id="=" font-family="OpenSans-Regular, Open Sans" font-size="20" font-weight="normal" fill="#D0021B">
|
||||
<tspan x="77.7822266" y="77">=</tspan>
|
||||
</text>
|
||||
<path d="M239,45 C320.340278,38.3333333 382.673611,35 426,35 C469.326389,35 531.659722,38.3333333 613,45" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 3.6 KiB |
Before Width: | Height: | Size: 23 KiB |