bml-workstand-ui
Version:
A Component Library for Vue.js.
1,922 lines (1,794 loc) • 90.4 kB
JavaScript
module.exports =
/******/ (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] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = 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;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/dist/";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 60);
/******/ })
/************************************************************************/
/******/ ({
/***/ 0:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return normalizeComponent; });
/* globals __VUE_SSR_CONTEXT__ */
// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
// This module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle.
function normalizeComponent (
scriptExports,
render,
staticRenderFns,
functionalTemplate,
injectStyles,
scopeId,
moduleIdentifier, /* server only */
shadowMode /* vue-cli only */
) {
// Vue.extend constructor export interop
var options = typeof scriptExports === 'function'
? scriptExports.options
: scriptExports
// render functions
if (render) {
options.render = render
options.staticRenderFns = staticRenderFns
options._compiled = true
}
// functional template
if (functionalTemplate) {
options.functional = true
}
// scopedId
if (scopeId) {
options._scopeId = 'data-v-' + 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 = shadowMode
? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }
: injectStyles
}
if (hook) {
if (options.functional) {
// for template-only hot-reload because in that case the render fn doesn't
// go through the normalizer
options._injectStyles = hook
// register for functional component in vue file
var originalRender = options.render
options.render = function renderWithStyleInjection (h, context) {
hook.call(context)
return originalRender(h, context)
}
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate
options.beforeCreate = existing
? [].concat(existing, hook)
: [hook]
}
}
return {
exports: scriptExports,
options: options
}
}
/***/ }),
/***/ 10:
/***/ (function(module, exports) {
module.exports = require("bml-workstand-ui/lib/mixins/migrating");
/***/ }),
/***/ 28:
/***/ (function(module, exports) {
module.exports = require("babel-helper-vue-jsx-merge-props");
/***/ }),
/***/ 43:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/image-editor/src/main.vue?vue&type=template&id=16560560&
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c(
"div",
{
directives: [
{
name: "show",
rawName: "v-show",
value: _vm.visible,
expression: "visible"
}
],
staticClass: "bml-image-editor"
},
[
_c("div", { staticClass: "edit-wrap" }, [
_c("div", { staticClass: "edit-close", on: { click: _vm.off } }, [
_c("i", { staticClass: "edit-icon4" })
]),
_c(
"div",
{
directives: [
{
name: "show",
rawName: "v-show",
value: _vm.step == 1,
expression: "step == 1"
}
],
staticClass: "edit-step1"
},
[
_c(
"div",
{
staticClass: "edit-drop-area",
on: {
dragleave: _vm.preventDefault,
dragover: _vm.preventDefault,
dragenter: _vm.preventDefault,
click: _vm.handleClick,
drop: _vm.handleChange
}
},
[
_c(
"i",
{
directives: [
{
name: "show",
rawName: "v-show",
value: _vm.loading != 1,
expression: "loading != 1"
}
],
staticClass: "edit-icon1"
},
[
_c("i", { staticClass: "edit-icon1-arrow" }),
_c("i", { staticClass: "edit-icon1-body" }),
_c("i", { staticClass: "edit-icon1-bottom" })
]
),
_c(
"span",
{
directives: [
{
name: "show",
rawName: "v-show",
value: _vm.loading !== 1,
expression: "loading !== 1"
}
],
staticClass: "edit-hint"
},
[_vm._v(_vm._s(_vm.lang.hint))]
),
_c(
"span",
{
directives: [
{
name: "show",
rawName: "v-show",
value: !_vm.isSupported,
expression: "!isSupported"
}
],
staticClass: "edit-no-supported-hint"
},
[_vm._v(_vm._s(_vm.lang.noSupported))]
),
_vm.step == 1
? _c("input", {
directives: [
{
name: "show",
rawName: "v-show",
value: false,
expression: "false"
}
],
ref: "fileinput",
attrs: { type: "file" },
on: { change: _vm.handleChange }
})
: _vm._e()
]
),
_c(
"div",
{
directives: [
{
name: "show",
rawName: "v-show",
value: _vm.hasError,
expression: "hasError"
}
],
staticClass: "edit-error"
},
[
_c("i", { staticClass: "edit-icon2" }),
_vm._v(" " + _vm._s(_vm.errorMsg) + "\n\t\t\t")
]
),
_c("div", { staticClass: "edit-operate" }, [
_c("a", { on: { click: _vm.off, mousedown: _vm.ripple } }, [
_vm._v(_vm._s(_vm.lang.btn.off))
])
])
]
),
_vm.step == 2
? _c("div", { staticClass: "edit-step2" }, [
_c("div", { staticClass: "edit-crop" }, [
_c(
"div",
{
directives: [
{
name: "show",
rawName: "v-show",
value: true,
expression: "true"
}
],
staticClass: "edit-crop-left"
},
[
_c("div", { staticClass: "edit-img-container" }, [
_c("img", {
ref: "img",
staticClass: "edit-img",
style: _vm.sourceImgStyle,
attrs: { src: _vm.sourceImgUrl, draggable: "false" },
on: {
drag: _vm.preventDefault,
dragstart: _vm.preventDefault,
dragend: _vm.preventDefault,
dragleave: _vm.preventDefault,
dragover: _vm.preventDefault,
dragenter: _vm.preventDefault,
drop: _vm.preventDefault,
touchstart: _vm.imgStartMove,
touchmove: _vm.imgMove,
touchend: _vm.createImg,
touchcancel: _vm.createImg,
mousedown: _vm.imgStartMove,
mousemove: _vm.imgMove,
mouseup: _vm.createImg,
mouseout: _vm.createImg
}
}),
_c("div", {
staticClass: "edit-img-shade edit-img-shade-1",
style: _vm.sourceImgShadeStyle
}),
_c("div", {
staticClass: "edit-img-shade edit-img-shade-2",
style: _vm.sourceImgShadeStyle
})
]),
_c("div", { staticClass: "edit-range" }, [
_c("input", {
attrs: {
type: "range",
step: "1",
min: "0",
max: "100"
},
domProps: { value: _vm.scale.range },
on: { mousemove: _vm.zoomChange }
}),
_c("i", {
staticClass: "edit-icon5",
on: {
mousedown: _vm.startZoomSub,
mouseout: _vm.endZoomSub,
mouseup: _vm.endZoomSub
}
}),
_c("i", {
staticClass: "edit-icon6",
on: {
mousedown: _vm.startZoomAdd,
mouseout: _vm.endZoomAdd,
mouseup: _vm.endZoomAdd
}
})
]),
!_vm.noRotate
? _c("div", { staticClass: "edit-rotate" }, [
_c("i", { on: { click: _vm.rotateImg } }, [
_vm._v("↻")
])
])
: _vm._e()
]
),
_c(
"div",
{
directives: [
{
name: "show",
rawName: "v-show",
value: true,
expression: "true"
}
],
staticClass: "edit-crop-right"
},
[
_c("div", { staticClass: "edit-preview" }, [
!_vm.noSquare
? _c("div", { staticClass: "edit-preview-item" }, [
_c("img", {
style: _vm.previewStyle,
attrs: { src: _vm.createImgUrl }
}),
_c("span", [_vm._v(_vm._s(_vm.lang.preview))])
])
: _vm._e(),
!_vm.noCircle
? _c(
"div",
{
staticClass:
"edit-preview-item edit-preview-item-circle"
},
[
_c("img", {
style: _vm.previewStyle,
attrs: { src: _vm.createImgUrl }
}),
_c("span", [_vm._v(_vm._s(_vm.lang.preview))])
]
)
: _vm._e()
])
]
)
]),
_c("div", { staticClass: "edit-operate" }, [
_c(
"a",
{
on: {
click: function($event) {
_vm.setStep(1)
},
mousedown: _vm.ripple
}
},
[_vm._v(_vm._s(_vm.lang.btn.back))]
),
_c(
"a",
{
staticClass: "edit-operate-btn",
on: { click: _vm.prepareUpload, mousedown: _vm.ripple }
},
[_vm._v(_vm._s(_vm.lang.btn.save))]
)
])
])
: _vm._e(),
_vm.step == 3
? _c("div", { staticClass: "edit-step3" }, [
_c("div", { staticClass: "edit-upload" }, [
_c(
"span",
{
directives: [
{
name: "show",
rawName: "v-show",
value: _vm.loading === 1,
expression: "loading === 1"
}
],
staticClass: "edit-loading"
},
[_vm._v(_vm._s(_vm.lang.loading))]
),
_c("div", { staticClass: "edit-progress-wrap" }, [
_c("span", {
directives: [
{
name: "show",
rawName: "v-show",
value: _vm.loading === 1,
expression: "loading === 1"
}
],
staticClass: "edit-progress",
style: _vm.progressStyle
})
]),
_c(
"div",
{
directives: [
{
name: "show",
rawName: "v-show",
value: _vm.hasError,
expression: "hasError"
}
],
staticClass: "edit-error"
},
[
_c("i", { staticClass: "edit-icon2" }),
_vm._v(" " + _vm._s(_vm.errorMsg) + "\n\t\t\t\t")
]
),
_c(
"div",
{
directives: [
{
name: "show",
rawName: "v-show",
value: _vm.loading === 2,
expression: "loading === 2"
}
],
staticClass: "edit-success"
},
[
_c("i", { staticClass: "edit-icon3" }),
_vm._v(" " + _vm._s(_vm.lang.success) + "\n\t\t\t\t")
]
)
]),
_c("div", { staticClass: "edit-operate" }, [
_c(
"a",
{
on: {
click: function($event) {
_vm.setStep(2)
},
mousedown: _vm.ripple
}
},
[_vm._v(_vm._s(_vm.lang.btn.back))]
),
_c("a", { on: { click: _vm.off, mousedown: _vm.ripple } }, [
_vm._v(_vm._s(_vm.lang.btn.close))
])
])
])
: _vm._e(),
_c("canvas", {
directives: [
{
name: "show",
rawName: "v-show",
value: false,
expression: "false"
}
],
ref: "canvas",
attrs: { width: _vm.width, height: _vm.height }
})
])
]
)
}
var staticRenderFns = []
render._withStripped = true
// CONCATENATED MODULE: ./packages/image-editor/src/main.vue?vue&type=template&id=16560560&
// CONCATENATED MODULE: ./packages/image-editor/src/language.js
/* harmony default export */ var language = ({
zh: {
hint: '点击，或拖动图片至此处',
loading: '正在上传……',
noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！',
success: '上传成功',
fail: '图片上传失败',
preview: '头像预览',
btn: {
off: '取消',
close: '关闭',
back: '上一步',
save: '保存'
},
error: {
onlyImg: '仅限图片格式',
outOfSize: '单文件大小不能超过 ',
lowestPx: '图片最低像素为（宽*高）：'
}
},
'zh-tw': {
hint: '點擊，或拖動圖片至此處',
loading: '正在上傳……',
noSupported: '瀏覽器不支持該功能，請使用IE10以上或其他現代瀏覽器！',
success: '上傳成功',
fail: '圖片上傳失敗',
preview: '頭像預覽',
btn: {
off: '取消',
close: '關閉',
back: '上一步',
save: '保存'
},
error: {
onlyImg: '僅限圖片格式',
outOfSize: '單文件大小不能超過 ',
lowestPx: '圖片最低像素為（寬*高）：'
}
},
en: {
hint: 'Click or drag the file here to upload',
loading: 'Uploading…',
noSupported: 'Browser is not supported, please use IE10+ or other browsers',
success: 'Upload success',
fail: 'Upload failed',
preview: 'Preview',
btn: {
off: 'Cancel',
close: 'Close',
back: 'Back',
save: 'Save'
},
error: {
onlyImg: 'Image only',
outOfSize: 'Image exceeds size limit: ',
lowestPx: 'Image\'s size is too low. Expected at least: '
}
},
ro: {
hint: 'Atinge sau trage fișierul aici',
loading: 'Se încarcă',
noSupported: 'Browser-ul tău nu suportă acest feature. Te rugăm încearcă cu alt browser.',
success: 'S-a încărcat cu succes',
fail: 'A apărut o problemă la încărcare',
preview: 'Previzualizează',
btn: {
off: 'Anulează',
close: 'Închide',
back: 'Înapoi',
save: 'Salvează'
},
error: {
onlyImg: 'Doar imagini',
outOfSize: 'Imaginea depășește limita de: ',
loewstPx: 'Imaginea este prea mică; Minim: '
}
},
ru: {
hint: 'Нажмите, или перетащите файл в это окно',
loading: 'Загружаю……',
noSupported: 'Ваш браузер не поддерживается, пожалуйста, используйте IE10 + или другие браузеры',
success: 'Загрузка выполнена успешно',
fail: 'Ошибка загрузки',
preview: 'Предпросмотр',
btn: {
off: 'Отменить',
close: 'Закрыть',
back: 'Назад',
save: 'Сохранить'
},
error: {
onlyImg: 'Только изображения',
outOfSize: 'Изображение превышает предельный размер: ',
lowestPx: 'Минимальный размер изображения: '
}
},
'pt-br': {
hint: 'Clique ou arraste o arquivo aqui para carregar',
loading: 'Carregando…',
noSupported: 'Browser não suportado, use o IE10+ ou outro browser',
success: 'Sucesso ao carregar imagem',
fail: 'Falha ao carregar imagem',
preview: 'Pré-visualizar',
btn: {
off: 'Cancelar',
close: 'Fechar',
back: 'Voltar',
save: 'Salvar'
},
error: {
onlyImg: 'Apenas imagens',
outOfSize: 'A imagem excede o limite de tamanho: ',
lowestPx: 'O tamanho da imagem é muito pequeno. Tamanho mínimo: '
}
},
fr: {
hint: 'Cliquez ou glissez le fichier ici.',
loading: 'Téléchargement…',
noSupported: 'Votre navigateur n\'est pas supporté. Utilisez IE10 + ou un autre navigateur s\'il vous plaît.',
success: 'Téléchargement réussit',
fail: 'Téléchargement echoué',
preview: 'Aperçu',
btn: {
off: 'Annuler',
close: 'Fermer',
back: 'Retour',
save: 'Enregistrer'
},
error: {
onlyImg: 'Image uniquement',
outOfSize: 'L\'image sélectionnée dépasse la taille maximum: ',
lowestPx: 'L\'image sélectionnée est trop petite. Dimensions attendues: '
}
},
nl: {
hint: 'Klik hier of sleep een afbeelding in dit vlak',
loading: 'Uploaden…',
noSupported: 'Je browser wordt helaas niet ondersteund. Gebruik IE10+ of een andere browser.',
success: 'Upload succesvol',
fail: 'Upload mislukt',
preview: 'Voorbeeld',
btn: {
off: 'Annuleren',
close: 'Sluiten',
back: 'Terug',
save: 'Opslaan'
},
error: {
onlyImg: 'Alleen afbeeldingen',
outOfSize: 'De afbeelding is groter dan: ',
lowestPx: 'De afbeelding is te klein! Minimale afmetingen: '
}
},
tr: {
hint: 'Tıkla veya yüklemek istediğini buraya sürükle',
loading: 'Yükleniyor…',
noSupported: 'Tarayıcı desteklenmiyor, lütfen IE10+ veya farklı tarayıcı kullanın',
success: 'Yükleme başarılı',
fail: 'Yüklemede hata oluştu',
preview: 'Önizle',
btn: {
off: 'İptal',
close: 'Kapat',
back: 'Geri',
save: 'Kaydet'
},
error: {
onlyImg: 'Sadece resim',
outOfSize: 'Resim yükleme limitini aşıyor: ',
lowestPx: 'Resmin boyutu çok küçük. En az olması gereken: '
}
},
'es-MX': {
hint: 'Selecciona o arrastra una imagen',
loading: 'Subiendo...',
noSupported: 'Tu navegador no es soportado, por favor usa IE10+ u otros navegadores más recientes',
success: 'Subido exitosamente',
fail: 'Sucedió un error',
preview: 'Vista previa',
btn: {
off: 'Cancelar',
close: 'Cerrar',
back: 'Atrás',
save: 'Guardar'
},
error: {
onlyImg: 'Únicamente imágenes',
outOfSize: 'La imagen excede el tamaño maximo:',
lowestPx: 'La imagen es demasiado pequeña. Se espera por lo menos:'
}
},
de: {
hint: 'Klick hier oder zieh eine Datei hier rein zum Hochladen',
loading: 'Hochladen…',
noSupported: 'Browser wird nicht unterstützt, bitte verwende IE10+ oder andere Browser',
success: 'Upload erfolgreich',
fail: 'Upload fehlgeschlagen',
preview: 'Vorschau',
btn: {
off: 'Abbrechen',
close: 'Schließen',
back: 'Zurück',
save: 'Speichern'
},
error: {
onlyImg: 'Nur Bilder',
outOfSize: 'Das Bild ist zu groß: ',
lowestPx: 'Das Bild ist zu klein. Mindestens: '
}
},
ja: {
hint: 'クリック・ドラッグしてファイルをアップロード',
loading: 'アップロード中...',
noSupported: 'このブラウザは対応されていません。IE10+かその他の主要ブラウザをお使いください。',
success: 'アップロード成功',
fail: 'アップロード失敗',
preview: 'プレビュー',
btn: {
off: 'キャンセル',
close: '閉じる',
back: '戻る',
save: '保存'
},
error: {
onlyImg: '画像のみ',
outOfSize: '画像サイズが上限を超えています。上限: ',
lowestPx: '画像が小さすぎます。最小サイズ: '
}
},
ua: {
hint: 'Натисніть, або перетягніть файл в це вікно',
loading: 'Завантажую……',
noSupported: 'Ваш браузер не підтримується, будь ласка скористайтесь IE10 + або іншими браузерами',
success: 'Завантаження виконано успішно',
fail: 'Помилка завантаження',
preview: 'Попередній перегляд',
btn: {
off: 'Відмінити',
close: 'Закрити',
back: 'Назад',
save: 'Зберегти'
},
error: {
onlyImg: 'Тільки зображення',
outOfSize: 'Зображення перевищує граничний розмір: ',
lowestPx: 'Мінімальний розмір зображення: '
}
},
it: {
hint: 'Clicca o trascina qui il file per caricarlo',
loading: 'Caricamento del file…',
noSupported: 'Browser non supportato, per favore usa IE10+ o un altro browser',
success: 'Caricamento completato',
fail: 'Caricamento fallito',
preview: 'Anteprima',
btn: {
off: 'Annulla',
close: 'Chiudi',
back: 'Indietro',
save: 'Salva'
},
error: {
onlyImg: 'Sono accettate solo immagini',
outOfSize: 'L\'immagine eccede i limiti di dimensione: ',
lowestPx: 'L\'immagine è troppo piccola. Il requisito minimo è: '
}
},
ar: {
hint: 'اضغط أو اسحب الملف هنا للتحميل',
loading: 'جاري التحميل...',
noSupported: 'المتصفح غير مدعوم ، يرجى استخدام IE10 + أو متصفح أخر',
success: 'تم التحميل بنجاح',
fail: 'فشل التحميل',
preview: 'معاينه',
btn: {
off: 'إلغاء',
close: 'إغلاق',
back: 'رجوع',
save: 'حفظ'
},
error: {
onlyImg: 'صور فقط',
outOfSize: 'تتجاوز الصوره الحجم المحدد: ',
lowestPx: 'حجم الصورة صغير جدا. من المتوقع على الأقل: '
}
},
ug: {
hint: 'مەزكۇر دائىرىنى چىكىپ رەسىم تاللاڭ ياكى رەسىمنى سۆرەپ ئەكىرىڭ',
loading: 'يوللىنىۋاتىدۇ...',
noSupported: 'تور كۆرگۈچ بۇ ئىقتىدارنى قوللىمايدۇ ، يۇقىرى نەشىردىكى تور كۆرگۈچنى ئىشلىتىڭ',
success: 'غەلبىلىك بولدى',
fail: 'مەغلۇب بولدى',
preview: 'ئۈنۈم رەسىم',
btn: {
off: 'بولدى قىلىش',
close: 'تاقاش',
back: 'ئالدىنقى قەدەم',
save: 'ساقلاش'
},
error: {
onlyImg: 'پەقەت رەسىم فورماتىنىلا قوللايدۇ',
outOfSize: 'رەسىم چوڭ - كىچىكلىكى چەكتىن ئىشىپ كەتتى',
lowestPx: 'رەسىمنىڭ ئەڭ كىچىك ئۆلچىمى :'
}
},
th: {
hint: 'คลิ๊กหรือลากรูปมาที่นี่',
loading: 'กำลังอัพโหลด…',
noSupported: 'เบราเซอร์ไม่รองรับ, กรุณาใช้ IE เวอร์ชั่น 10 ขึ้นไป หรือใช้เบราเซอร์ตัวอื่น',
success: 'อัพโหลดสำเร็จ',
fail: 'อัพโหลดล้มเหลว',
preview: 'ตัวอย่าง',
btn: {
off: 'ยกเลิก',
close: 'ปิด',
back: 'กลับ',
save: 'บันทึก'
},
error: {
onlyImg: 'ไฟล์ภาพเท่านั้น',
outOfSize: 'ไฟล์ใหญ่เกินกำหนด: ',
lowestPx: 'ไฟล์เล็กเกินไป. อย่างน้อยต้องมีขนาด: '
}
},
mm: {
hint: 'ဖိုင်ကို ဤနေရာတွင် နှိပ်၍ (သို့) ဆွဲထည့်၍ တင်ပါ',
loading: 'တင်နေသည်…',
noSupported: 'ဤဘရောက်ဇာကို အထောက်အပံ့ မပေးပါ၊ ကျေးဇူးပြု၍ IE10+ သို့မဟုတ် အခြား ဘရောက်ဇာ ကို အသုံးပြုပါ',
success: 'ဖိုင်တင်နေမှု မပြီးမြောက်ပါ',
fail: 'ဖိုင်တင်နေမှု မအောင်မြင်ပါ',
preview: 'အစမ်းကြည့်',
btn: {
off: 'မလုပ်တော့ပါ',
close: 'ပိတ်မည်',
back: 'နောက်သို့',
save: 'သိမ်းမည်'
},
error: {
onlyImg: 'ဓာတ်ပုံ သီးသန့်သာ',
outOfSize: 'ဓာတ်ပုံဆိုဒ် ကြီးလွန်းသည် ။ အများဆုံး ဆိုဒ် : ',
lowestPx: 'ဓာတ်ပုံဆိုဒ် သေးလွန်းသည်။ အနည်းဆုံး ဆိုဒ် : '
}
},
se: {
hint: 'Klicka eller dra en fil hit för att ladda upp den',
loading: 'Laddar upp…',
noSupported: 'Din webbläsare stöds inte, vänligen använd IE10+ eller andra webbläsare',
success: 'Uppladdning lyckades',
fail: 'Uppladdning misslyckades',
preview: 'Förhandsgranska',
btn: {
off: 'Avbryt',
close: 'Stäng',
back: 'Tillbaka',
save: 'Spara'
},
error: {
onlyImg: 'Endast bilder',
outOfSize: 'Bilden är större än max-gränsen: ',
lowestPx: 'Bilden är för liten. Minimum är: '
}
}
});
// CONCATENATED MODULE: ./packages/image-editor/src/mimes.js
/* harmony default export */ var mimes = ({
'jpg': 'image/jpeg',
'png': 'image/png',
'gif': 'image/gif',
'svg': 'image/svg+xml',
'psd': 'image/photoshop'
});
// CONCATENATED MODULE: ./packages/image-editor/src/data2blob.js
/**
* database64文件格式转换为2进制
*
* @param {[String]} data dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
* @param {[String]} mime [description]
* @return {[blob]} [description]
*/
/* harmony default export */ var data2blob = (function (data, mime) {
data = data.split(',')[1];
data = window.atob(data);
var ia = new Uint8Array(data.length);
for (var i = 0; i < data.length; i++) {
ia[i] = data.charCodeAt(i);
};
// canvas.toDataURL 返回的默认格式就是 image/png
return new Blob([ia], {
type: mime
});
});;
// CONCATENATED MODULE: ./packages/image-editor/src/data2file.js
/**
* database64文件格式转换为2进制
*
* @param {[String]} data dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
* @param {[String]} mime [description]
* @return {[File]} [description]
*/
/* harmony default export */ var data2file = (function (data, mime, filename) {
data = data.split(',')[1];
data = window.atob(data);
var ia = new Uint8Array(data.length);
for (var i = 0; i < data.length; i++) {
ia[i] = data.charCodeAt(i);
};
// canvas.toDataURL 返回的默认格式就是 image/png
/*
return new Blob([ia], {
type: mime
});
*/
var file = new File([ia], filename, { type: mime });
return file;
});;
// CONCATENATED MODULE: ./packages/image-editor/src/effectRipple.js
/**
* 点击波纹效果
*
* @param {[event]} e [description]
* @param {[Object]} arg_opts [description]
* @return {[bollean]} [description]
*/
/* harmony default export */ var effectRipple = (function (e, arg_opts) {
var opts = Object.assign({
ele: e.target, // 波纹作用元素
type: 'hit', // hit点击位置扩散 center中心点扩展
bgc: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
}, arg_opts),
target = opts.ele;
if (target) {
var rect = target.getBoundingClientRect(),
ripple = target.querySelector('.e-ripple');
if (!ripple) {
ripple = document.createElement('span');
ripple.className = 'e-ripple';
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
target.appendChild(ripple);
} else {
ripple.className = 'e-ripple';
}
switch (opts.type) {
case 'center':
ripple.style.top = rect.height / 2 - ripple.offsetHeight / 2 + 'px';
ripple.style.left = rect.width / 2 - ripple.offsetWidth / 2 + 'px';
break;
default:
ripple.style.top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop + 'px';
ripple.style.left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft + 'px';
}
ripple.style.backgroundColor = opts.bgc;
ripple.className = 'e-ripple z-active';
return false;
}
});;
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/image-editor/src/main.vue?vue&type=script&lang=js&
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
/* harmony default export */ var mainvue_type_script_lang_js_ = ({
name: 'bml-image-editor',
props: {
// 是否显示对话框
visible: {
type: Boolean,
default: false
},
edit: {
type: Boolean,
default: false
},
// 编辑文件URL
file: {
type: String
},
// 文件名
filename: {
type: String
},
// 剪裁图片的宽
width: {
type: Number,
default: 200
},
// 剪裁图片的高
height: {
type: Number,
default: 200
},
// 不显示旋转功能
noRotate: {
type: Boolean,
default: true
},
// 不预览圆形图片
noCircle: {
type: Boolean,
default: false
},
// 不预览方形图片
noSquare: {
type: Boolean,
default: false
},
// 语言类型
langType: {
type: String,
'default': 'zh'
},
// 语言包
langExt: {
type: Object,
'default': null
},
// 图片上传格式
imgFormat: {
type: String,
'default': 'png'
},
// 图片背景 jpg情况下生效
imgBgc: {
type: String,
'default': '#fff'
},
// 成功时调用函数
onSuccess: Function,
onClose: Function
},
data: function data() {
var that = this,
imgFormat = that.imgFormat,
langType = that.langType,
langExt = that.langExt,
width = that.width,
height = that.height,
isSupported = true,
allowImgFormat = ['jpg', 'png'],
tempImgFormat = allowImgFormat.indexOf(imgFormat) === -1 ? 'jpg' : imgFormat,
lang = language[langType] ? language[langType] : language['en'],
mime = mimes[tempImgFormat];
// 规范图片格式
that.imgFormat = tempImgFormat;
if (langExt) {
Object.assign(lang, langExt);
}
if (typeof FormData != 'function') {
isSupported = false;
}
return {
// 图片的mime
mime: mime,
// 语言包
lang: lang,
// 浏览器是否支持该控件
isSupported: isSupported,
// 浏览器是否支持触屏事件
isSupportTouch: document.hasOwnProperty("ontouchstart"),
// 步骤
step: 1, //1选择文件 2剪裁 3上传
// 上传状态及进度
loading: 0, //0未开始 1正在 2成功 3错误
progress: 0,
// 是否有错误及错误信息
hasError: false,
errorMsg: '',
// 需求图宽高比
ratio: width / height,
// 原图地址、生成图片地址
sourceImg: null,
sourceImgUrl: '',
createImgUrl: '',
// 原图片拖动事件初始值
sourceImgMouseDown: {
on: false,
mX: 0, //鼠标按下的坐标
mY: 0,
x: 0, //scale原图坐标
y: 0
},
// 生成图片预览的容器大小
previewContainer: {
width: 100,
height: 100
},
// 原图容器宽高
sourceImgContainer: { // sic
width: 240,
height: 184 // 如果生成图比例与此一致会出现bug，先改成特殊的格式吧，哈哈哈
},
// 原图展示属性
scale: {
zoomAddOn: false, //按钮缩放事件开启
zoomSubOn: false, //按钮缩放事件开启
range: 1, //最大100
x: 0,
y: 0,
width: 0,
height: 0,
maxWidth: 0,
maxHeight: 0,
minWidth: 0, //最宽
minHeight: 0,
naturalWidth: 0, //原宽
naturalHeight: 0
}
};
},
computed: {
// 进度条样式
progressStyle: function progressStyle() {
var progress = this.progress;
return {
width: progress + '%'
};
},
// 原图样式
sourceImgStyle: function sourceImgStyle() {
var scale = this.scale,
sourceImgMasking = this.sourceImgMasking,
top = scale.y + sourceImgMasking.y + 'px',
left = scale.x + sourceImgMasking.x + 'px';
return {
top: top,
left: left,
width: scale.width + 'px',
height: scale.height + 'px' // 兼容 Opera
};
},
// 原图蒙版属性
sourceImgMasking: function sourceImgMasking() {
var width = this.width,
height = this.height,
ratio = this.ratio,
sourceImgContainer = this.sourceImgContainer,
sic = sourceImgContainer,
sicRatio = sic.width / sic.height,
x = 0,
y = 0,
w = sic.width,
h = sic.height,
scale = 1;
if (ratio < sicRatio) {
scale = sic.height / height;
w = sic.height * ratio;
x = (sic.width - w) / 2;
}
if (ratio > sicRatio) {
scale = sic.width / width;
h = sic.width / ratio;
y = (sic.height - h) / 2;
}
return {
scale: scale, // 蒙版相对需求宽高的缩放
x: x,
y: y,
width: w,
height: h
};
},
// 原图遮罩样式
sourceImgShadeStyle: function sourceImgShadeStyle() {
var sourceImgMasking = this.sourceImgMasking,
sourceImgContainer = this.sourceImgContainer,
sic = sourceImgContainer,
sim = sourceImgMasking,
w = sim.width == sic.width ? sim.width : (sic.width - sim.width) / 2,
h = sim.height == sic.height ? sim.height : (sic.height - sim.height) / 2;
return {
width: w + 'px',
height: h + 'px'
};
},
previewStyle: function previewStyle() {
var width = this.width,
height = this.height,
ratio = this.ratio,
previewContainer = this.previewContainer,
pc = previewContainer,
w = pc.width,
h = pc.height,
pcRatio = w / h;
if (ratio < pcRatio) {
w = pc.height * ratio;
}
if (ratio > pcRatio) {
h = pc.width / ratio;
}
return {
width: w + 'px',
height: h + 'px'
};
}
},
methods: {
// 点击波纹效果
ripple: function ripple(e) {
effectRipple(e);
},
// 关闭控件
off: function off() {
if (this.onClose) {
this.onClose();
}
this.$emit('close', true);
},
// 设置步骤
setStep: function setStep(no) {
var _this = this;
// 延时是为了显示动画效果呢，哈哈哈
setTimeout(function () {
_this.step = no;
}, 200);
},
/* 图片选择区域函数绑定
---------------------------------------------------------------*/
preventDefault: function preventDefault(e) {
e.preventDefault();
return false;
},
handleClick: function handleClick(e) {
if (this.loading !== 1) {
if (e.target !== this.$refs.fileinput) {
e.preventDefault();
if (document.activeElement !== this.$refs) {
this.$refs.fileinput.click();
}
}
}
},
handleChange: function handleChange(e) {
e.preventDefault();
if (this.loading !== 1) {
var files = e.target.files || e.dataTransfer.files;
this.reset();
if (this.checkFile(files[0])) {
this.setSourceImg(files[0]);
}
}
},
/* ---------------------------------------------------------------*/
// 检测选择的文件是否合适
checkFile: function checkFile(file) {
var that = this,
lang = that.lang,
maxSize = that.maxSize;
// 仅限图片
if (file.type.indexOf('image') === -1) {
that.hasError = true;
that.errorMsg = lang.error.onlyImg;
return false;
}
// 超出大小
if (file.size / 1024 > maxSize) {
that.hasError = true;
that.errorMsg = lang.error.outOfSize + maxSize + 'kb';
return false;
}
return true;
},
// 重置控件
reset: function reset() {
var that = this;
that.loading = 0;
that.hasError = false;
that.errorMsg = '';
that.progress = 0;
},
// 设置图片源
setSourceUrl: function setSourceUrl(file) {
this.sourceImgUrl = file;
this.startCrop();
},
// 设置图片源
setSourceImg: function setSourceImg(file) {
this.$emit('src-file-set', file.name, file.type, file.size);
var that = this,
fr = new FileReader();
fr.onload = function (e) {
that.sourceImgUrl = fr.result;
that.startCrop();
};
fr.readAsDataURL(file);
},
// 剪裁前准备工作
startCrop: function startCrop() {
var that = this,
width = that.width,
height = that.height,
ratio = that.ratio,
scale = that.scale,
sourceImgUrl = that.sourceImgUrl,
sourceImgMasking = that.sourceImgMasking,
lang = that.lang,
sim = sourceImgMasking,
img = new Image();
img.src = sourceImgUrl;
img.onload = function () {
var nWidth = img.naturalWidth,
nHeight = img.naturalHeight,
nRatio = nWidth / nHeight,
w = sim.width,
h = sim.height,
x = 0,
y = 0;
// 图片像素不达标
if (nWidth < width || nHeight < height) {
that.hasError = true;
that.errorMsg = lang.error.lowestPx + width + '*' + height;
return false;
}
if (ratio > nRatio) {
h = w / nRatio;
y = (sim.height - h) / 2;
}
if (ratio < nRatio) {
w = h * nRatio;
x = (sim.width - w) / 2;
}
scale.range = 0;
scale.x = x;
scale.y = y;
scale.width = w;
scale.height = h;
scale.minWidth = w;
scale.minHeight = h;
scale.maxWidth = nWidth * sim.scale;
scale.maxHeight = nHeight * sim.scale;
scale.naturalWidth = nWidth;
scale.naturalHeight = nHeight;
that.sourceImg = img;
that.createImg();
that.setStep(2);
};
},
// 鼠标按下图片准备移动
imgStartMove: function imgStartMove(e) {
e.preventDefault();
// 支持触摸事件，则鼠标事件无效
if (this.isSupportTouch && !e.targetTouches) {
return false;
}
var et = e.targetTouches ? e.targetTouches[0] : e,
sourceImgMouseDown = this.sourceImgMouseDown,
scale = this.scale,
simd = sourceImgMouseDown;
simd.mX = et.screenX;
simd.mY = et.screenY;
simd.x = scale.x;
simd.y = scale.y;
simd.on = true;
},
// 鼠标按下状态下移动，图片移动
imgMove: function imgMove(e) {
e.preventDefault();
// 支持触摸事件，则鼠标事件无效
if (this.isSupportTouch && !e.targetTouches) {
return false;
}
var et = e.targetTouches ? e.targetTouches[0] : e,
_sourceImgMouseDown = this.sourceImgMouseDown,
on = _sourceImgMouseDown.on,
mX = _sourceImgMouseDown.mX,
mY = _sourceImgMouseDown.mY,
x = _sourceImgMouseDown.x,
y = _sourceImgMouseDown.y,
scale = this.scale,
sourceImgMasking = this.sourceImgMasking,
sim = sourceImgMasking,
nX = et.screenX,
nY = et.screenY,
dX = nX - mX,
dY = nY - mY,
rX = x + dX,
rY = y + dY;
if (!on) return;
if (rX > 0) {
rX = 0;
}
if (rY > 0) {
rY = 0;
}
if (rX < sim.width - scale.width) {
rX = sim.width - scale.width;
}
if (rY < sim.height - scale.height) {
rY = sim.height - scale.height;
}
scale.x = rX;
scale.y = rY;
},
// 顺时针旋转图片
rotateImg: function rotateImg(e) {
var sourceImg = this.sourceImg,
_scale = this.scale,
naturalWidth = _scale.naturalWidth,
naturalHeight = _scale.naturalHeight,
width = naturalHeight,
height = naturalWidth,
canvas = this.$refs.canvas,
ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = 'rgba(0,0,0,0)';
ctx.fillRect(0, 0, width, height);
ctx.translate(width, 0);
ctx.rotate(Math.PI * 90 / 180);
ctx.drawImage(sourceImg, 0, 0, naturalWidth, naturalHeight);
var imgUrl = canvas.toDataURL(mimes['png']);
this.sourceImgUrl = imgUrl;
this.startCrop();
},
// 按钮按下开始放大
startZoomAdd: function startZoomAdd(e) {
var that = this,
scale = that.scale;
scale.zoomAddOn = true;
function zoom() {
if (scale.zoomAddOn) {
var range = scale.range >= 100 ? 100 : ++scale.range;
that.zoomImg(range);
setTimeout(function () {
zoom();
}, 60);
}
}
zoom();
},
// 按钮松开或移开取消放大
endZoomAdd: function endZoomAdd(e) {
this.scale.zoomAddOn = false;
},
// 按钮按下开始缩小
startZoomSub: function startZoomSub(e) {
var that = this,
scale = that.scale;
scale.zoomSubOn = true;
function zoom() {
if (scale.zoomSubOn) {
var range = scale.range <= 0 ? 0 : --scale.range;
that.zoomImg(range);
setTimeout(function () {
zoom();
}, 60);
}
}
zoom();
},
// 按钮松开或移开取消缩小
endZoomSub: function endZoomSub(e) {
var scale = this.scale;
scale.zoomSubOn = false;
},
zoomChange: function zoomChange(e) {
this.zoomImg(e.target.value);
},
// 缩放原图
zoomImg: function zoomImg(newRange) {
var that = this,
sourceImgMasking = this.sourceImgMasking,
sourceImgMouseDown = this.sourceImgMouseDown,
scale = this.scale,
maxWidth = scale.maxWidth,
maxHeight = scale.maxHeight,
minWidth = scale.minWidth,
minHeight = scale.minHeight,
width = scale.width,
height = scale.height,
x = scale.x,
y = scale.y,
range = scale.range,
sim = sourceImgMasking,
sWidth = sim.width,
sHeight = sim.height,
nWidth = minWidth + (maxWidth - minWidth) * newRange / 100,
nHeight = minHeight + (maxHeight - minHeight) * newRange / 100,
nX = sWidth / 2 - nWidth / width * (sWidth / 2 - x),
nY = sHeight / 2 - nHeight / height * (sHeight / 2 - y);
// 判断新坐标是否超过蒙版限制
if (nX > 0) {
nX = 0;
}
if (nY > 0) {
nY = 0;
}
if (nX < sWidth - nWidth) {
nX = sWidth - nWidth;
}
if (nY < sHeight - nHeight) {
nY = sHeight - nHeight;
}
// 赋值处理
scale.x = nX;
scale.y = nY;
scale.width = nWidth;
scale.height = nHeight;
scale.range = newRange;
setTimeout(function () {
if (scale.range == newRange) {
that.createImg();
}
}, 300);
},
/**
* 生成需求图片
*
* 根据Canvas生成所需图片，并保存URL
*/
createImg: function createImg(e) {
var that = this,
imgFormat = that.imgFormat,
imgBgc = that.imgBgc,
mime = that.mime,
sourceImg = that.sourceImg,
_that$scale = that.scale,
x = _that$scale.x,
y = _that$scale.y,
width = _that$scale.width,
height = _that$scale.height,
scale = that.sourceImgMasking.scale,
canvas = that.$refs.canvas,
ctx = canvas.getContext('2d');
if (e) {
// 取消鼠标按下移动状态
that.sourceImgMouseDown.on = false;
}
canvas.width = that.width;
canvas.height = that.height;
ctx.clearRect(0, 0, that.width, that.height);
if (imgFormat == 'png') {
ctx.fillStyle = 'rgba(0,0,0,0)';
} else {
// 如果jpg 为透明区域设置背景，默认白色
ctx.fillStyle = imgBgc;
}
ctx.fillRect(0, 0, that.width, that.height);
ctx.drawImage(sourceImg, x / scale, y / scale, width / scale, height / scale);
that.createImgUrl = canvas.toDataURL(mime);
},
prepareUpload: function prepareUpload() {
var url = this.url,
createImgUrl = this.createImgUrl,
field = this.field,
ki = this.ki;
var file = data2file(createImgUrl, 'image/png', this.filename + '.png');
this.setSourceImg(file);
if (this.onSuccess) {
this.onSuccess(file);
}
this.$emit('success', file);
//this.off();
}
},
watch: {
file: function file(newFile, oldFile) {
if (newFile) {
this.setSourceUrl(this.file);
this.startCrop();
}
},
edit: function edit(newValue, oldValue) {
if (this.edit) {
this.step = 2;
} else {
this.step = 1;
}
}
},
created: function created() {
var _this2 = this;
// 绑定按键esc隐藏此插件事件
document.addEventListener('keyup', function (e) {
if (_this2.visible && (e.key == 'Escape' || e.keyCode == 27)) {
_this2.off();
}
});
}
});
// CONCATENATED MODULE: ./packages/image-editor/src/main.vue?vue&type=script&lang=js&
/* harmony default export */ var src_mainvue_type_script_lang_js_ = (mainvue_type_script_lang_js_);
// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__(0);
// CONCATENATED MODULE: ./packages/image-editor/src/main.vue
/* normalize component */
var component = Object(componentNormalizer["a" /* default */])(
src_mainvue_type_script_lang_js_,
render,
staticRenderFns,
false,
null,
null,
null
)
/* hot reload */
if (false