blob_concat.js

const collect = []

collect.push(Uint8Array.of(1,3,5,7))
collect.push(Uint8Array.of(2,4,6,8))
// ... and so on

// concat them in the end
const gif = new Blob(collect, { type: 'image/gif' })
URL.createObjectURL(gif)
// blob:http://..../041f1fac-eda4-4692-ba4d-b1ba47f3d442/

bytearray_to_blob.js

req.onload = () => {
  const buffer = req.response

  const byteArray = new Uint8Array(buffer)
  const blob = new Blob(buffer, { type: 'image/jpg' });
}

canvas_to_bytearray.js

const img = new Image();

img.src = '/cat.png'

img.addEventListener('load', () => {
  const canvas = document.createElement("canvas")
  canvas.width = img.width
  canvas.height = img.height

  const ctx = canvas.getContext("2d")
  ctx.drawImage(img, 0, 0)

  // dataUrl() basically inlines the image with base64
  const dataUrl = canvas.toDataURL("image/png")

  console.log(typeof dataUrl) // string

  // getImageData() extracts from the Canvas Context
  const imageData = ctx.getImageData(0,0, img.width, img.height)

  // the image data is in a TypedArray of UInt8ClampedArray
  console.log(imageData.data)

  // toBlob() is async, needs a few arguments:
  //    callback,
  //    mime type,
  //    quality
  const blob = canvas.toBlob((result) => {
    // we have a Blob!
    console.log(result);
  }, "image/png", 1)

})

cors_image.js

const img = new Image();

// make sure you have the proper CORS headers here
img.src = 'https://loremflickr.com/1200/720/nature'
img.crossOrigin = true;

img.addEventListener('load', () => {
  ...
})

crypto_encrypt.js

const my_secret_text = encoder.encode("wubba lubba dub dub!")

crypto.subtle
  .importKey(
    'raw',
    encoder.encode(pass),
    {
      name: "AES-GCM",
    },
    false,
    ["encrypt"]
  )
  .then(key => crypto.subtle.encrypt(
    {
      name: "AES-GCM",
      iv: initialization_vector,
    },
    key,
    my_secret_text
  ))
  .then(function(encrypted) {
    // here's our encrypted data in an ArrayBuffer
  })
  .catch(function(err) {
    console.error(err);
  });

crypto_importkey.js

crypto.subtle.importKey(
  'raw',
  encoder.encode(pass),
  {
    name: "AES-GCM",
  },
  false,
  ["encrypt"]
)
.then(key => { … })

crypto_initvector.js

  const encoder = new TextEncoder("utf-8")
  const pass = "password-has-to-be-128bit-long!!"
  const initialization_vector = window.crypto.getRandomValues(new Uint8Array(16))

fetch_stream.js

const url = 'https://loremflickr.com/1200/720/nature'
const req = new Request(url)
fetch(req)
  .then(response => {
    const reader = response.body.getReader()
    
    const reading = function ({done, value}) {
      if (!done) {
        console.log('chunk loaded, size:', value.length)
        processing(false, value)
        reader.read().then(reading)
      } else {
        console.log('loaded!')
        processing(true)
      }
    }
    reader.read().then(reading)
  })

subarray_vs_slice.js

const hugeBinary = await loadBinaryFrom(url)

hugeBinary.length
// 882957

const firstSliced = hugeBinary.slice(0, 16) // get the first 16 byte
const restSliced = hugeBinary.slice(16) // get the rest

const firstSub = hugeBinary.subarray(0, 16)
const restSub = hugeBinary.subarray(16)

firstSliced[0] = 0
// firstSliced is Uint8Array(16) [0, 255, 255, ...
// hugeBinary is Uint8Array(882957) [255, 255, 255, ...

firstSub[0] = 0
// firstSub is Uint8Array(16) [0, 255, 255, ...
// hugeBinary mutated!! to Uint8Array(882957) [0, 255, 255, ...

typedarray_concat.js

  const odd = Uint8Array.of(1,3,5,7)
  const even = Uint8Array.of(2,4,6,8)

  Uint8Array.of(...odd, ...even)
  // Uint8Array(8) [1, 3, 5, 7, 2, 4, 6, 8]

typedarray_set_vs_slice.js

  const data = Uint8Array.of(1,2,3,4,5,6,7)
  // our data is Uint8Array(7) [1, 2, 3, 4, 5, 6, 7]

  data.set([8,8,8], 2)
  // data is Uint8Array(7) [1, 2, 8, 8, 8, 6, 7]

  data.set([9,9,9,9], 5)
  // Uncaught RangeError: Source is too large
  //  at Uint8Array.set

xhr_to_arraybuffer.js

  const req = new XMLHttpRequest()
  req.open('GET', url, true)
  req.responseType = 'arraybuffer'

  req.onload = () => {
    const buffer = req.response
  }

  req.onerror = (error) => {
    throw error
  }

  req.send(null)