{"ast":null,"code":"/**\r\n * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>\r\n * @fileoverview Mask extending fabric.Image.filters.Mask\r\n */\nimport fabric from 'fabric';\n/**\r\n * Mask object\r\n * @class Mask\r\n * @extends {fabric.Image.filters.BlendImage}\r\n * @ignore\r\n */\n\nconst Mask = fabric.util.createClass(fabric.Image.filters.BlendImage,\n/** @lends Mask.prototype */\n{\n  /**\r\n   * Apply filter to canvas element\r\n   * @param {Object} pipelineState - Canvas element to apply filter\r\n   * @override\r\n   */\n  applyTo(pipelineState) {\n    if (!this.mask) {\n      return;\n    }\n\n    const canvas = pipelineState.canvasEl;\n    const {\n      width,\n      height\n    } = canvas;\n\n    const maskCanvasEl = this._createCanvasOfMask(width, height);\n\n    const ctx = canvas.getContext('2d');\n    const maskCtx = maskCanvasEl.getContext('2d');\n    const imageData = ctx.getImageData(0, 0, width, height);\n\n    this._drawMask(maskCtx, canvas, ctx);\n\n    this._mapData(maskCtx, imageData, width, height);\n\n    pipelineState.imageData = imageData;\n  },\n\n  /**\r\n   * Create canvas of mask image\r\n   * @param {number} width - Width of main canvas\r\n   * @param {number} height - Height of main canvas\r\n   * @returns {HTMLElement} Canvas element\r\n   * @private\r\n   */\n  _createCanvasOfMask(width, height) {\n    const maskCanvasEl = fabric.util.createCanvasElement();\n    maskCanvasEl.width = width;\n    maskCanvasEl.height = height;\n    return maskCanvasEl;\n  },\n\n  /**\r\n   * Draw mask image on canvas element\r\n   * @param {Object} maskCtx - Context of mask canvas\r\n   * @private\r\n   */\n  _drawMask(maskCtx) {\n    const {\n      mask\n    } = this;\n    const maskImg = mask.getElement();\n    const {\n      angle,\n      left,\n      scaleX,\n      scaleY,\n      top\n    } = mask;\n    maskCtx.save();\n    maskCtx.translate(left, top);\n    maskCtx.rotate(angle * Math.PI / 180);\n    maskCtx.scale(scaleX, scaleY);\n    maskCtx.drawImage(maskImg, -maskImg.width / 2, -maskImg.height / 2);\n    maskCtx.restore();\n  },\n\n  /**\r\n   * Map mask image data to source image data\r\n   * @param {Object} maskCtx - Context of mask canvas\r\n   * @param {Object} imageData - Data of source image\r\n   * @param {number} width - Width of main canvas\r\n   * @param {number} height - Height of main canvas\r\n   * @private\r\n   */\n  _mapData(maskCtx, imageData, width, height) {\n    const {\n      data,\n      height: imgHeight,\n      width: imgWidth\n    } = imageData;\n    const sourceData = data;\n    const len = imgWidth * imgHeight * 4;\n    const maskData = maskCtx.getImageData(0, 0, width, height).data;\n\n    for (let i = 0; i < len; i += 4) {\n      sourceData[i + 3] = maskData[i]; // adjust value of alpha data\n    }\n  }\n\n});\nexport default Mask;","map":{"version":3,"sources":["C:/Users/kkwan_000/Desktop/git/2017110269/minsung/src/js/extension/mask.js"],"names":["fabric","Mask","util","createClass","Image","filters","BlendImage","applyTo","pipelineState","mask","canvas","canvasEl","width","height","maskCanvasEl","_createCanvasOfMask","ctx","getContext","maskCtx","imageData","getImageData","_drawMask","_mapData","createCanvasElement","maskImg","getElement","angle","left","scaleX","scaleY","top","save","translate","rotate","Math","PI","scale","drawImage","restore","data","imgHeight","imgWidth","sourceData","len","maskData","i"],"mappings":"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","sourcesContent":["/**\r\n * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>\r\n * @fileoverview Mask extending fabric.Image.filters.Mask\r\n */\r\nimport fabric from 'fabric';\r\n\r\n/**\r\n * Mask object\r\n * @class Mask\r\n * @extends {fabric.Image.filters.BlendImage}\r\n * @ignore\r\n */\r\nconst Mask = fabric.util.createClass(\r\n  fabric.Image.filters.BlendImage,\r\n  /** @lends Mask.prototype */ {\r\n    /**\r\n     * Apply filter to canvas element\r\n     * @param {Object} pipelineState - Canvas element to apply filter\r\n     * @override\r\n     */\r\n    applyTo(pipelineState) {\r\n      if (!this.mask) {\r\n        return;\r\n      }\r\n\r\n      const canvas = pipelineState.canvasEl;\r\n      const { width, height } = canvas;\r\n      const maskCanvasEl = this._createCanvasOfMask(width, height);\r\n      const ctx = canvas.getContext('2d');\r\n      const maskCtx = maskCanvasEl.getContext('2d');\r\n      const imageData = ctx.getImageData(0, 0, width, height);\r\n\r\n      this._drawMask(maskCtx, canvas, ctx);\r\n      this._mapData(maskCtx, imageData, width, height);\r\n\r\n      pipelineState.imageData = imageData;\r\n    },\r\n\r\n    /**\r\n     * Create canvas of mask image\r\n     * @param {number} width - Width of main canvas\r\n     * @param {number} height - Height of main canvas\r\n     * @returns {HTMLElement} Canvas element\r\n     * @private\r\n     */\r\n    _createCanvasOfMask(width, height) {\r\n      const maskCanvasEl = fabric.util.createCanvasElement();\r\n\r\n      maskCanvasEl.width = width;\r\n      maskCanvasEl.height = height;\r\n\r\n      return maskCanvasEl;\r\n    },\r\n\r\n    /**\r\n     * Draw mask image on canvas element\r\n     * @param {Object} maskCtx - Context of mask canvas\r\n     * @private\r\n     */\r\n    _drawMask(maskCtx) {\r\n      const { mask } = this;\r\n      const maskImg = mask.getElement();\r\n      const { angle, left, scaleX, scaleY, top } = mask;\r\n\r\n      maskCtx.save();\r\n      maskCtx.translate(left, top);\r\n      maskCtx.rotate((angle * Math.PI) / 180);\r\n      maskCtx.scale(scaleX, scaleY);\r\n      maskCtx.drawImage(maskImg, -maskImg.width / 2, -maskImg.height / 2);\r\n      maskCtx.restore();\r\n    },\r\n\r\n    /**\r\n     * Map mask image data to source image data\r\n     * @param {Object} maskCtx - Context of mask canvas\r\n     * @param {Object} imageData - Data of source image\r\n     * @param {number} width - Width of main canvas\r\n     * @param {number} height - Height of main canvas\r\n     * @private\r\n     */\r\n    _mapData(maskCtx, imageData, width, height) {\r\n      const { data, height: imgHeight, width: imgWidth } = imageData;\r\n      const sourceData = data;\r\n      const len = imgWidth * imgHeight * 4;\r\n      const maskData = maskCtx.getImageData(0, 0, width, height).data;\r\n\r\n      for (let i = 0; i < len; i += 4) {\r\n        sourceData[i + 3] = maskData[i]; // adjust value of alpha data\r\n      }\r\n    },\r\n  }\r\n);\r\n\r\nexport default Mask;\r\n"]},"metadata":{},"sourceType":"module"}