crescent/lib/Picture/index.js

JavaScript images Binarization/Comparsion

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Results = exports.Results = function (_Array) {
  _inherits(Results, _Array);

  function Results(arr) {
    var _Object$getPrototypeO;

    _classCallCheck(this, Results);

    var _this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Results)).call.apply(_Object$getPrototypeO, [this].concat(_toConsumableArray(arr))));

    _this.debug = function (context) {
      if (typeof context.open != "function") return;
      if (_this.length == 0) return;
      var canvas = document.createElement('canvas');
      canvas.width = _this[0].frame.width * 5;
      canvas.height = _this[0].frame.height * _this.length;
      var ctx = canvas.getContext('2d');
      ctx.fillStyle = "white";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "black";
      _this.map(function (result, i) {
        ctx.putImageData(new ImageData(result.diff, result.frame.width, result.frame.height), 0, result.frame.height * i, 0, 0, result.frame.width, result.frame.height);
        ctx.font = "12px Helvetica";
        ctx.fillText('' + result.score, result.frame.width + 8, result.frame.height * (i + 1) - 2);
      });
      var uri = canvas.toDataURL();
      window.open(uri);
    };
    return _this;
  }
  /* XXX: why it doesn't work?
  debug(context) {
  }
  */


  return Results;
}(Array);

var Picture = function () {
  function Picture(data) {
    var _this2 = this;

    _classCallCheck(this, Picture);

    this.canvas = document.createElement('canvas');
    var img = new Image();
    this.initialized = new Promise(function (resolve) {
      img.onload = function () {
        _this2.canvas.width = img.width;
        _this2.canvas.height = img.height;
        _this2.frame = {
          width: img.width,
          height: img.height
        };
        var ctx = _this2.canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, img.width, img.height);
        _this2.bytes = ctx.getImageData(0, 0, img.width, img.height).data;
        // For Safari
        if (_this2.bytes.slice !== 'function') _this2.bytes.slice = Array.prototype.slice;
        resolve(_this2);
      };
    });
    img.src = data;
  }

  _createClass(Picture, [{
    key: 'hello',
    value: function hello() {
      return 'hello, this is crescent.Image';
    }
  }, {
    key: 'getBrightness',
    value: function getBrightness(r, g, b, a) {
      return (r + g + a) / 3 * (a / 255);
    }
  }, {
    key: 'binarize',
    value: function binarize() {
      var threshold = arguments.length <= 0 || arguments[0] === undefined ? 140 : arguments[0];

      for (var i = 0; i < this.bytes.length; i += 4) {
        var brightness = this.getBrightness.apply(this, _toConsumableArray(this.bytes.slice(i, i + 4)));
        if (brightness > threshold) {
          this.bytes[i] = this.bytes[i + 1] = this.bytes[i + 2] = 255; // WHITE
        } else {
          this.bytes[i] = this.bytes[i + 1] = this.bytes[i + 2] = 0; // BLACK
        }
        // anyway
        this.bytes[i + 3] = 255;
      }
      this.binarized = true;
      // console.log(this.bytes);
      return this;
    }
  }, {
    key: 'chunks',
    value: function chunks() {
      var pool = [];
      for (var i = 0; i < this.bytes.length; i += 4) {
        pool.push(this.bytes.slice(i, i + 4));
      }
      return pool;
    }
  }, {
    key: 'compareTo',
    value: function compareTo() {
      var _this3 = this;

      for (var _len = arguments.length, pics = Array(_len), _key = 0; _key < _len; _key++) {
        pics[_key] = arguments[_key];
      }

      var tasks = pics.map(function (pic) {
        return _this3.compare(pic);
      });
      return Promise.all(tasks).then(function (results) {
        return Promise.resolve(new Results(results));
      });
    }
  }, {
    key: 'compare',
    value: function compare(pic) {
      var _mychunks = this.chunks();
      var yourchunks = pic.chunks();
      var diffchunks = Uint8ClampedArray.from(this.bytes);
      if (this.binarized) {
        var totalscore = _mychunks.map(function (chunk, i) {
          var abs = Math.abs(chunk[0] - yourchunks[i][0]);
          diffchunks[i * 4 + 0] = abs;
          diffchunks[i * 4 + 1] = abs;
          diffchunks[i * 4 + 2] = abs;
          diffchunks[i * 4 + 3] = 255;
          return abs;
        }).reduce(function (total, score) {
          return total + score;
        }) / _mychunks.length;
        return Promise.resolve({
          frame: _extends({}, this.frame),
          diff: diffchunks,
          score: (255 - totalscore) / 255
        });
      }
      return Promise.resolve({});
    }
  }, {
    key: 'debug',
    value: function debug() {
      var _this4 = this;

      this.open = function () {
        var ctx = _this4.canvas.getContext('2d');
        ctx.putImageData(new ImageData(_this4.bytes, _this4.canvas.width, _this4.canvas.height), 0, 0);
        var uri = _this4.canvas.toDataURL();
        if (window && typeof window.open == 'function') window.open(uri);else console.log(uri);
        return Promise.resolve();
      };
      return this;
    }
  }], [{
    key: 'init',
    value: function init(data) {
      var pic = new Picture(data);
      return pic.initialized;
    }
  }]);

  return Picture;
}();

exports.default = Picture;