vue-img-loader
Version:
this is a image loader UI component for Vue 2.X. The image will be center positioned after loaded
1,595 lines (1,337 loc) • 49.3 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["VueImgLoader"] = factory();
else
root["VueImgLoader"] = factory();
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var _VueImgLoader = __webpack_require__(1);
var _VueImgLoader2 = _interopRequireDefault(_VueImgLoader);
var _config = __webpack_require__(11);
var _config2 = _interopRequireDefault(_config);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
_VueImgLoader2.default.config = _config2.default;
_VueImgLoader2.default.version = '0.1.1';
module.exports = _VueImgLoader2.default;
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
var disposed = false
function injectStyle (ssrContext) {
if (disposed) return
__webpack_require__(2)
}
var Component = __webpack_require__(7)(
/* script */
__webpack_require__(8),
/* template */
__webpack_require__(12),
/* styles */
injectStyle,
/* scopeId */
"data-v-40589870",
/* moduleIdentifier (server only) */
null
)
Component.options.__file = "/Users/Jack/Work/vue-img-loader/src/VueImgLoader.vue"
if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key.substr(0, 2) !== "__"})) {console.error("named exports are not supported in *.vue files.")}
if (Component.options.functional) {console.error("[vue-loader] VueImgLoader.vue: functional components are not supported with templates, they should use render functions.")}
/* hot reload */
if (false) {(function () {
var hotAPI = require("vue-loader/node_modules/vue-hot-reload-api")
hotAPI.install(require("vue"), false)
if (!hotAPI.compatible) return
module.hot.accept()
if (!module.hot.data) {
hotAPI.createRecord("data-v-40589870", Component.options)
} else {
hotAPI.reload("data-v-40589870", Component.options)
}
module.hot.dispose(function (data) {
disposed = true
})
})()}
module.exports = Component.exports
/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(3);
if(typeof content === 'string') content = [[module.id, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var update = __webpack_require__(5)("5b45fc98", content, false);
// Hot Module Replacement
if(false) {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!../node_modules/css-loader/index.js!../node_modules/_vue-loader@12.2.1@vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-40589870\",\"scoped\":true,\"hasInlineConfig\":false}!../node_modules/_vue-loader@12.2.1@vue-loader/lib/selector.js?type=styles&index=0!./VueImgLoader.vue", function() {
var newContent = require("!!../node_modules/css-loader/index.js!../node_modules/_vue-loader@12.2.1@vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-40589870\",\"scoped\":true,\"hasInlineConfig\":false}!../node_modules/_vue-loader@12.2.1@vue-loader/lib/selector.js?type=styles&index=0!./VueImgLoader.vue");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
}
// When the module is disposed, remove the <style> tags
module.hot.dispose(function() { update(); });
}
/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(4)();
// imports
// module
exports.push([module.id, "\n.vil-image[data-v-40589870] {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n.vil-preview[data-v-40589870] {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n", ""]);
// exports
/***/ },
/* 4 */
/***/ function(module, exports) {
"use strict";
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
// css base code, injected by the css-loader
module.exports = function () {
var list = [];
// return the list of modules as css string
list.toString = function toString() {
var result = [];
for (var i = 0; i < this.length; i++) {
var item = this[i];
if (item[2]) {
result.push("@media " + item[2] + "{" + item[1] + "}");
} else {
result.push(item[1]);
}
}
return result.join("");
};
// import a list of modules into the list
list.i = function (modules, mediaQuery) {
if (typeof modules === "string") modules = [[null, modules, ""]];
var alreadyImportedModules = {};
for (var i = 0; i < this.length; i++) {
var id = this[i][0];
if (typeof id === "number") alreadyImportedModules[id] = true;
}
for (i = 0; i < modules.length; i++) {
var item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if (typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
if (mediaQuery && !item[2]) {
item[2] = mediaQuery;
} else if (mediaQuery) {
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
}
list.push(item);
}
}
};
return list;
};
/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
Modified by Evan You @yyx990803
*/
var hasDocument = typeof document !== 'undefined'
if (false) {
if (!hasDocument) {
throw new Error(
'vue-style-loader cannot be used in a non-browser environment. ' +
"Use { target: 'node' } in your Webpack config to indicate a server-rendering environment."
) }
}
var listToStyles = __webpack_require__(6)
/*
type StyleObject = {
id: number;
parts: Array<StyleObjectPart>
}
type StyleObjectPart = {
css: string;
media: string;
sourceMap: ?string
}
*/
var stylesInDom = {/*
[id: number]: {
id: number,
refs: number,
parts: Array<(obj?: StyleObjectPart) => void>
}
*/}
var head = hasDocument && (document.head || document.getElementsByTagName('head')[0])
var singletonElement = null
var singletonCounter = 0
var isProduction = false
var noop = function () {}
// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
// tags it will allow on a page
var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase())
module.exports = function (parentId, list, _isProduction) {
isProduction = _isProduction
var styles = listToStyles(parentId, list)
addStylesToDom(styles)
return function update (newList) {
var mayRemove = []
for (var i = 0; i < styles.length; i++) {
var item = styles[i]
var domStyle = stylesInDom[item.id]
domStyle.refs--
mayRemove.push(domStyle)
}
if (newList) {
styles = listToStyles(parentId, newList)
addStylesToDom(styles)
} else {
styles = []
}
for (var i = 0; i < mayRemove.length; i++) {
var domStyle = mayRemove[i]
if (domStyle.refs === 0) {
for (var j = 0; j < domStyle.parts.length; j++) {
domStyle.parts[j]()
}
delete stylesInDom[domStyle.id]
}
}
}
}
function addStylesToDom (styles /* Array<StyleObject> */) {
for (var i = 0; i < styles.length; i++) {
var item = styles[i]
var domStyle = stylesInDom[item.id]
if (domStyle) {
domStyle.refs++
for (var j = 0; j < domStyle.parts.length; j++) {
domStyle.parts[j](item.parts[j])
}
for (; j < item.parts.length; j++) {
domStyle.parts.push(addStyle(item.parts[j]))
}
if (domStyle.parts.length > item.parts.length) {
domStyle.parts.length = item.parts.length
}
} else {
var parts = []
for (var j = 0; j < item.parts.length; j++) {
parts.push(addStyle(item.parts[j]))
}
stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }
}
}
}
function createStyleElement () {
var styleElement = document.createElement('style')
styleElement.type = 'text/css'
head.appendChild(styleElement)
return styleElement
}
function addStyle (obj /* StyleObjectPart */) {
var update, remove
var styleElement = document.querySelector('style[data-vue-ssr-id~="' + obj.id + '"]')
if (styleElement) {
if (isProduction) {
// has SSR styles and in production mode.
// simply do nothing.
return noop
} else {
// has SSR styles but in dev mode.
// for some reason Chrome can't handle source map in server-rendered
// style tags - source maps in <style> only works if the style tag is
// created and inserted dynamically. So we remove the server rendered
// styles and inject new ones.
styleElement.parentNode.removeChild(styleElement)
}
}
if (isOldIE) {
// use singleton mode for IE9.
var styleIndex = singletonCounter++
styleElement = singletonElement || (singletonElement = createStyleElement())
update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)
remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)
} else {
// use multi-style-tag mode in all other cases
styleElement = createStyleElement()
update = applyToTag.bind(null, styleElement)
remove = function () {
styleElement.parentNode.removeChild(styleElement)
}
}
update(obj)
return function updateStyle (newObj /* StyleObjectPart */) {
if (newObj) {
if (newObj.css === obj.css &&
newObj.media === obj.media &&
newObj.sourceMap === obj.sourceMap) {
return
}
update(obj = newObj)
} else {
remove()
}
}
}
var replaceText = (function () {
var textStore = []
return function (index, replacement) {
textStore[index] = replacement
return textStore.filter(Boolean).join('\n')
}
})()
function applyToSingletonTag (styleElement, index, remove, obj) {
var css = remove ? '' : obj.css
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = replaceText(index, css)
} else {
var cssNode = document.createTextNode(css)
var childNodes = styleElement.childNodes
if (childNodes[index]) styleElement.removeChild(childNodes[index])
if (childNodes.length) {
styleElement.insertBefore(cssNode, childNodes[index])
} else {
styleElement.appendChild(cssNode)
}
}
}
function applyToTag (styleElement, obj) {
var css = obj.css
var media = obj.media
var sourceMap = obj.sourceMap
if (media) {
styleElement.setAttribute('media', media)
}
if (sourceMap) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */'
// http://stackoverflow.com/a/26603875
css += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'
}
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = css
} else {
while (styleElement.firstChild) {
styleElement.removeChild(styleElement.firstChild)
}
styleElement.appendChild(document.createTextNode(css))
}
}
/***/ },
/* 6 */
/***/ function(module, exports) {
'use strict';
/**
* Translates the list format produced by css-loader into something
* easier to manipulate.
*/
module.exports = function listToStyles(parentId, list) {
var styles = [];
var newStyles = {};
for (var i = 0; i < list.length; i++) {
var item = list[i];
var id = item[0];
var css = item[1];
var media = item[2];
var sourceMap = item[3];
var part = {
id: parentId + ':' + i,
css: css,
media: media,
sourceMap: sourceMap
};
if (!newStyles[id]) {
styles.push(newStyles[id] = { id: id, parts: [part] });
} else {
newStyles[id].parts.push(part);
}
}
return styles;
};
/***/ },
/* 7 */
/***/ function(module, exports) {
/* globals __VUE_SSR_CONTEXT__ */
// this module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle
module.exports = function normalizeComponent (
rawScriptExports,
compiledTemplate,
injectStyles,
scopeId,
moduleIdentifier /* server only */
) {
var esModule
var scriptExports = rawScriptExports = rawScriptExports || {}
// ES6 modules interop
var type = typeof rawScriptExports.default
if (type === 'object' || type === 'function') {
esModule = rawScriptExports
scriptExports = rawScriptExports.default
}
// Vue.extend constructor export interop
var options = typeof scriptExports === 'function'
? scriptExports.options
: scriptExports
// render functions
if (compiledTemplate) {
options.render = compiledTemplate.render
options.staticRenderFns = compiledTemplate.staticRenderFns
}
// scopedId
if (scopeId) {
options._scopeId = scopeId
}
var hook
if (moduleIdentifier) { // server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__
}
// inject component styles
if (injectStyles) {
injectStyles.call(this, context)
}
// register component module identifier for async chunk inferrence
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier)
}
}
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook
} else if (injectStyles) {
hook = injectStyles
}
if (hook) {
var functional = options.functional
var existing = functional
? options.render
: options.beforeCreate
if (!functional) {
// inject component registration as beforeCreate hook
options.beforeCreate = existing
? [].concat(existing, hook)
: [hook]
} else {
// register for functioal component in vue file
options.render = function renderWithStyleInjection (h, context) {
hook.call(context)
return existing(h, context)
}
}
}
return {
esModule: esModule,
exports: scriptExports,
options: options
}
}
/***/ },
/* 8 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _centerIt = __webpack_require__(9);
var _centerIt2 = _interopRequireDefault(_centerIt);
var _stackblurCanvas = __webpack_require__(10);
var _stackblurCanvas2 = _interopRequireDefault(_stackblurCanvas);
var _config = __webpack_require__(11);
var _config2 = _interopRequireDefault(_config);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _loadImage(url, crossOrigin, callback) {
var image = new Image();
crossOrigin && (image.crossOrigin = "Anonymous");
image.onload = function () {
callback && callback(image);
};
image.src = url;
} //
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
function _center(element, containerWidth, containerHeight, elementWidth, elementHeight, type) {
var centerIt = new _centerIt2.default({
containerWidth: containerWidth,
containerHeight: containerHeight,
originWidth: elementWidth,
originHeight: elementHeight,
centerType: type
});
element.style.position = 'absolute';
centerIt.setPosition(element);
}
exports.default = {
isDestroyed: false,
props: {
src: {
type: String,
default: '',
required: true
},
preview: {
type: String,
default: ''
},
blurPreview: {
type: Boolean,
default: function _default() {
return _config2.default.blurPreview;
}
},
blurRadius: {
type: [String, Number],
default: function _default() {
return _config2.default.blurRadius;
}
},
blurAlphaChannel: {
type: Boolean,
default: function _default() {
return _config2.default.blurAlphaChannel;
}
},
width: {
type: [String, Number],
default: function _default() {
return _config2.default.width;
}
},
height: {
type: [String, Number],
default: function _default() {
return _config2.default.height;
}
},
backgroundColor: {
type: String,
default: function _default() {
return _config2.default.backgroundColor;
}
},
transition: {
type: String,
default: function _default() {
return _config2.default.transition;
}
},
lazy: {
type: Boolean,
default: function _default() {
return _config2.default.lazy;
}
},
centerType: {
type: String,
default: function _default() {
return _config2.default.centerType;
}
}
},
data: function data() {
return {
containerStyle: {
position: 'relative',
overflow: 'hidden',
display: 'inline-block'
},
imageReady: false,
previewReady: false,
containerWidth: this.width,
containerHeight: this.height
};
},
mounted: function mounted() {
this.setContainerStyle();
this.load();
},
beforeDestroy: function beforeDestroy() {
this.$options.isDestroyed = true;
},
watch: {
src: function src() {
this.load();
}
},
methods: {
load: function load() {
this.imageReady = false;
this.previewReady = false;
this.loadPreview();
this.loadImage();
},
makeCenter: function makeCenter(element, width, height) {
_center(element, this.containerWidth, this.containerHeight, width, height, this.centerType);
},
setContainerStyle: function setContainerStyle() {
var parent = this.$el.parentElement;
this.containerWidth = this.width || parent.clientWidth;
this.containerHeight = this.height || parent.clientHeight;
this.containerStyle = {
position: 'relative',
overflow: 'hidden',
display: 'inline-block',
width: this.containerWidth + 'px',
height: this.containerHeight + 'px',
backgroundColor: this.backgroundColor || 'initial'
};
},
loadPreview: function loadPreview() {
if (!this.preview) {
return;
}
(function (key) {
var _this = this;
_loadImage(this.preview, true, function (image) {
var previewImage = _this.$refs.previewImage;
// component destroyed, or src changed, or image ready (cached image)
if (_this.$options.isDestroyed || key !== _this.src || !previewImage) {
return;
}
if (_this.blurPreview) {
_this.blurCanvas(image);
} else {
_this.makeCenter(previewImage, image.naturalWidth, image.naturalHeight);
previewImage.src = _this.preview;
}
_this.previewReady = true;
});
}).bind(this)(this.src);
},
loadImage: function loadImage() {
var _this2 = this;
_loadImage(this.src, false, function (img) {
(function (key) {
if (this.$options.isDestroyed || key !== this.src) {
return;
}
var image = this.$refs.image;
this.makeCenter(image, img.naturalWidth, img.naturalHeight);
image.src = this.src;
this.imageReady = true;
}).bind(_this2)(_this2.src);
});
},
blurCanvas: function blurCanvas(previewImage) {
var canvas = this.$refs.canvas;
canvas.style.width = previewImage.naturalWidth + 'px';
canvas.style.height = previewImage.naturalHeight + 'px';
_stackblurCanvas2.default.image(previewImage, canvas, this.blurRadius, this.blurAlphaChannel);
this.makeCenter(canvas, previewImage.naturalWidth, previewImage.naturalHeight);
}
}
};
/***/ },
/* 9 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;'use strict';
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
(function (global, factory) {
'use strict';
/* istanbul ignore next */
( false ? 'undefined' : _typeof(exports)) === 'object' && typeof module !== 'undefined' ? module.exports = factory() : true ? !(__WEBPACK_AMD_DEFINE_FACTORY__ = (factory), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)) : global.CenterIt = factory();
})(undefined, function () {
'use strict';
function CenterIt(options) {
options = options || /* istanbul ignore next */{};
this.options = {
containerWidth: 100,
containerHeight: 100,
originWidth: 100,
originHeight: 100,
centerType: 'cover' // 'cover', 'contain'
};
/* istanbul ignore next */
for (var p in this.options) {
if (options[p] !== undefined) {
this.options[p] = options[p];
}
}
this._ratio = 1;
this._newWidth = 0;
this._newHeight = 0;
this._offset = { top: 0, left: 0 };
if (this.options.centerType === 'cover') {
this._coverCenter();
} else {
this._containCenter();
}
}
CenterIt.prototype = {
constructor: CenterIt,
_coverCenter: function _coverCenter() {
var originWidth = this.options.originWidth;
var originHeight = this.options.originHeight;
var containerWidth = this.options.containerWidth;
var containerHeight = this.options.containerHeight;
var originRatio = originWidth / originHeight;
var containerRatio = containerWidth / containerHeight;
var ratio = 1;
if (originRatio > containerRatio) {
// left offset required
ratio = containerHeight / originHeight;
this._newWidth = originWidth * ratio;
this._newHeight = originHeight * ratio;
this._offset = {
top: 0,
left: (this._newWidth - containerWidth) / -2
};
} else if (originRatio < containerRatio) {
// top offset required
ratio = containerWidth / originWidth;
this._newWidth = originWidth * ratio;
this._newHeight = originHeight * ratio;
this._offset = {
top: (this._newHeight - containerHeight) / -2,
left: 0
};
} else {
// no offset required
ratio = containerWidth / originWidth;
this._newWidth = originWidth * ratio;
this._newHeight = originHeight * ratio;
this._offset = {
top: 0,
left: 0
};
}
this._ratio = ratio;
},
_containCenter: function _containCenter() {
var originWidth = this.options.originWidth;
var originHeight = this.options.originHeight;
var containerWidth = this.options.containerWidth;
var containerHeight = this.options.containerHeight;
var originRatio = originWidth / originHeight;
var containerRatio = containerWidth / containerHeight;
var ratio = 1;
if (originRatio > containerRatio) {
// top offset required
ratio = containerWidth / originWidth;
this._newWidth = originWidth * ratio;
this._newHeight = originHeight * ratio;
this._offset = {
top: (this._newHeight - containerHeight) / -2,
left: 0
};
} else if (originRatio < containerRatio) {
// left offset required
ratio = containerHeight / originHeight;
this._newWidth = originWidth * ratio;
this._newHeight = originHeight * ratio;
this._offset = {
top: 0,
left: (this._newWidth - containerWidth) / -2
};
} else {
// no offset required
ratio = containerWidth / originWidth;
this._newWidth = originWidth * ratio;
this._newHeight = originHeight * ratio;
this._offset = {
top: 0,
left: 0
};
}
this._ratio = ratio;
},
ratio: function ratio() {
return this._ratio;
},
width: function width() {
return this._newWidth;
},
height: function height() {
return this._newHeight;
},
offset: function offset() {
return this._offset;
},
setPosition: function setPosition(el) {
el.style.top = this.offset().top + 'px';
el.style.left = this.offset().left + 'px';
el.style.width = this.width() + 'px';
el.style.height = this.height() + 'px';
},
drawImage: function drawImage(context, image) {
if (this.options.centerType === 'cover') {
context.drawImage(image, this.offset().left * -1, this.offset().top * -1, this.options.containerWidth / this.ratio(), this.options.containerHeight / this.ratio(), 0, 0, this.options.containerWidth, this.options.containerHeight);
} else {
context.drawImage(image, 0, 0, this.options.containerWidth / this.ratio(), this.options.containerHeight / this.ratio(), this.offset().left, this.offset().top, this.options.containerWidth, this.options.containerHeight);
}
}
};
return CenterIt;
});
/***/ },
/* 10 */
/***/ function(module, exports) {
'use strict';
/*
StackBlur - a fast almost Gaussian Blur For Canvas
Version: 0.5
Author: Mario Klingemann
Contact: mario@quasimondo.com
Website: http://www.quasimondo.com/StackBlurForCanvas
Twitter: @quasimondo
In case you find this class useful - especially in commercial projects -
I am not totally unhappy for a small donation to my PayPal account
mario@quasimondo.de
Or support me on flattr:
https://flattr.com/thing/72791/StackBlur-a-fast-almost-Gaussian-Blur-Effect-for-CanvasJavascript
Copyright (c) 2010 Mario Klingemann
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
*/
var mul_table = [512, 512, 456, 512, 328, 456, 335, 512, 405, 328, 271, 456, 388, 335, 292, 512, 454, 405, 364, 328, 298, 271, 496, 456, 420, 388, 360, 335, 312, 292, 273, 512, 482, 454, 428, 405, 383, 364, 345, 328, 312, 298, 284, 271, 259, 496, 475, 456, 437, 420, 404, 388, 374, 360, 347, 335, 323, 312, 302, 292, 282, 273, 265, 512, 497, 482, 468, 454, 441, 428, 417, 405, 394, 383, 373, 364, 354, 345, 337, 328, 320, 312, 305, 298, 291, 284, 278, 271, 265, 259, 507, 496, 485, 475, 465, 456, 446, 437, 428, 420, 412, 404, 396, 388, 381, 374, 367, 360, 354, 347, 341, 335, 329, 323, 318, 312, 307, 302, 297, 292, 287, 282, 278, 273, 269, 265, 261, 512, 505, 497, 489, 482, 475, 468, 461, 454, 447, 441, 435, 428, 422, 417, 411, 405, 399, 394, 389, 383, 378, 373, 368, 364, 359, 354, 350, 345, 341, 337, 332, 328, 324, 320, 316, 312, 309, 305, 301, 298, 294, 291, 287, 284, 281, 278, 274, 271, 268, 265, 262, 259, 257, 507, 501, 496, 491, 485, 480, 475, 470, 465, 460, 456, 451, 446, 442, 437, 433, 428, 424, 420, 416, 412, 408, 404, 400, 396, 392, 388, 385, 381, 377, 374, 370, 367, 363, 360, 357, 354, 350, 347, 344, 341, 338, 335, 332, 329, 326, 323, 320, 318, 315, 312, 310, 307, 304, 302, 299, 297, 294, 292, 289, 287, 285, 282, 280, 278, 275, 273, 271, 269, 267, 265, 263, 261, 259];
var shg_table = [9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17, 17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24];
function processImage(img, canvas, radius, blurAlphaChannel) {
if (typeof img == 'string') {
var img = document.getElementById(img);
} else if (typeof HTMLImageElement !== 'undefined' && !img instanceof HTMLImageElement) {
return;
}
var w = img.naturalWidth;
var h = img.naturalHeight;
if (typeof canvas == 'string') {
var canvas = document.getElementById(canvas);
} else if (typeof HTMLCanvasElement !== 'undefined' && !canvas instanceof HTMLCanvasElement) {
return;
}
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
canvas.width = w;
canvas.height = h;
var context = canvas.getContext('2d');
context.clearRect(0, 0, w, h);
context.drawImage(img, 0, 0);
if (isNaN(radius) || radius < 1) return;
if (blurAlphaChannel) processCanvasRGBA(canvas, 0, 0, w, h, radius);else processCanvasRGB(canvas, 0, 0, w, h, radius);
}
function getImageDataFromCanvas(canvas, top_x, top_y, width, height) {
if (typeof canvas == 'string') var canvas = document.getElementById(canvas);else if (typeof HTMLCanvasElement !== 'undefined' && !canvas instanceof HTMLCanvasElement) return;
var context = canvas.getContext('2d');
var imageData;
try {
try {
imageData = context.getImageData(top_x, top_y, width, height);
} catch (e) {
throw new Error("unable to access local image data: " + e);
return;
}
} catch (e) {
throw new Error("unable to access image data: " + e);
}
return imageData;
}
function processCanvasRGBA(canvas, top_x, top_y, width, height, radius) {
if (isNaN(radius) || radius < 1) return;
radius |= 0;
var imageData = getImageDataFromCanvas(canvas, top_x, top_y, width, height);
imageData = processImageDataRGBA(imageData, top_x, top_y, width, height, radius);
canvas.getContext('2d').putImageData(imageData, top_x, top_y);
}
function processImageDataRGBA(imageData, top_x, top_y, width, height, radius) {
var pixels = imageData.data;
var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, a_sum, r_out_sum, g_out_sum, b_out_sum, a_out_sum, r_in_sum, g_in_sum, b_in_sum, a_in_sum, pr, pg, pb, pa, rbs;
var div = radius + radius + 1;
var w4 = width << 2;
var widthMinus1 = width - 1;
var heightMinus1 = height - 1;
var radiusPlus1 = radius + 1;
var sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2;
var stackStart = new BlurStack();
var stack = stackStart;
for (i = 1; i < div; i++) {
stack = stack.next = new BlurStack();
if (i == radiusPlus1) var stackEnd = stack;
}
stack.next = stackStart;
var stackIn = null;
var stackOut = null;
yw = yi = 0;
var mul_sum = mul_table[radius];
var shg_sum = shg_table[radius];
for (y = 0; y < height; y++) {
r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0;
r_out_sum = radiusPlus1 * (pr = pixels[yi]);
g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]);
b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]);
a_out_sum = radiusPlus1 * (pa = pixels[yi + 3]);
r_sum += sumFactor * pr;
g_sum += sumFactor * pg;
b_sum += sumFactor * pb;
a_sum += sumFactor * pa;
stack = stackStart;
for (i = 0; i < radiusPlus1; i++) {
stack.r = pr;
stack.g = pg;
stack.b = pb;
stack.a = pa;
stack = stack.next;
}
for (i = 1; i < radiusPlus1; i++) {
p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2);
r_sum += (stack.r = pr = pixels[p]) * (rbs = radiusPlus1 - i);
g_sum += (stack.g = pg = pixels[p + 1]) * rbs;
b_sum += (stack.b = pb = pixels[p + 2]) * rbs;
a_sum += (stack.a = pa = pixels[p + 3]) * rbs;
r_in_sum += pr;
g_in_sum += pg;
b_in_sum += pb;
a_in_sum += pa;
stack = stack.next;
}
stackIn = stackStart;
stackOut = stackEnd;
for (x = 0; x < width; x++) {
pixels[yi + 3] = pa = a_sum * mul_sum >> shg_sum;
if (pa != 0) {
pa = 255 / pa;
pixels[yi] = (r_sum * mul_sum >> shg_sum) * pa;
pixels[yi + 1] = (g_sum * mul_sum >> shg_sum) * pa;
pixels[yi + 2] = (b_sum * mul_sum >> shg_sum) * pa;
} else {
pixels[yi] = pixels[yi + 1] = pixels[yi + 2] = 0;
}
r_sum -= r_out_sum;
g_sum -= g_out_sum;
b_sum -= b_out_sum;
a_sum -= a_out_sum;
r_out_sum -= stackIn.r;
g_out_sum -= stackIn.g;
b_out_sum -= stackIn.b;
a_out_sum -= stackIn.a;
p = yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1) << 2;
r_in_sum += stackIn.r = pixels[p];
g_in_sum += stackIn.g = pixels[p + 1];
b_in_sum += stackIn.b = pixels[p + 2];
a_in_sum += stackIn.a = pixels[p + 3];
r_sum += r_in_sum;
g_sum += g_in_sum;
b_sum += b_in_sum;
a_sum += a_in_sum;
stackIn = stackIn.next;
r_out_sum += pr = stackOut.r;
g_out_sum += pg = stackOut.g;
b_out_sum += pb = stackOut.b;
a_out_sum += pa = stackOut.a;
r_in_sum -= pr;
g_in_sum -= pg;
b_in_sum -= pb;
a_in_sum -= pa;
stackOut = stackOut.next;
yi += 4;
}
yw += width;
}
for (x = 0; x < width; x++) {
g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0;
yi = x << 2;
r_out_sum = radiusPlus1 * (pr = pixels[yi]);
g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]);
b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]);
a_out_sum = radiusPlus1 * (pa = pixels[yi + 3]);
r_sum += sumFactor * pr;
g_sum += sumFactor * pg;
b_sum += sumFactor * pb;
a_sum += sumFactor * pa;
stack = stackStart;
for (i = 0; i < radiusPlus1; i++) {
stack.r = pr;
stack.g = pg;
stack.b = pb;
stack.a = pa;
stack = stack.next;
}
yp = width;
for (i = 1; i <= radius; i++) {
yi = yp + x << 2;
r_sum += (stack.r = pr = pixels[yi]) * (rbs = radiusPlus1 - i);
g_sum += (stack.g = pg = pixels[yi + 1]) * rbs;
b_sum += (stack.b = pb = pixels[yi + 2]) * rbs;
a_sum += (stack.a = pa = pixels[yi + 3]) * rbs;
r_in_sum += pr;
g_in_sum += pg;
b_in_sum += pb;
a_in_sum += pa;
stack = stack.next;
if (i < heightMinus1) {
yp += width;
}
}
yi = x;
stackIn = stackStart;
stackOut = stackEnd;
for (y = 0; y < height; y++) {
p = yi << 2;
pixels[p + 3] = pa = a_sum * mul_sum >> shg_sum;
if (pa > 0) {
pa = 255 / pa;
pixels[p] = (r_sum * mul_sum >> shg_sum) * pa;
pixels[p + 1] = (g_sum * mul_sum >> shg_sum) * pa;
pixels[p + 2] = (b_sum * mul_sum >> shg_sum) * pa;
} else {
pixels[p] = pixels[p + 1] = pixels[p + 2] = 0;
}
r_sum -= r_out_sum;
g_sum -= g_out_sum;
b_sum -= b_out_sum;
a_sum -= a_out_sum;
r_out_sum -= stackIn.r;
g_out_sum -= stackIn.g;
b_out_sum -= stackIn.b;
a_out_sum -= stackIn.a;
p = x + ((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) * width << 2;
r_sum += r_in_sum += stackIn.r = pixels[p];
g_sum += g_in_sum += stackIn.g = pixels[p + 1];
b_sum += b_in_sum += stackIn.b = pixels[p + 2];
a_sum += a_in_sum += stackIn.a = pixels[p + 3];
stackIn = stackIn.next;
r_out_sum += pr = stackOut.r;
g_out_sum += pg = stackOut.g;
b_out_sum += pb = stackOut.b;
a_out_sum += pa = stackOut.a;
r_in_sum -= pr;
g_in_sum -= pg;
b_in_sum -= pb;
a_in_sum -= pa;
stackOut = stackOut.next;
yi += width;
}
}
return imageData;
}
function processCanvasRGB(canvas, top_x, top_y, width, height, radius) {
if (isNaN(radius) || radius < 1) return;
radius |= 0;
var imageData = getImageDataFromCanvas(canvas, top_x, top_y, width, height);
imageData = processImageDataRGB(imageData, top_x, top_y, width, height, radius);
canvas.getContext('2d').putImageData(imageData, top_x, top_y);
}
function processImageDataRGB(imageData, top_x, top_y, width, height, radius) {
var pixels = imageData.data;
var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, r_out_sum, g_out_sum, b_out_sum, r_in_sum, g_in_sum, b_in_sum, pr, pg, pb, rbs;
var div = radius + radius + 1;
var w4 = width << 2;
var widthMinus1 = width - 1;
var heightMinus1 = height - 1;
var radiusPlus1 = radius + 1;
var sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2;
var stackStart = new BlurStack();
var stack = stackStart;
for (i = 1; i < div; i++) {
stack = stack.next = new BlurStack();
if (i == radiusPlus1) var stackEnd = stack;
}
stack.next = stackStart;
var stackIn = null;
var stackOut = null;
yw = yi = 0;
var mul_sum = mul_table[radius];
var shg_sum = shg_table[radius];
for (y = 0; y < height; y++) {
r_in_sum = g_in_sum = b_in_sum = r_sum = g_sum = b_sum = 0;
r_out_sum = radiusPlus1 * (pr = pixels[yi]);
g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]);
b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]);
r_sum += sumFactor * pr;
g_sum += sumFactor * pg;
b_sum += sumFactor * pb;
stack = stackStart;
for (i = 0; i < radiusPlus1; i++) {
stack.r = pr;
stack.g = pg;
stack.b = pb;
stack = stack.next;
}
for (i = 1; i < radiusPlus1; i++) {
p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2);
r_sum += (stack.r = pr = pixels[p]) * (rbs = radiusPlus1 - i);
g_sum += (stack.g = pg = pixels[p + 1]) * rbs;
b_sum += (stack.b = pb = pixels[p + 2]) * rbs;
r_in_sum += pr;
g_in_sum += pg;
b_in_sum += pb;
stack = stack.next;
}
stackIn = stackStart;
stackOut = stackEnd;
for (x = 0; x < width; x++) {
pixels[yi] = r_sum * mul_sum >> shg_sum;
pixels[yi + 1] = g_sum * mul_sum >> shg_sum;
pixels[yi + 2] = b_sum * mul_sum >> shg_sum;
r_sum -= r_out_sum;
g_sum -= g_out_sum;
b_sum -= b_out_sum;
r_out_sum -= stackIn.r;
g_out_sum -= stackIn.g;
b_out_sum -= stackIn.b;
p = yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1) << 2;
r_in_sum += stackIn.r = pixels[p];
g_in_sum += stackIn.g = pixels[p + 1];
b_in_sum += stackIn.b = pixels[p + 2];
r_sum += r_in_sum;
g_sum += g_in_sum;
b_sum += b_in_sum;
stackIn = stackIn.next;
r_out_sum += pr = stackOut.r;
g_out_sum += pg = stackOut.g;
b_out_sum += pb = stackOut.b;
r_in_sum -= pr;
g_in_sum -= pg;
b_in_sum -= pb;
stackOut = stackOut.next;
yi += 4;
}
yw += width;
}
for (x = 0; x < width; x++) {
g_in_sum = b_in_sum = r_in_sum = g_sum = b_sum = r_sum = 0;
yi = x << 2;
r_out_sum = radiusPlus1 * (pr = pixels[yi]);
g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]);
b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]);
r_sum += sumFactor * pr;
g_sum += sumFactor * pg;
b_sum += sumFactor * pb;
stack = stackStart;
for (i = 0; i < radiusPlus1; i++) {
stack.r = pr;
stack.g = pg;
stack.b = pb;
stack = stack.next;
}
yp = width;
for (i = 1; i <= radius; i++) {
yi = yp + x << 2;
r_sum += (stack.r = pr = pixels[yi]) * (rbs = radiusPlus1 - i);
g_sum += (stack.g = pg = pixels[yi + 1]) * rbs;
b_sum += (stack.b = pb = pixels[yi + 2]) * rbs;
r_in_sum += pr;
g_in_sum += pg;
b_in_sum += pb;
stack = stack.next;
if (i < heightMinus1) {
yp += width;
}
}
yi = x;
stackIn = stackStart;
stackOut = stackEnd;
for (y = 0; y < height; y++) {
p = yi << 2;
pixels[p] = r_sum * mul_sum >> shg_sum;
pixels[p + 1] = g_sum * mul_sum >> shg_sum;
pixels[p + 2] = b_sum * mul_sum >> shg_sum;
r_sum -= r_out_sum;
g_sum -= g_out_sum;
b_sum -= b_out_sum;
r_out_sum -= stackIn.r;
g_out_sum -= stackIn.g;
b_out_sum -= stackIn.b;
p = x + ((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) * width << 2;
r_sum += r_in_sum += stackIn.r = pixels[p];
g_sum += g_in_sum += stackIn.g = pixels[p + 1];
b_sum += b_in_sum += stackIn.b = pixels[p + 2];
stackIn = stackIn.next;
r_out_sum += pr = stackOut.r;
g_out_sum += pg = stackOut.g;
b_out_sum += pb = stackOut.b;
r_in_sum -= pr;
g_in_sum -= pg;
b_in_sum -= pb;
stackOut = stackOut.next;
yi += width;
}
}
return imageData;
}
function BlurStack() {
this.r = 0;
this.g = 0;
this.b = 0;
this.a = 0;
this.next = null;
}
module.exports = {
image: processImage,
canvasRGBA: processCanvasRGBA,
canvasRGB: processCanvasRGB,
imageDataRGBA: processImageDataRGBA,
imageDataRGB: processImageDataRGB
};
/***/ },
/* 11 */
/***/ function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = {
blurPreview: true,
blurRadius: 20,
blurAlphaChannel: false,
width: 0,
height: 0,
lazy: false,
backgroundColor: '',
transition: '',
centerType: 'cover'
};
/***/ },
/* 12 */
/***/ function(module, exports, __webpack_require__) {
module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
return _h('div', {
style: (_vm.containerStyle)
}, [_h('img', {
directives: [{
name: "show",
rawName: "v-show",
value: (_vm.imageReady),
expression: "imageReady"
}],
ref: "image",
staticClass: "vil-image",
attrs: {
"alt": "",
"src": ""
}
}), " ", _h('transition', {
attrs: {
"name": _vm.transition
}
}, [(!_vm.imageReady) ? _h('div', {
ref: "preview",
staticClass: "vil-preview"
}, [_h('canvas', {
directives: [{
name: "show",
rawName: "v-show",
value: (_vm.preview && _vm.previewReady && _vm.blurPreview),
expression: "preview && previewReady && blurPreview"
}],
ref: "canvas"
}), " ", _h('img', {
directives: [{
name: "show",
rawName: "v-show",
value: (_vm.preview && _vm.previewReady && !_vm.blurPreview),
expression: "preview && previewReady && !blurPreview"
}],
ref: "previewImage",
attrs: {
"src": "",
"alt": ""
}
}), " ", _vm._t("default")]) : _vm._e()])])
},staticRenderFns: []}
module.exports.render._withStripped = true
if (false) {
module.hot.accept()
if (module.hot.data) {
require("vue-loader/node_modules/vue-hot-reload-api").rerender("data-v-40589870", module.exports)
}
}
/***/ }
/******/ ])
});
;