Skip to content

T
techbook
Commit 67ac1ed3 authored by zhangyanni's avatar zhangyanni
Browse files
Options

裁剪

parent 58c0892f
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 891 additions and 2 deletions
package.json
View file @ 67ac1ed3
......@@ -29,7 +29,6 @@
"vue-awesome-swiper": "^3.1.3",
"vue-count-to": "^1.0.13",
"vue-i18n": "^8.14.0",
"vue-image-crop-upload": "^2.5.0",
"vue-qrcode-component": "^2.1.1",
"vue-router": "^3.0.3",
"vue-select": "^3.1.0",
......
src/components/common/uploadCmpt.vue
View file @ 67ac1ed3
......@@ -22,7 +22,7 @@
</div>
</template>
<script>
import myUpload from 'vue-image-crop-upload';
import myUpload from '../vue-image-crop-upload';
export default {
props:{
returnFrom:{
......
src/components/vue-image-crop-upload/.bowerrc 0 → 100644
View file @ 67ac1ed3
{
"directory" : "vendor/bower"
}
src/components/vue-image-crop-upload/.eslintrc.js 0 → 100644
View file @ 67ac1ed3
module.exports = {
"parser": "babel-eslint",
"parserOptions": {
"sourceType": "module",
"allowImportExportEverywhere": false,
"codeFrame": false
},
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": "eslint:recommended",
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"windows"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
};
src/components/vue-image-crop-upload/.scss-lint.yml 0 → 100644
View file @ 67ac1ed3
# Default application configuration that all configurations inherit from.
scss_files: "**/*.scss"
plugin_directories: ['.scss-linters']
# List of gem names to load custom linters from (make sure they are already
# installed)
plugin_gems: []
# Default severity of all linters.
severity: warning
linters:
BangFormat:
enabled: true
space_before_bang: true
space_after_bang: false
BemDepth:
enabled: false
max_elements: 1
BorderZero:
enabled: true
convention: none # or `zero`
ChainedClasses:
enabled: false
ColorKeyword:
enabled: true
ColorVariable:
enabled: false
Comment:
enabled: false
style: silent
DebugStatement:
enabled: true
DeclarationOrder:
enabled: true
DisableLinterReason:
enabled: false
DuplicateProperty:
enabled: true
ElsePlacement:
enabled: true
style: same_line # or 'new_line'
EmptyLineBetweenBlocks:
enabled: true
ignore_single_line_blocks: true
EmptyRule:
enabled: true
ExtendDirective:
enabled: false
FinalNewline:
enabled: true
present: true
HexLength:
enabled: true
style: short # or 'long'
HexNotation:
enabled: false
style: uppercase # or 'lowercase'
HexValidation:
enabled: true
IdSelector:
enabled: true
ImportantRule:
enabled: false
ImportPath:
enabled: true
leading_underscore: false
filename_extension: false
Indentation:
enabled: true
allow_non_nested_indentation: false
character: tab # or 'space'
width: 1
LeadingZero:
enabled: true
style: include_zero # or 'exclude_zero'
MergeableSelector:
enabled: true
force_nesting: true
NameFormat:
enabled: true
allow_leading_underscore: true
convention: snake_case # or 'camel_case', or 'hyphenated_lowercase', or a regex pattern
NestingDepth:
enabled: false
max_depth: 8
ignore_parent_selectors: false
PlaceholderInExtend:
enabled: false
PrivateNamingConvention:
enabled: false
prefix: _
PropertyCount:
enabled: false
include_nested: false
max_properties: 10
PropertySortOrder:
enabled: false
ignore_unspecified: false
min_properties: 2
separate_groups: false
PropertySpelling:
enabled: true
extra_properties: []
disabled_properties: []
PropertyUnits:
enabled: true
global: [
'ch', 'em', 'ex', 'rem', # Font-relative lengths
'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
'vh', 'vw', 'vmin', 'vmax', # Viewport-percentage lengths
'deg', 'grad', 'rad', 'turn', # Angle
'ms', 's', # Duration
'Hz', 'kHz', # Frequency
'dpi', 'dpcm', 'dppx', # Resolution
'%'] # Other
properties: {}
PseudoElement:
enabled: true
QualifyingElement:
enabled: true
allow_element_with_attribute: true
allow_element_with_class: false
allow_element_with_id: false
SelectorDepth:
enabled: false
max_depth: 8
SelectorFormat:
enabled: true
convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
Shorthand:
enabled: true
allowed_shorthands: [1, 2, 3, 4]
SingleLinePerProperty:
enabled: true
allow_single_line_rule_sets: true
SingleLinePerSelector:
enabled: true
SpaceAfterComma:
enabled: true
style: one_space # or 'no_space', or 'at_least_one_space'
SpaceAfterComment:
enabled: false
style: one_space # or 'no_space', or 'at_least_one_space'
allow_empty_comments: true
SpaceAfterPropertyColon:
enabled: true
style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
SpaceAfterPropertyName:
enabled: true
SpaceAfterVariableColon:
enabled: false
style: one_space # or 'no_space', 'at_least_one_space' or 'one_space_or_newline'
SpaceAfterVariableName:
enabled: true
SpaceAroundOperator:
enabled: true
style: one_space # or 'at_least_one_space', or 'no_space'
SpaceBeforeBrace:
enabled: true
style: space # or 'new_line'
allow_single_line_padding: false
SpaceBetweenParens:
enabled: true
spaces: 0
StringQuotes:
enabled: true
style: single_quotes # or double_quotes
TrailingSemicolon:
enabled: true
TrailingWhitespace:
enabled: true
TrailingZero:
enabled: false
TransitionAll:
enabled: false
UnnecessaryMantissa:
enabled: true
UnnecessaryParentReference:
enabled: true
UrlFormat:
enabled: true
UrlQuotes:
enabled: true
VariableForProperty:
enabled: false
properties: []
VendorPrefix:
enabled: true
identifier_list: base
additional_identifiers: []
excluded_identifiers: []
ZeroUnit:
enabled: true
Compass::*:
enabled: false
src/components/vue-image-crop-upload/README.md 0 → 100644
View file @ 67ac1ed3
This diff is collapsed.
src/components/vue-image-crop-upload/example-2/demo-src.js 0 → 100644
View file @ 67ac1ed3
This diff is collapsed.
src/components/vue-image-crop-upload/example-2/demo.html 0 → 100644
View file @ 67ac1ed3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<style media="screen">
* {
margin: 0;
padding: 0;
}
body {
padding: 100px 20%;
font-family: '微软雅黑';
}
label {
display: block;
margin-bottom: 10px;
}
#app {
position: relative;
text-align: center;
}
.wrap {
margin-bottom: 5px;
}
.btn {
display: block;
margin: 30px auto 10px auto;
width: 120px;
height: 40px;
font-size: 14px;
line-height: 40px;
text-align: center;
background-color: rgba(0, 0, 0, 0.08);
cursor: pointer;
}
.avatar {
display: block;
width: 200px;
margin: 10px auto;
}
</style>
</head>
<body>
<div id="app">
<div class="item">
<a class="btn" @click="toggleShow1">设置头像</a>
<img class="avatar" v-if="avatarUrl1" :src="avatarUrl1" v-show="true" style="display: none;">
<my-upload url="https://httpbin.org/post" img-format="jpg" img-bgc="#fff"
v-model="show1"
field="avatar1"
ki="0"
@crop-success="cropSuccess"
@crop-upload-success="cropUploadSuccess"
@crop-upload-fail="cropUploadFail"
:no-rotate="false"
:headers="headers"
:params="otherParams"></my-upload>
</div>
<div class="item">
<a class="btn" @click="toggleShow2">Set Avatar</a>
<img class="avatar" v-if="avatarUrl2" :src="avatarUrl2" v-show="true" style="display: none;">
<my-upload url="https://httpbin.org/post"
@crop-success="cropSuccess"
@crop-upload-success="cropUploadSuccess"
@crop-upload-fail="cropUploadFail"
:no-square="true"
field="avatar2"
ki="0"
lang-type="en"
v-model="show2"
:headers="headers"
:params="otherParams"></my-upload>
</div>
<div class="item">
<a class="btn" @click="toggleShow3">аватара</a>
<img class="avatar" v-if="avatarUrl3" :src="avatarUrl3" v-show="true" style="display: none;">
<my-upload url="https://httpbin.org/post"
@crop-success="cropSuccess"
@crop-upload-success="cropUploadSuccess"
@crop-upload-fail="cropUploadFail"
:no-circle="true"
field="avatar3"
ki="0"
lang-type="ru"
v-model="show3"
:headers="headers"
:params="otherParams"></my-upload>
</div>
</div>
<script src="vue.js"></script>
<script src="demo-src.js"></script>
</body>
</html>
src/components/vue-image-crop-upload/example-2/demo.js 0 → 100644
View file @ 67ac1ed3
import 'babel-polyfill';
import myUpload from '../upload-2.vue';
const Vue = window.Vue;
new Vue({
el: '#app',
data: {
show1: false,
show2: false,
show3: false,
avatarUrl1: null,
avatarUrl2: null,
avatarUrl3: null,
otherParams: {
token: '123456798',
name: 'img'
},
headers: {
smail: '*_~'
}
},
components: {
'my-upload': myUpload
},
methods: {
toggleShow1() {
let {show1} = this;
this.show1 = !show1;
},
toggleShow2() {
let {show2} = this;
this.show2 = !show2;
},
toggleShow3() {
let {show3} = this;
this.show3 = !show3;
},
cropSuccess(data, field, key) {
if (field == 'avatar1') {
this.avatarUrl1 = data;
} else if(field == 'avatar2') {
this.avatarUrl2 = data;
} else {
this.avatarUrl3 = data;
}
console.log('-------- 剪裁成功 --------');
},
cropUploadSuccess(data, field, key) {
console.log('-------- 上传成功 --------');
console.log(data);
console.log('field: ' + field);
console.log('key: ' + key);
},
cropUploadFail(status, field, key) {
console.log('-------- 上传失败 --------');
console.log(status);
console.log('field: ' + field);
console.log('key: ' + key);
}
}
});
src/components/vue-image-crop-upload/example-2/vue.js 0 → 100644
View file @ 67ac1ed3
This diff is collapsed.
src/components/vue-image-crop-upload/example/demo-src.js 0 → 100644
View file @ 67ac1ed3
This diff is collapsed.
src/components/vue-image-crop-upload/example/demo.html 0 → 100644
View file @ 67ac1ed3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<style media="screen">
* {
margin: 0;
padding: 0;
}
body {
padding: 100px 20%;
font-family: '微软雅黑';
}
label {
display: block;
margin-bottom: 10px;
}
#app {
position: relative;
text-align: center;
}
.wrap {
margin-bottom: 5px;
}
.btn {
display: block;
margin: 30px auto 10px auto;
width: 120px;
height: 40px;
font-size: 14px;
line-height: 40px;
text-align: center;
background-color: rgba(0, 0, 0, 0.08);
cursor: pointer;
}
.avatar {
display: block;
width: 200px;
margin: 10px auto;
}
</style>
</head>
<body>
<div id="app">
<div class="item">
<a class="btn" @click="toggleShow1">设置头像</a>
<img class="avatar" v-if="avatarUrl1" :src="avatarUrl1" v-show="true" style="display: none;">
<my-upload url="https://httpbin.org/post" img-format="png"
:width="400"
:height="300"
field="avatar1"
key="0"
:no-rotate="false"
:value.sync="show1"
:params="otherParams"></my-upload>
</div>
<div class="item">
<a class="btn" @click="toggleShow2">Set Avatar</a>
<img class="avatar" v-if="avatarUrl2" :src="avatarUrl2" v-show="true" style="display: none;">
<my-upload url="https://httpbin.org/post"
field="avatar2"
key="0"
lang-type="en"
:value.sync="show2"
:params="otherParams"></my-upload>
</div>
<div class="item">
<a class="btn" @click="toggleShow3">аватара</a>
<img class="avatar" v-if="avatarUrl3" :src="avatarUrl3" v-show="true" style="display: none;">
<my-upload url="https://httpbin.org/post"
field="avatar3"
key="0"
lang-type="ru"
:value.sync="show3"
:params="otherParams"></my-upload>
</div>
</div>
<script src="demo-src.js"></script>
</body>
</html>
src/components/vue-image-crop-upload/example/demo.js 0 → 100644
View file @ 67ac1ed3
import 'babel-polyfill';
import Vue from 'vue';
import myUpload from '../upload-1.vue';
new Vue({
el: '#app',
data: {
show1: false,
show2: false,
show3: false,
avatarUrl1: null,
avatarUrl2: null,
avatarUrl3: null,
otherParams: {
token: '123456798',
name: 'img'
}
},
components: {
'my-upload': myUpload
},
methods: {
toggleShow1() {
let {show1} = this;
this.show1 = !show1;
},
toggleShow2() {
let {show2} = this;
this.show2 = !show2;
},
toggleShow3() {
let {show3} = this;
this.show3 = !show3;
}
},
events: {
cropSuccess(data, field, key) {
if (field == 'avatar1') {
this.avatarUrl1 = data;
} else if(field == 'avatar2') {
this.avatarUrl2 = data;
} else {
this.avatarUrl3 = data;
}
console.log('-------- 裁剪成功 --------');
console.log(field);
},
cropUploadSuccess(data, field, key) {
console.log('-------- 上传成功 --------');
console.log(data);
console.log('field: ' + field);
console.log('key: ' + key);
},
cropUploadFail(status, field, key) {
console.log('-------- 上传失败 --------');
console.log(status);
console.log('field: ' + field);
console.log('key: ' + key);
}
}
});
src/components/vue-image-crop-upload/gulpfile.js 0 → 100644
View file @ 67ac1ed3
/******************************************************
* ----前端工程自动化构建---- *
* *
* @author dai-siki同学 < 851733175@qq.com > *
******************************************************/
// import package
const $ = require('gulp-load-plugins')(),
webpack = require('webpack-stream'),
named = require('vinyl-named'),
browserSync = require('browser-sync').create(),
reload = browserSync.reload,
gulp = require('gulp');
/** 开发
-------------------------------------------------------------*/
gulp.task('css', function() {
gulp.src('./scss/*.scss').pipe($.sass()).pipe($.autoprefixer('last 10 version')).pipe(gulp.dest('./'));
});
// jS task
gulp.task('js', function() {
var webpack_config = {
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
query: {
presets: [
'es2015', 'stage-3'
],
plugins: [
['transform-runtime', {
helpers: false,
polyfill: false,
regenerator: true
}]
]
}
}, {
test: /\.css$/,
loaders: ['style', 'css']
}, {
test: /\.json$/,
loaders: ['json']
}, {
test: /\.(scss|sass)$/,
loaders: ['style', 'css', 'sass']
}, {
test: /\.(html|tpl)$/,
loaders: ['html']
}, {
test: /\.vue$/,
loaders: ['vue']
}
]
}
};
gulp.src('./example/demo.js')
.pipe($.plumber({errorHandler: _errrHandler}))
.pipe(named(function() {
return 'demo-src';
}))
.pipe(webpack(webpack_config))/*.pipe($.uglify())*/
.pipe(gulp.dest('./example'));
gulp.src('./example-2/demo.js')
.pipe($.plumber({errorHandler: _errrHandler}))
.pipe(named(function() {
return 'demo-src';
}))
.pipe(webpack(webpack_config))/*.pipe($.uglify())*/
.pipe(gulp.dest('./example-2'));
});
gulp.task('serve', function() {
browserSync.init({
server: {
baseDir: './'
}
});
gulp.watch([
'./example-2/demo.js','./example/demo.js', './*.vue', './*.css'
], ['js']);
gulp.watch(['./scss/*.scss'], ['css']);
gulp.watch([
'./example/**/*.html', './example/demo-src.js', './example-2/**/*.html', './example-2/demo-src.js'
], function() {
reload();
});
});
gulp.task('default', ['serve']);
/** 辅助函数
-------------------------------------------------------------*/
//错误提示
function _errrHandler(e) {
$.util.beep();
$.util.log(e);
}
src/components/vue-image-crop-upload/package.json 0 → 100644
View file @ 67ac1ed3
{
"_from": "vue-image-crop-upload",
"_id": "vue-image-crop-upload@2.5.0",
"_inBundle": false,
"_integrity": "sha1-Lc9JnltJRLxQd/wwtfJNXpd/MTw=",
"_location": "/vue-image-crop-upload",
"_phantomChildren": {},
"_requested": {
"type": "tag",
"registry": true,
"raw": "vue-image-crop-upload",
"name": "vue-image-crop-upload",
"escapedName": "vue-image-crop-upload",
"rawSpec": "",
"saveSpec": null,
"fetchSpec": "latest"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npm.taobao.org/vue-image-crop-upload/download/vue-image-crop-upload-2.5.0.tgz",
"_shasum": "2dcf499e5b4944bc5077fc30b5f24d5e977f313c",
"_spec": "vue-image-crop-upload",
"_where": "/Users/zhangyanni/taiku/techcode/techbook",
"author": {
"name": "dai-siki"
},
"bugs": {
"url": "https://github.com/dai-siki/vue-image-crop-upload/issues"
},
"bundleDependencies": false,
"dependencies": {
"babel-runtime": "^6.11.6"
},
"deprecated": false,
"description": "a vue plgin for image upload and crop（vue图片剪裁上传插件）",
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.17.0",
"babel-eslint": "^8.0.0",
"babel-loader": "^6.2.5",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-stage-2": "^6.17.0",
"babel-preset-stage-3": "^6.17.0",
"browser-sync": "^2.13.0",
"classnames": "^2.2.5",
"css-loader": "^0.23.1",
"eslint": "^4.6.1",
"gulp": "^3.8.8",
"gulp-autoprefixer": "^3.1.1",
"gulp-changed": "^1.3.0",
"gulp-load-plugins": "^1.2.4",
"gulp-plumber": "^1.1.0",
"gulp-sass": "^2.3.2",
"gulp-uglify": "^2.0.0",
"gulp-util": "^3.0.7",
"gulp-watch": "^4.3.6",
"gulp.spritesmith": "^6.2.1",
"html-webpack-plugin": "^2.22.0",
"node-sass": "^3.8.0",
"sass-loader": "^4.0.0",
"scss": "^0.2.4",
"scss-loader": "^0.0.1",
"style-loader": "^0.13.1",
"vinyl-named": "^1.1.0",
"vue": "^1.0.28",
"vue-html-loader": "^1.2.3",
"vue-loader": "^8.5.4",
"vue-style-loader": "^1.0.0",
"webpack": "^1.13.1",
"webpack-stream": "^3.2.0"
},
"homepage": "https://github.com/dai-siki/vue-image-crop-upload#readme",
"keywords": [
"vue",
"image",
"picture",
"photo",
"uploader",
"crop",
"cropper",
"file",
"avatar",
"文件上传",
"头像",
"图片剪裁上传"
],
"license": "ISC",
"main": "upload-2.vue",
"name": "vue-image-crop-upload",
"repository": {
"type": "git",
"url": "git+https://github.com/dai-siki/vue-image-crop-upload.git"
},
"scripts": {
"build": "cross-env NODE_ENV=production gulp b",
"dev": "gulp"
},
"version": "2.5.0"
}
src/components/vue-image-crop-upload/scss/upload.scss 0 → 100644
View file @ 67ac1ed3
This diff is collapsed.
src/components/vue-image-crop-upload/upload-1.vue 0 → 100644
View file @ 67ac1ed3
This diff is collapsed.
src/components/vue-image-crop-upload/upload-2.vue 0 → 100644
View file @ 67ac1ed3
This diff is collapsed.
src/components/vue-image-crop-upload/upload.css 0 → 100644
View file @ 67ac1ed3
This diff is collapsed.
src/components/vue-image-crop-upload/utils/data2blob.js 0 → 100644
View file @ 67ac1ed3
/**
* database64文件格式转换为2进制
*
* @param {[String]} data dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
* @param {[String]} mime [description]
* @return {[blob]} [description]
*/
export default 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
});
};
src/components/vue-image-crop-upload/utils/effectRipple.js 0 → 100644
View file @ 67ac1ed3
/**
* 点击波纹效果
*
* @param {[event]} e [description]
* @param {[Object]} arg_opts [description]
* @return {[bollean]} [description]
*/
export default 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;
}
};
src/components/vue-image-crop-upload/utils/language.js 0 → 100644
View file @ 67ac1ed3
This diff is collapsed.
src/components/vue-image-crop-upload/utils/mimes.js 0 → 100644
View file @ 67ac1ed3
export default {
'jpg': 'image/jpeg',
'png': 'image/png',
'gif': 'image/gif',
'svg': 'image/svg+xml',
'psd': 'image/photoshop'
};
src/components/vue-image-crop-upload/yarn.lock 0 → 100644
View file @ 67ac1ed3
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment