image-service.js

app.service('imageService', function ($http, $q, $timeout) {
  var options = {};
  this.createThumb = function(img, width, height){
      self = {};
      options.thumbnailWidth = width;
      options.thumbnailHeight = height;
      self.resultD = $q.defer();
      $timeout(function () { thumb(self, img) });
      return self.resultD.promise;
  };

  function resize(img) {
    var info, srcRatio, trgRatio;
    info = {
      srcX: 0,
      srcY: 0,
      srcWidth: img.width,
      srcHeight: img.height
    };
    srcRatio = img.width / img.height;
    info.optWidth = options.thumbnailWidth;
    info.optHeight = options.thumbnailHeight;
    if ((info.optWidth == null) && (info.optHeight == null)) {
      info.optWidth = info.srcWidth;
      info.optHeight = info.srcHeight;
    } else if (info.optWidth == null) {
      info.optWidth = srcRatio * info.optHeight;
    } else if (info.optHeight == null) {
      info.optHeight = (1 / srcRatio) * info.optWidth;
    }
    trgRatio = info.optWidth / info.optHeight;
    /*
    if (img.height < info.optHeight || img.width < info.optWidth) {
      info.trgHeight = info.srcHeight;
      info.trgWidth = info.srcWidth;
    } else {
    */
      if (srcRatio > trgRatio) {
        info.srcHeight = img.height;
        info.srcWidth = info.srcHeight * trgRatio;
      } else {
        info.srcWidth = img.width;
        info.srcHeight = info.srcWidth / trgRatio;
      }
    //}
    info.srcX = (img.width - info.srcWidth) / 2;
    info.srcY = (img.height - info.srcHeight) / 2;
    return info;
  }

  function thumb(self, img){
      var canvas, ctx, resizeInfo, thumbnail, _ref, _ref1, _ref2, _ref3;
      resizeInfo = resize(img);
      if (resizeInfo.trgWidth == null) {
        resizeInfo.trgWidth = resizeInfo.optWidth;
      }
      if (resizeInfo.trgHeight == null) {
        resizeInfo.trgHeight = resizeInfo.optHeight;
      }
      console.log( resizeInfo);
      canvas = document.createElement("canvas");
      ctx = canvas.getContext("2d");
      canvas.width = resizeInfo.trgWidth;
      canvas.height = resizeInfo.trgHeight;
      drawImageIOSFix(ctx, img, (_ref = resizeInfo.srcX) != null ? _ref : 0, (_ref1 = resizeInfo.srcY) != null ? _ref1 : 0, resizeInfo.srcWidth, resizeInfo.srcHeight, (_ref2 = resizeInfo.trgX) != null ? _ref2 : 0, (_ref3 = resizeInfo.trgY) != null ? _ref3 : 0, resizeInfo.trgWidth, resizeInfo.trgHeight);
      thumbnail = canvas.toDataURL("image/png");
      self.resultD.resolve(thumbnail);
    }


  function drawImageIOSFix (ctx, img, sx, sy, sw, sh, dx, dy, dw, dh) {
    var vertSquashRatio;
    vertSquashRatio = detectVerticalSquash(img);
    return ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh / vertSquashRatio);
  }

function detectVerticalSquash (img) {
    var alpha, canvas, ctx, data, ey, ih, iw, py, ratio, sy;
    iw = img.naturalWidth;
    ih = img.naturalHeight;
    canvas = document.createElement("canvas");
    canvas.width = 1;
    canvas.height = ih;
    ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    data = ctx.getImageData(0, 0, 1, ih).data;
    sy = 0;
    ey = ih;
    py = ih;
    while (py > sy) {
      alpha = data[(py - 1) * 4 + 3];
      if (alpha === 0) {
        ey = py;
      } else {
        sy = py;
      }
      py = (ey + sy) >> 1;
    }
    ratio = py / ih;
    if (ratio === 0) {
      return 1;
    } else {
      return ratio;
    }
  };
})