vue-img-loader
Version:
this is a image loader UI component for Vue 2.X. The image will be center positioned after loaded
1,467 lines (1,225 loc) • 45.9 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__(9);
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 __vue_exports__, __vue_options__
/* styles */
__webpack_require__(2)
/* script */
__vue_exports__ = __webpack_require__(6)
/* template */
var __vue_template__ = __webpack_require__(10)
__vue_options__ = __vue_exports__ = __vue_exports__ || {}
if (
typeof __vue_exports__.default === "object" ||
typeof __vue_exports__.default === "function"
) {
if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
__vue_options__ = __vue_exports__ = __vue_exports__.default
}
if (typeof __vue_options__ === "function") {
__vue_options__ = __vue_options__.options
}
__vue_options__.__file = "/Users/Jack/Work/vue-img-loader/src/VueImgLoader.vue"
__vue_options__.render = __vue_template__.render
__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
__vue_options__._scopeId = "data-v-5d001430"
/* hot reload */
if (false) {(function () {
var hotAPI = require("vue-hot-reload-api")
hotAPI.install(require("vue"), false)
if (!hotAPI.compatible) return
module.hot.accept()
if (!module.hot.data) {
hotAPI.createRecord("data-v-5d001430", __vue_options__)
} else {
hotAPI.reload("data-v-5d001430", __vue_options__)
}
})()}
if (__vue_options__.functional) {console.error("[vue-loader] VueImgLoader.vue: functional components are not supported and should be defined in plain js files using render functions.")}
module.exports = __vue_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, '']];
// add the styles to the DOM
var update = __webpack_require__(5)(content, {});
if(content.locals) module.exports = content.locals;
// 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/lib/style-rewriter.js?id=data-v-5d001430&scoped=true!./../node_modules/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/lib/style-rewriter.js?id=data-v-5d001430&scoped=true!./../node_modules/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-5d001430] {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n.vil-preview[data-v-5d001430] {\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
*/
var stylesInDom = {},
memoize = function(fn) {
var memo;
return function () {
if (typeof memo === "undefined") memo = fn.apply(this, arguments);
return memo;
};
},
isOldIE = memoize(function() {
return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
}),
getHeadElement = memoize(function () {
return document.head || document.getElementsByTagName("head")[0];
}),
singletonElement = null,
singletonCounter = 0,
styleElementsInsertedAtTop = [];
module.exports = function(list, options) {
if(false) {
if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
}
options = options || {};
// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
// tags it will allow on a page
if (typeof options.singleton === "undefined") options.singleton = isOldIE();
// By default, add <style> tags to the bottom of <head>.
if (typeof options.insertAt === "undefined") options.insertAt = "bottom";
var styles = listToStyles(list);
addStylesToDom(styles, options);
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) {
var newStyles = listToStyles(newList);
addStylesToDom(newStyles, options);
}
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, options) {
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], options));
}
} else {
var parts = [];
for(var j = 0; j < item.parts.length; j++) {
parts.push(addStyle(item.parts[j], options));
}
stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};
}
}
}
function listToStyles(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 = {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;
}
function insertStyleElement(options, styleElement) {
var head = getHeadElement();
var lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
if (options.insertAt === "top") {
if(!lastStyleElementInsertedAtTop) {
head.insertBefore(styleElement, head.firstChild);
} else if(lastStyleElementInsertedAtTop.nextSibling) {
head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling);
} else {
head.appendChild(styleElement);
}
styleElementsInsertedAtTop.push(styleElement);
} else if (options.insertAt === "bottom") {
head.appendChild(styleElement);
} else {
throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
}
}
function removeStyleElement(styleElement) {
styleElement.parentNode.removeChild(styleElement);
var idx = styleElementsInsertedAtTop.indexOf(styleElement);
if(idx >= 0) {
styleElementsInsertedAtTop.splice(idx, 1);
}
}
function createStyleElement(options) {
var styleElement = document.createElement("style");
styleElement.type = "text/css";
insertStyleElement(options, styleElement);
return styleElement;
}
function addStyle(obj, options) {
var styleElement, update, remove;
if (options.singleton) {
var styleIndex = singletonCounter++;
styleElement = singletonElement || (singletonElement = createStyleElement(options));
update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
} else {
styleElement = createStyleElement(options);
update = applyToTag.bind(null, styleElement);
remove = function() {
removeStyleElement(styleElement);
};
}
update(obj);
return function updateStyle(newObj) {
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, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _centerIt = __webpack_require__(7);
var _centerIt2 = _interopRequireDefault(_centerIt);
var _stackblurCanvas = __webpack_require__(8);
var _stackblurCanvas2 = _interopRequireDefault(_stackblurCanvas);
var _config = __webpack_require__(9);
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);
}
}
};
/***/ },
/* 7 */
/***/ 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;
});
/***/ },
/* 8 */
/***/ 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
};
/***/ },
/* 9 */
/***/ 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'
};
/***/ },
/* 10 */
/***/ function(module, exports, __webpack_require__) {
module.exports={render:function (){with(this) {
return _h('div', {
style: (containerStyle)
}, [_h('img', {
directives: [{
name: "show",
rawName: "v-show",
value: (imageReady),
expression: "imageReady"
}],
ref: "image",
staticClass: "vil-image",
attrs: {
"alt": "",
"src": ""
}
}), " ", _h('transition', {
attrs: {
"name": transition
}
}, [(!imageReady) ? _h('div', {
ref: "preview",
staticClass: "vil-preview"
}, [_h('canvas', {
directives: [{
name: "show",
rawName: "v-show",
value: (preview && previewReady && blurPreview),
expression: "preview && previewReady && blurPreview"
}],
ref: "canvas"
}), " ", _h('img', {
directives: [{
name: "show",
rawName: "v-show",
value: (preview && previewReady && !blurPreview),
expression: "preview && previewReady && !blurPreview"
}],
ref: "previewImage",
attrs: {
"src": "",
"alt": ""
}
}), " ", _t("default")]) : _e()])])
}},staticRenderFns: []}
if (false) {
module.hot.accept()
if (module.hot.data) {
require("vue-hot-reload-api").rerender("data-v-5d001430", module.exports)
}
}
/***/ }
/******/ ])
});
;