pptx_image_extractor.html

<input type="file" />

<script src="zip.js/zip.js"></script>

<script>
'use strict';

zip.workerScriptsPath = 'zip.js/';

function getZipEntries(file) {
  return new Promise(function (resolve, reject) {
    zip.createReader(new zip.BlobReader(file), done, reject);
    
    function done(reader) {
      reader.getEntries(resolve);
    }
  });
}

function isImageEntry(entry) {
  return /\.(?:png|jpg)$/.test(entry.filename);
}

function getFileExtension(filename) {
  return filename.split('.').slice(-1)[0];
}

function extensionToMIME(ext) {
  switch (ext) {
  case 'png':
    return 'image/png';
  case 'jpg':
    return 'image/jpg';
  default:
    return 'undefined';
  }
}

function entryToBlob(entry) {
  return new Promise(function (resolve, reject) {
    entry.getData(new zip.BlobWriter(), done);
    
    function done(blob) {
      var ext = getFileExtension(entry.filename);
      var mime = extensionToMIME(ext);
      
      resolve(blobWithMIME(mime)(blob));
    }
  });
}

function blobToURL(blob) {
  return URL.createObjectURL(blob);
}

function imageFromURL(url) {
  return new Promise(function (resolve, reject) {
    var img = new Image();
    
    img.addEventListener('load', done);
    img.src = url;
    
    function done() {
      resolve(img);
    }
  });
}

function createCanvas(width, height) {
  var canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  return canvas;
}

function createImage(url) {
  var img = new Image();
  img.src = url;
  return img;
}

function resizeImageToB64(width, height, mime) {
  return function (image) {
    var canvas = createCanvas(width, height);
    var ctx = canvas.getContext('2d');
    
    ctx.drawImage(image, 0, 0, width, height);
    
    var url = canvas.toDataURL(mime || 'image/png');
    
    var i = url.indexOf(',');
    var b64 = url.slice(i + 1);
    
    return b64;
  }
}

function b64ToBlob(b64) {
  var bin = atob(b64);
  var data = new Uint8Array(bin.length);
  
  for (var i = 0; i < bin.length; ++i) {
    data[i] = bin.charCodeAt(i);
  }
  
  var blob = new Blob([data]);
  
  return blob;
}

function blobWithMIME(mime) {
  return function (blob) {
    return new Blob([blob], { type: mime });
  };
}

function zipBlobs(blobs) {
  return new Promise(function (resolve, reject) {
    var index = 0;
    
    zip.createWriter(new zip.BlobWriter(), gotWriter);
    
    function gotWriter(writer) {
      beginWriting(writer);
    }
    
    function beginWriting(writer) {
      function loop() {
        if (index === blobs.length) {
          return writer.close(gotZip);
        }
        
        var name = 'img' + index + '.png';
        var blob = blobs[index];
        
        index += 1;
        
        writer.add(name, new zip.BlobReader(blob), loop);
      }
      
      loop();
    }
    
    function gotZip(blob) {
      resolve(new Blob([blob], { type: 'application/zip' }));
    }
  });
}

function promptDownloadURL(filename, url) {
  var link = document.createElement('a');
  link.href = url;
  link.download = filename;
  
  document.body.appendChild(link);
  
  link.click();
  
  document.body.removeChild(link);
}

function work(file) {
  getZipEntries(file)
    .then(function (entries) {
      return Promise.all(
        entries
          .filter(isImageEntry)
          .map(entryToBlob)
      );
    })
    .then(function (blobs) {
      return Promise.all(
        blobs
          .map(blobToURL)
          .map(imageFromURL)
      );
    })
    .then(function (images) {
      var blobs =
        images
          .map(resizeImageToB64(1920, 1080, 'image/png'))
          .map(b64ToBlob)
          .map(blobWithMIME('image/png'));
      
      return zipBlobs(blobs);
    })
    .then(function (zip) {
      var url = blobToURL(zip);
      promptDownloadURL('images.zip', url);
    })
    .catch(function (err) {
      alert(err);
    });
}

function main() {
  var input = document.querySelector('input');
  
  input.addEventListener('change', function () {
    var file = input.files[0];
    
    work(file);
  });
}

window.addEventListener('load', main);

</script>