big updat:

- update dependencies
- add webp support and webp conversion for profile images

node_modules/gifuct-js/demo/demo.js

@@ -0,0 +1,230 @@
+import { parseGIF, decompressFrames } from '../lib/index.js'
+
+// user canvas
+var c = document.getElementById('c')
+var ctx = c.getContext('2d')
+// gif patch canvas
+var tempCanvas = document.createElement('canvas')
+var tempCtx = tempCanvas.getContext('2d')
+// full gif canvas
+var gifCanvas = document.createElement('canvas')
+var gifCtx = gifCanvas.getContext('2d')
+
+var url = document.getElementById('url')
+// default gif
+url.value = '/demo/horses.gif'
+
+document.getElementById('loadGIF').onclick = loadGIF
+document.getElementById('playpause').onclick = playpause
+document.getElementById('edgedetect').onchange = () => {
+  bEdgeDetect = !bEdgeDetect
+}
+document.getElementById('grayscale').onchange = () => {
+  bGrayscale = !bGrayscale
+}
+document.getElementById('invert').onchange = () => {
+  bInvert = !bInvert
+}
+document.getElementById('pixels').onchange = e => {
+  pixelPercent = e.target.value
+}
+
+// load the default gif
+loadGIF()
+var gif
+
+// load a gif with the current input url value
+function loadGIF() {
+  var oReq = new XMLHttpRequest()
+  oReq.open('GET', url.value, true)
+  oReq.responseType = 'arraybuffer'
+
+  oReq.onload = function(oEvent) {
+    var arrayBuffer = oReq.response // Note: not oReq.responseText
+    if (arrayBuffer) {
+      gif = parseGIF(arrayBuffer)
+      var frames = decompressFrames(gif, true)
+      // render the gif
+      renderGIF(frames)
+    }
+  }
+
+  oReq.send(null)
+}
+
+var playing = false
+var bEdgeDetect = false
+var bInvert = false
+var bGrayscale = false
+var pixelPercent = 100
+var loadedFrames
+var frameIndex
+
+function playpause() {
+  playing = !playing
+  if (playing) {
+    renderFrame()
+  }
+}
+
+function renderGIF(frames) {
+  loadedFrames = frames
+  frameIndex = 0
+
+  c.width = frames[0].dims.width
+  c.height = frames[0].dims.height
+
+  gifCanvas.width = c.width
+  gifCanvas.height = c.height
+
+  if (!playing) {
+    playpause()
+  }
+}
+
+var frameImageData
+
+function drawPatch(frame) {
+  var dims = frame.dims
+
+  if (
+    !frameImageData ||
+    dims.width != frameImageData.width ||
+    dims.height != frameImageData.height
+  ) {
+    tempCanvas.width = dims.width
+    tempCanvas.height = dims.height
+    frameImageData = tempCtx.createImageData(dims.width, dims.height)
+  }
+
+  // set the patch data as an override
+  frameImageData.data.set(frame.patch)
+
+  // draw the patch back over the canvas
+  tempCtx.putImageData(frameImageData, 0, 0)
+
+  gifCtx.drawImage(tempCanvas, dims.left, dims.top)
+}
+
+var edge = function(data, output) {
+  var odata = output.data
+  var width = gif.lsd.width
+  var height = gif.lsd.height
+
+  var conv = [-1, -1, -1, -1, 8, -1, -1, -1, -1]
+  var halfside = Math.floor(3 / 2)
+
+  for (var y = 0; y < height; y++) {
+    for (var x = 0; x < width; x++) {
+      var r = 0,
+        g = 0,
+        b = 0
+      for (var cy = 0; cy < 3; cy++) {
+        for (var cx = 0; cx < 3; cx++) {
+          var scy = y - halfside + cy
+          var scx = x - halfside + cx
+
+          if (scy >= 0 && scy < height && scx >= 0 && scx < width) {
+            var src = (scy * width + scx) * 4
+            var f = cy * 3 + cx
+            r += data[src] * conv[f]
+            g += data[src + 1] * conv[f]
+            b += data[src + 2] * conv[f]
+          }
+        }
+      }
+
+      var i = (y * width + x) * 4
+      odata[i] = r
+      odata[i + 1] = g
+      odata[i + 2] = b
+      odata[i + 3] = 255
+    }
+  }
+
+  return output
+}
+
+var invert = function(data) {
+  for (var i = 0; i < data.length; i += 4) {
+    data[i] = 255 - data[i] // red
+    data[i + 1] = 255 - data[i + 1] // green
+    data[i + 2] = 255 - data[i + 2] // blue
+    data[i + 3] = 255
+  }
+}
+
+var grayscale = function(data) {
+  for (var i = 0; i < data.length; i += 4) {
+    var avg = (data[i] + data[i + 1] + data[i + 2]) / 3
+    data[i] = avg // red
+    data[i + 1] = avg // green
+    data[i + 2] = avg // blue
+    data[i + 3] = 255
+  }
+}
+
+function manipulate() {
+  var imageData = gifCtx.getImageData(0, 0, gifCanvas.width, gifCanvas.height)
+  var other = gifCtx.createImageData(gifCanvas.width, gifCanvas.height)
+
+  if (bEdgeDetect) {
+    imageData = edge(imageData.data, other)
+  }
+
+  if (bInvert) {
+    invert(imageData.data)
+  }
+
+  if (bGrayscale) {
+    grayscale(imageData.data)
+  }
+
+  // do pixelation
+  var pixelsX = 5 + Math.floor((pixelPercent / 100) * (c.width - 5))
+  var pixelsY = (pixelsX * c.height) / c.width
+
+  if (pixelPercent != 100) {
+    ctx.mozImageSmoothingEnabled = false
+    ctx.webkitImageSmoothingEnabled = false
+    ctx.imageSmoothingEnabled = false
+  }
+
+  ctx.putImageData(imageData, 0, 0)
+  ctx.drawImage(c, 0, 0, c.width, c.height, 0, 0, pixelsX, pixelsY)
+  ctx.drawImage(c, 0, 0, pixelsX, pixelsY, 0, 0, c.width, c.height)
+}
+
+function renderFrame() {
+  // get the frame
+  var frame = loadedFrames[frameIndex]
+
+  var start = new Date().getTime()
+  
+  if (frame.disposalType ===  2) {
+    gifCtx.clearRect(0, 0, c.width, c.height)
+  }
+
+  // draw the patch
+  drawPatch(frame)
+
+  // perform manipulation
+  manipulate()
+
+  // update the frame index
+  frameIndex++
+  if (frameIndex >= loadedFrames.length) {
+    frameIndex = 0
+  }
+
+  var end = new Date().getTime()
+  var diff = end - start
+
+  if (playing) {
+    // delay the next gif frame
+    setTimeout(function() {
+      requestAnimationFrame(renderFrame)
+      //renderFrame();
+    }, Math.max(0, Math.floor(frame.delay - diff)))
+  }
+}

node_modules/gifuct-js/demo/index.html

@@ -0,0 +1,29 @@
+<html>
+  <head>
+    <title>gifuct-js demo</title>
+  </head>
+  <body>
+    <div>
+      <canvas id="c"></canvas>
+    </div>
+    <div style="margin: 10px 0;">
+      <input id="url" type="text" />
+      <button id="loadGIF">Load</button>
+      <button id="playpause">Play/Pause</button>
+    </div>
+    <div style="margin-bottom: 10px;">
+      <input id="edgedetect" type="checkbox" />
+      Edge Detect
+      <input id="invert" type="checkbox" />
+      Invert Colours
+      <input id="grayscale" type="checkbox" />
+      Grayscale
+    </div>
+    <div>
+      <input id="pixels" type="range" min="0" max="100" step="1" value="100" />
+      Pixelate Amount
+    </div>
+
+    <script src="demo.build.js"></script>
+  </body>
+</html>