test script for generating thumbnails in an electron app

thumbnails.js

//updated to save thumbnails!

var h = require('hyperscript')
var fs = require('fs')
var pull = require('pull-stream')
var paramap = require('pull-paramap')
var path = require('path')

//XXX note, I added `module.exports = downsample` to the bottom of this file, TODO: make PR
var downsample = require('downscale/src/downsample')

var dir = process.argv[2], pool = []
fs.readdir(dir, function (err, ls) {
  var canvas = document.createElement('canvas')
  var canvas2 = document.createElement('canvas')
  canvas.width = 50
  canvas.height = 50
  var ctx = canvas.getContext('2d')
  var start = Date.now()
  document.head.appendChild(h('style', {textContent: 'body { margin: 0px; line-height: 0px; }'}))
  var content = h('div')
  var perf = h('h1'), size = 0, size2 = 0
  document.body.appendChild(h('div', perf, content))
  try {
  fs.mkdirSync(path.join(dir, '.thumbnails'))
  } catch (_) {}
  pull(
    pull.values(ls),
    paramap(function (file, cb) {
      var base = path.basename(file)
      var thumbnail = path.join(dir,'.thumbnails', file)
      fs.stat(thumbnail, function (err, stat) {
        if(err) return cb(null, file)
        else return cb(null, thumbnail)
      })
    }),
    paramap(function (file, cb) {
      if(/.thumbnail/.test(file)) return cb(null, h('img', {src: file}))

      var img = pool.length ? pool.shift() : h('img')
      img.src = path.resolve(dir, file)
      img.onload = function (ev) {
        var size = Math.min(img.width, img.height)
        size2 += img.width * img.height
        if(true) {
          ctx.drawImage(img, (img.width - size)/2, (img.height - size)/2, size, size, 0, 0, canvas.width, canvas.height)
        } else {
          //
          canvas2.width = size
          canvas2.height = size
          var ctx2 = canvas2.getContext('2d') 
          ctx2.drawImage(img, (img.width - size)/2, (img.height - size)/2, size, size, 0, 0, size, size)
          ctx.putImageData(downsample(ctx2.getImageData(0,0,size,size), canvas.width, canvas.height, 0, 0, size, size), 0, 0)
        }
        img.onerror = img.onload = null
        pool.push(img)
        var data = canvas.toDataURL('image/jpg')
        data = data.substring(data.indexOf(',')+1)
        var thumbnail = path.join(dir, '.thumbnails', file)
        fs.writeFile(thumbnail, new Buffer(data, 'base64'), function (err) {
          cb(null, h('img', {src:  thumbnail}))
        })
      }
      img.onerror = function (ev) {
        cb(null)
      }
    }, 32, false),
    pull.filter(),
    pull.drain(function (img) {
      content.appendChild(img)
      var count = content.children.length
      var time = (Date.now()-start)/1000
      size += (Math.round(img.src.length/1000))/1000
      perf.textContent = [count, size.toString().substring(0, 5), ((Math.round(size2/1000))/1000).toString().substring(0, 5), time, count/time].join(', ')
    }, function (err) {
      if(err) throw err
    })
  )
})

Whether you’re a longtime fan of classic block puzzles or someone looking for a relaxing yet stimulating game, blocky blast puzzle offers the perfect blend of fun and strategy.

Nice improvement—saving thumbnails will definitely help performance. The Node + DOM mix is interesting though; feels a bit experimental, almost like hacking mechanics together in Crossy Road until it works Curious to see how you handle the runtime edge cases.

I really found it interesting when they mentioned that saving thumbnails will help performance. If the Node and DOM mix feels like an experiment, I'm curious about how they will tackle runtime issues. It's like experiencing tinkering magic! Audio To Text

mad drive captures the thrill of overcoming impossible odds. With clever level design and physics-based gameplay, Drive Mad makes every successful finish feel earned, rewarding players who stay calm, focused, and determined under pressure.