Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
@doodle/components / controls / Input / ImageUpload / imageHelper.js
Size: Mime:
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getCroppedImg = getCroppedImg;
Object.defineProperty(exports, "maxImageDimensions", {
  enumerable: true,
  get: function get() {
    return _config.maxImageDimensions;
  }
});
exports.validateImageDimensions = exports.validateFileSizeLimit = exports.readImageFile = exports.createImage = exports.canvasToBlobPolyfill = void 0;

var _config = require("./config");

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

// Polyfill for IE11
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob
var canvasToBlobPolyfill = function canvasToBlobPolyfill(fileType, fileName) {
  if (!HTMLCanvasElement.prototype.toBlob) {
    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
      value: function value(callback, type, quality) {
        var canvas = this;
        setTimeout(function () {
          var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]);
          var len = binStr.length;
          var arr = new Uint8Array(len);

          for (var i = 0; i < len; i += 1) {
            arr[i] = binStr.charCodeAt(i);
          }

          callback(new Blob([arr], {
            type: fileType,
            name: fileName
          }));
        });
      }
    });
  }
};

exports.canvasToBlobPolyfill = canvasToBlobPolyfill;

var createImage = function createImage(url) {
  return new Promise(function (resolve, reject) {
    var image = new Image();
    image.addEventListener('load', function () {
      return resolve(image);
    });
    image.addEventListener('error', function (error) {
      return reject(error);
    });
    image.setAttribute('crossOrigin', 'anonymous'); // needed to avoid cross-origin issues on CodeSandbox

    image.src = url;
  });
};
/**
 * Taken from the ReadMe at https://github.com/DominicTobias/react-image-crop
 * @param {File} image - Image File url
 * @param {Object} crop - crop Object provided by react-easy-crop
 */


exports.createImage = createImage;

function getCroppedImg(_x, _x2, _x3) {
  return _getCroppedImg.apply(this, arguments);
}
/**
 * Takes the file and creates a FileReader to read contents before attaching it to the created Image src
 * @param {File} file
 */


function _getCroppedImg() {
  _getCroppedImg = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(imageSrc, crop, fileType) {
    var image, canvas, scaleX, scaleY, ctx;
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return createImage(imageSrc);

          case 2:
            image = _context.sent;
            canvas = document.createElement('canvas');
            scaleX = image.naturalWidth / image.width;
            scaleY = image.naturalHeight / image.height;
            canvas.width = crop.width;
            canvas.height = crop.height;
            ctx = canvas.getContext('2d'); // fill canvas in white to prevent black backgrounds on jpg images

            ctx.fillStyle = '#fff';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(image, crop.x * scaleX, crop.y * scaleY, crop.width * scaleX, crop.height * scaleY, 0, 0, crop.width, crop.height);
            canvasToBlobPolyfill(fileType); // As a blob

            return _context.abrupt("return", new Promise(function (resolve) {
              canvas.toBlob(function (blob) {
                if (blob) {
                  blob.height = crop.height;
                  blob.width = crop.width;
                  resolve(blob);
                }
              }, fileType, 1);
            }));

          case 14:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  }));
  return _getCroppedImg.apply(this, arguments);
}

var readImageFile = function readImageFile(file) {
  return new Promise(function (resolve, reject) {
    var reader = new FileReader();
    reader.addEventListener('load', function () {
      var img = new Image();
      img.addEventListener('load', function () {
        resolve({
          imageSrc: reader.result
        });
      });
      img.addEventListener('error', function (error) {
        return reject(error);
      });
      img.src = reader.result;
    }, false);
    reader.addEventListener('error', function (error) {
      return reject(error);
    });
    reader.readAsDataURL(file);
  });
};
/**
 * Return true if the supplied file size does not exceed to supplied limit.
 * @param {Number} fileSize - file size of supplied file
 * @param {Number} kbLimit - limit to check file size against in kilobytes
 */


exports.readImageFile = readImageFile;

var validateFileSizeLimit = function validateFileSizeLimit(fileSize, kbLimit) {
  return fileSize < kbLimit * 1024;
};
/**
 * Return true if the supplied file dimensions do not exceed max dimensions supplied by config.
 * @param {File} image - the image file after it has been cropped
 * @param {String} type - the image type to get correct max dimensions
 */


exports.validateFileSizeLimit = validateFileSizeLimit;

var validateImageDimensions = function validateImageDimensions(image, imageType) {
  var _maxImageDimensions$i = _config.maxImageDimensions[imageType],
      maxWidth = _maxImageDimensions$i.maxWidth,
      maxHeight = _maxImageDimensions$i.maxHeight;
  return image.width < maxWidth || image.height < maxHeight;
};

exports.validateImageDimensions = validateImageDimensions;