zhaichao/education
1
0
Fork 0
forked from liweijie/education
Code Pull Requests Activity

Merge remote-tracking branch 'upstream/main'

Browse Source
This commit is contained in:
zhaichao
2026-08-26 09:31:34 +08:00
parent 9b8c4bfab6
commit 394eb0285d
34137 changed files with 3589424 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/node_modules/vue-cropper/example/.babelrc
Generated Vendored
+6
View File
@@ -0,0 +1,6 @@
{
"presets": [
["es2015", { "modules": false }]
],
"comments": false
}
frontend/node_modules/vue-cropper/example/asset/favicon.ico
Generated Vendored
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 236 B

frontend/node_modules/vue-cropper/example/asset/prism.css
Generated Vendored
+122
View File
@@ -0,0 +1,122 @@
/* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript */
/**
* okaidia theme for JavaScript, CSS and HTML
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
* @author ocodia
*/
code[class*="language-"],
pre[class*="language-"] {
color: #f8f8f2;
background: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #272822;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #f8f8f2;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
color: #f92672;
}
.token.boolean,
.token.number {
color: #ae81ff;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #a6e22e;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: #f8f8f2;
}
.token.atrule,
.token.attr-value,
.token.function {
color: #e6db74;
}
.token.keyword {
color: #66d9ef;
}
.token.regex,
.token.important {
color: #fd971f;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
frontend/node_modules/vue-cropper/example/asset/prism.js
Generated Vendored
+6
View File
File diff suppressed because one or more lines are too long
frontend/node_modules/vue-cropper/example/dist/build.js
Generated Vendored
+6
View File
File diff suppressed because one or more lines are too long
frontend/node_modules/vue-cropper/example/index.html
Generated Vendored
+24
View File
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<link rel="shortcut icon" href="./asset/favicon.ico">
<link rel="stylesheet" type="text/css" href="asset/prism.css">
<title>vue-cropper</title>
</head>
<body>
<div id="app"></div>
<script src="asset/prism.js"></script>
<script src="dist/build.js"></script>
</body>
</html>
frontend/node_modules/vue-cropper/example/package-lock.json
Generated Vendored
+7439
View File
File diff suppressed because it is too large Load Diff
frontend/node_modules/vue-cropper/example/package.json
Generated Vendored
+33
View File
@@ -0,0 +1,33 @@
{
"name": "vue-cropper-example",
"description": "A Vue.js project",
"author": "goodboy <463618622@qq.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"exif-js": "^2.3.0",
"vue": "^2.5.17",
"vue-cropper": "^0.4.9",
"vue-loader": "^14.2.2",
"vue-template-compiler": "^2.5.17"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-es2015": "^6.13.2",
"cross-env": "^1.0.6",
"css-loader": "^0.23.1",
"file-loader": "^0.8.4",
"webpack": "^2.3.2",
"webpack-dev-server": "^3.1.11"
},
"browserify": {
"transform": [
"vueify"
]
}
}
frontend/node_modules/vue-cropper/example/src/App.vue
Generated Vendored
+822
View File
@@ -0,0 +1,822 @@
<template>
<div class="wrapper">
<div class="model" v-show="model">
<div class="model-show" @click="model = false">
<img :src="modelSrc" alt="" @click="model = false">
</div>
</div>
<div class="content">
<h1><a class="title" href="https://github.com/xyxiao001/vue-cropper" target="_blank">vue-cropper</a></h1>
<iframe src="https://ghbtns.com/github-btn.html?user=xyxiao001&repo=vue-cropper&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
<div class="show-info">
<h2>install</h2>
<codes>
<div slot="body">{{ code0 }}</div>
</codes>
</div>
<div class="show-info">
<h2>example1 基本例子 无限制</h2>
<div class="test test1">
<vueCropper
ref="cropper"
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
:info="true"
:full="option.full"
:canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:fixedBox="option.fixedBox"
:original="option.original"
:autoCrop="option.autoCrop"
:autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight"
:centerBox="option.centerBox"
:high="option.high"
:infoTrue="option.infoTrue"
:maxImgSize="option.maxImgSize"
@realTime="realTime"
@imgLoad="imgLoad"
@cropMoving="cropMoving"
:enlarge="option.enlarge"
:mode="option.mode"
:limitMinSize="option.limitMinSize"
></vueCropper>
</div>
<div class="test-button">
<button @click="changeImg" class="btn">changeImg</button>
<label class="btn" for="uploads">upload</label>
<input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)" ref="uploadImg">
<button @click="startCrop" v-if="!crap" class="btn">start</button>
<button @click="stopCrop" v-else class="btn">stop</button>
<button @click="clearCrop" class="btn">clear</button>
<button @click="refreshCrop" class="btn">refresh</button>
<button @click="changeScale(1)" class="btn">+</button>
<button @click="changeScale(-1)" class="btn">-</button>
<button @click="rotateLeft" class="btn">rotateLeft</button>
<button @click="rotateRight" class="btn">rotateRight</button>
<button @click="finish('base64')" class="btn">preview(base64)</button>
<button @click="finish('blob')" class="btn">preview(blob)</button>
<button @click="() => option.img = ''" class="btn">清除图片</button>
<a @click="down('base64')" class="btn">download(base64)</a>
<a @click="down('blob')" class="btn">download(blob)</a>
<a :href="downImg" download="demo.png" ref="downloadDom"></a>
</div>
<div class="pre">
<!-- <section class="pre-item">
<p>固定大小 固定宽度100px</p>
<section v-html="previews.html"></section>
</section> -->
<section class="pre-item">
<p>截图框大小</p>
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden',
'margin': '5px'}">
<div :style="previews.div">
<img :src="previews.url" :style="previews.img">
</div>
</div>
</section>
<section class="pre-item">
<p>中等大小</p>
<div :style="previewStyle1">
<div :style="previews.div">
<img :src="previews.url" :style="previews.img">
</div>
</div>
</section>
<section class="pre-item">
<p>迷你大小</p>
<div :style="previewStyle2">
<div :style="previews.div">
<img :src="previews.url" :style="previews.img">
</div>
</div>
</section>
<section class="pre-item" title="zoom: (100 / previews.w)">
<p>固定为100宽度</p>
<div :style="previewStyle3">
<div :style="previews.div">
<img :src="previews.url" :style="previews.img">
</div>
</div>
</section>
<section class="pre-item" title="zoom: (100 / previews.h)">
<p>固定为100高度</p>
<div :style="previewStyle4">
<div :style="previews.div">
<img :src="previews.url" :style="previews.img">
</div>
</div>
</section>
</div>
<div style="display:block; width: 100%;">
<label class="c-item">
<span>图片默认渲染方式</span>
<select v-model="option.mode">
<option value="contain">contain</option>
<option value="cover">cover</option>
<option value="400px auto">400px auto</option>
<option value="auto 400px">auto 400px</option>
<option value="50%">50%</option>
<option value="auto 50%">auto 50%</option>
</select>
<section>
类似css background属性设置 设置不符合规范不生效， 参照文档说明
</section>
</label>
<!-- <label class="c-item">
<span>截图框最小限制 </span>
<input type="text" v-model="option.limitMinSize">
</label> -->
<label class="c-item">
<span>上传时图片最大大小(默认会压缩尺寸到这个大小)</span>
<input type="nubmer" v-model="option.maxImgSize">
</label>
<label class="c-item">
<span>上传图片是否显示原始宽高 (针对大图 可以铺满)</span>
<input type="checkbox" v-model="option.original">
<span>original: {{ option.original}}</span>
</label>
<label class="c-item">
<span>是否根据dpr生成适合屏幕的高清图片</span>
<input type="checkbox" v-model="option.high">
<span>high: {{ option.high}}</span>
</label>
<label class="c-item">
<span>是否输出原图比例的截图</span>
<input type="checkbox" v-model="option.full">
<span>full: {{ option.full}}</span>
</label>
<label class="c-item">
<span>截图信息展示是否是真实的输出宽高</span>
<input type="checkbox" v-model="option.infoTrue">
<span>infoTrue: {{ option.infoTrue}}</span>
</label>
<label class="c-item">
<span>能否拖动图片</span>
<input type="checkbox" v-model="option.canMove">
<span>canMove: {{ option.canMove}}</span>
</label>
<label class="c-item">
<span>能否拖动截图框</span>
<input type="checkbox" v-model="option.canMoveBox">
<span>canMoveBox: {{ option.canMoveBox}}</span>
</label>
<label class="c-item">
<span>截图框固定大小</span>
<input type="checkbox" v-model="option.fixedBox">
<span>fixedBox: {{ option.fixedBox}}</span>
</label>
<label class="c-item">
<span>是否自动生成截图框</span>
<input type="checkbox" v-model="option.autoCrop">
<span>autoCrop: {{ option.autoCrop}}</span>
</label>
<label class="c-item">
<span>自动生成截图框的宽高</span>
<span>宽度: </span><input type="number" v-model="option.autoCropWidth">
<span>高度: </span><input type="number" v-model="option.autoCropHeight">
</label>
<label class="c-item">
<span>截图框是否限制在图片里(只有在自动生成截图框时才能生效)</span>
<input type="checkbox" v-model="option.centerBox">
<span>centerBox: {{ option.centerBox}}</span>
</label>
<label class="c-item">
<span>是否按照截图框比例输出 默认为1 </span>
<input type="number" v-model="option.enlarge">
</label>
<p>输出图片格式</p>
<label class="c-item">
<label>jpg <input type="radio" name="type" value="jpeg" v-model="option.outputType"></label>
<label>png <input type="radio" name="type" value="png" v-model="option.outputType"></label>
<label>webp <input type="radio" name="type" value="webp" v-model="option.outputType"></label>
</label>
</div>
<codes>
<div slot="body">{{ code1 }}</div>
</codes>
</div>
</div>
</div>
</template>
<script>
import VueCropper from "./vue-cropper/vue-cropper";
// import { VueCropper } from '../test'
import codes from "./code";
export default {
data: function() {
return {
model: false,
modelSrc: "",
crap: false,
previews: {},
lists: [
// {
// img: 'https://fengyuanchen.github.io/cropper/images/picture.jpg'
// },
{
img: "https://avatars2.githubusercontent.com/u/15681693?s=460&v=4"
},
{
img: "http://cdn.xyxiao.cn/Landscape_1.jpg"
},
{
img: "http://cdn.xyxiao.cn/Landscape_2.jpg"
},
{
img: "http://cdn.xyxiao.cn/Landscape_3.jpg"
},
{
img: "http://cdn.xyxiao.cn/Landscape_4.jpg"
},
{
img: "http://cdn.xyxiao.cn/Portrait_1.jpg"
},
{
img: "http://cdn.xyxiao.cn/Portrait_2.jpg"
}
],
option: {
img: "",
size: 1,
full: false,
outputType: "png",
canMove: true,
fixedBox: false,
original: false,
canMoveBox: true,
autoCrop: true,
// 只有自动截图开启 宽度高度才生效
autoCropWidth: 200,
autoCropHeight: 150,
centerBox: false,
high: false,
cropData: {},
enlarge: 1,
mode: 'contain',
maxImgSize: 3000,
limitMinSize: [100, 120]
},
example2: {
img: "http://cdn.xyxiao.cn/Landscape_2.jpg",
info: true,
size: 1,
outputType: "jpeg",
canScale: true,
autoCrop: true,
// 只有自动截图开启 宽度高度才生效
autoCropWidth: 300,
autoCropHeight: 250,
fixed: true,
// 真实的输出宽高
infoTrue: true,
fixedNumber: [4, 3]
},
example3: {
img: "http://cdn.xyxiao.cn/Landscape_1.jpg",
autoCrop: true,
autoCropWidth: 200,
autoCropHeight: 200,
fixedBox: true
},
downImg: "#",
previewStyle1: {},
previewStyle2: {},
previewStyle3: {},
previewStyle4: {},
code0: '',
code1: '',
code2: '',
code3: '',
preview3: '',
};
},
methods: {
changeImg() {
this.option.img = this.lists[~~(Math.random() * this.lists.length)].img;
},
startCrop() {
// start
this.crap = true;
this.$refs.cropper.startCrop();
},
stopCrop() {
// stop
this.crap = false;
this.$refs.cropper.stopCrop();
},
clearCrop() {
// clear
this.$refs.cropper.clearCrop();
},
refreshCrop() {
// clear
this.$refs.cropper.refresh();
},
changeScale(num) {
num = num || 1;
this.$refs.cropper.changeScale(num);
},
rotateLeft() {
this.$refs.cropper.rotateLeft();
},
rotateRight() {
this.$refs.cropper.rotateRight();
},
finish(type) {
// 输出
// var test = window.open('about:blank')
// test.document.body.innerHTML = '图片生成中..'
if (type === "blob") {
this.$refs.cropper.getCropBlob(data => {
var img = window.URL.createObjectURL(data);
this.model = true;
this.modelSrc = img;
});
} else {
this.$refs.cropper.getCropData(data => {
this.model = true;
this.modelSrc = data;
});
}
},
// 实时预览函数
realTime(data) {
var previews = data;
var h = 0.5;
var w = 0.2;
this.previewStyle1 = {
width: previews.w + "px",
height: previews.h + "px",
overflow: "hidden",
margin: "0",
zoom: h
};
this.previewStyle2 = {
width: previews.w + "px",
height: previews.h + "px",
overflow: "hidden",
margin: "0",
zoom: w
};
this.previewStyle3 = {
width: previews.w + "px",
height: previews.h + "px",
overflow: "hidden",
margin: "0",
zoom: (100 / previews.w)
};
this.previewStyle4 = {
width: previews.w + "px",
height: previews.h + "px",
overflow: "hidden",
margin: "0",
zoom: (100 / previews.h)
};
this.previews = data;
},
finish2(type) {
this.$refs.cropper2.getCropData(data => {
this.model = true;
this.modelSrc = data;
});
},
finish3(type) {
this.$refs.cropper3.getCropData(data => {
this.model = true;
this.modelSrc = data;
});
},
down(type) {
// event.preventDefault()
// 输出
if (type === "blob") {
this.$refs.cropper.getCropBlob(data => {
this.downImg = window.URL.createObjectURL(data);
if (window.navigator.msSaveBlob) {
var blobObject = new Blob([data]);
window.navigator.msSaveBlob(blobObject, "demo.png");
} else {
this.$nextTick(() => {
this.$refs.downloadDom.click();
});
}
});
} else {
this.$refs.cropper.getCropData(data => {
this.downImg = data;
if (window.navigator.msSaveBlob) {
var blobObject = new Blob([data]);
window.navigator.msSaveBlob(blobObject, "demo.png");
} else {
this.$nextTick(() => {
this.$refs.downloadDom.click();
});
}
});
}
},
uploadImg(e, num) {
//上传图片
// this.option.img
var file = e.target.files[0];
if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
return false;
}
var reader = new FileReader();
reader.onload = e => {
let data;
if (typeof e.target.result === "object") {
// 把Array Buffer转化为blob 如果是base64不需要
data = window.URL.createObjectURL(new Blob([e.target.result]));
} else {
data = e.target.result;
}
if (num === 1) {
this.option.img = data;
} else if (num === 2) {
this.example2.img = data;
}
this.$refs.uploadImg.value = ''
};
// 转化为base64
// reader.readAsDataURL(file)
// 转化为blob
reader.readAsArrayBuffer(file);
},
imgLoad(msg) {
console.log(msg);
},
cropMoving(data) {
this.option.cropData = data;
}
},
components: {
VueCropper,
codes
},
mounted() {
this.changeImg();
// hljs.configure({useBR: true})
var list = [].slice.call(document.querySelectorAll("pre code"));
list.forEach((val, index) => {
hljs.highlightBlock(val);
});
// console.log(this.$refs.cropper)
this.code0 = `
npm install vue-cropper
// 组件内使用
import { VueCropper } from 'vue-cropper'
components: {
VueCropper,
},
// main.js里面使用
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
// cdn方式使用
<script src="vuecropper.js">\<\/script>
Vue.use(window['vue-cropper'])
<vueCropper
ref="cropper"
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
></vueCropper>
`
this.code1 = `
<div class="show-info">
<h2>example1 基本例子 无限制</h2>
<div class="test test1">
<vueCropper
ref="cropper"
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
:info="true"
:full="option.full"
:canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:fixedBox="option.fixedBox"
:original="option.original"
:autoCrop="option.autoCrop"
:autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight"
:centerBox="option.centerBox"
:high="option.high"
:infoTrue="option.infoTrue"
@realTime="realTime"
@imgLoad="imgLoad"
@cropMoving="cropMoving"
:enlarge="option.enlarge"
></vueCropper>
</div>
<div class="test-button">
<button @click="changeImg" class="btn">changeImg</button>
<label class="btn" for="uploads">upload</label>
<input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)">
<button @click="startCrop" v-if="!crap" class="btn">start</button>
<button @click="stopCrop" v-else class="btn">stop</button>
<button @click="clearCrop" class="btn">clear</button>
<button @click="refreshCrop" class="btn">refresh</button>
<button @click="changeScale(1)" class="btn">+</button>
<button @click="changeScale(-1)" class="btn">-</button>
<button @click="rotateLeft" class="btn">rotateLeft</button>
<button @click="rotateRight" class="btn">rotateRight</button>
<button @click="finish('base64')" class="btn">preview(base64)</button>
<button @click="finish('blob')" class="btn">preview(blob)</button>
<a @click="down('base64')" class="btn">download(base64)</a>
<a @click="down('blob')" class="btn">download(blob)</a>
<a :href="downImg" download="demo.png" ref="downloadDom"></a>
</div>
<p>截图框大小</p>
<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden',
'margin': '5px'}">
<div :style="previews.div">
<img :src="previews.url" :style="previews.img">
</div>
</div>
<p>中等大小</p>
<div :style="previewStyle1">
<div :style="previews.div">
<img :src="previews.url" :style="previews.img">
</div>
</div>
<p>迷你大小</p>
<div :style="previewStyle2">
<div :style="previews.div">
<img :src="previews.url" :style="previews.img">
</div>
</div>
<div style="display:block; width: 100%;">
<label class="c-item">
<span>上传图片是否显示原始宽高 (针对大图 可以铺满)</span>
<input type="checkbox" v-model="option.original">
<span>original: {{ option.original}}</span>
</label>
<label class="c-item">
<span>是否根据dpr生成适合屏幕的高清图片</span>
<input type="checkbox" v-model="option.high">
<span>high: {{ option.high}}</span>
</label>
<label class="c-item">
<span>是否输出原图比例的截图</span>
<input type="checkbox" v-model="option.full">
<span>full: {{ option.full}}</span>
</label>
<label class="c-item">
<span>截图信息展示是否是真实的输出宽高</span>
<input type="checkbox" v-model="option.infoTrue">
<span>infoTrue: {{ option.infoTrue}}</span>
</label>
<label class="c-item">
<span>能否拖动图片</span>
<input type="checkbox" v-model="option.canMove">
<span>canMove: {{ option.canMove}}</span>
</label>
<label class="c-item">
<span>能否拖动截图框</span>
<input type="checkbox" v-model="option.canMoveBox">
<span>canMoveBox: {{ option.canMoveBox}}</span>
</label>
<label class="c-item">
<span>截图框固定大小</span>
<input type="checkbox" v-model="option.fixedBox">
<span>fixedBox: {{ option.fixedBox}}</span>
</label>
<label class="c-item">
<span>是否自动生成截图框</span>
<input type="checkbox" v-model="option.autoCrop">
<span>autoCrop: {{ option.autoCrop}}</span>
</label>
<label class="c-item">
<span>截图框是否限制在图片里(只有在自动生成截图框时才能生效)</span>
<input type="checkbox" v-model="option.centerBox">
<span>centerBox: {{ option.centerBox}}</span>
</label>
<label class="c-item">
<span>是否按照截图框比例输出 默认为1 </span>
<input type="number" v-model="option.enlarge">
</label>
<p>输出图片格式</p>
<label class="c-item">
<label>jpg <input type="radio" name="type" value="jpeg" v-model="option.outputType"></label>
<label>png <input type="radio" name="type" value="png" v-model="option.outputType"></label>
<label>webp <input type="radio" name="type" value="webp" v-model="option.outputType"></label>
</label>
</div>
<codes>
<div slot="body">{{ code1 }}</div>
</codes>
</div>
`
}
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
.content {
margin: auto;
max-width: 1200px;
margin-bottom: 100px;
}
.test-button {
display: flex;
flex-wrap: wrap;
}
.btn {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #c0ccda;
color: #1f2d3d;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 20px 10px 0px 0px;
padding: 9px 15px;
font-size: 14px;
border-radius: 4px;
color: #fff;
background-color: #50bfff;
border-color: #50bfff;
transition: all 0.2s ease;
text-decoration: none;
user-select: none;
}
.des {
line-height: 30px;
}
code.language-html {
padding: 10px 20px;
margin: 10px 0px;
display: block;
background-color: #333;
color: #fff;
overflow-x: auto;
font-family: Consolas, Monaco, Droid, Sans, Mono, Source, Code, Pro, Menlo,
Lucida, Sans, Type, Writer, Ubuntu, Mono;
border-radius: 5px;
white-space: pre;
}
.show-info {
margin-bottom: 50px;
}
.show-info h2 {
line-height: 50px;
}
/*.title, .title:hover, .title-focus, .title:visited {
color: black;
}*/
.title {
display: block;
text-decoration: none;
text-align: center;
line-height: 1.5;
margin: 20px 0px;
background-image: -webkit-linear-gradient(
left,
#3498db,
#f47920 10%,
#d71345 20%,
#f7acbc 30%,
#ffd400 40%,
#3498db 50%,
#f47920 60%,
#d71345 70%,
#f7acbc 80%,
#ffd400 90%,
#3498db
);
color: transparent;
-webkit-background-clip: text;
background-size: 200% 100%;
animation: slide 5s infinite linear;
font-size: 40px;
}
.test {
height: 500px;
}
.model {
position: fixed;
z-index: 10;
width: 100vw;
height: 100vh;
overflow: auto;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
}
.model-show {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
text-align: center;
}
.model img {
display: block;
margin: auto;
max-width: 80%;
width: auto;
user-select: none;
background-position: 0px 0px, 10px 10px;
background-size: 20px 20px;
background-image: linear-gradient(
45deg,
#eee 25%,
transparent 25%,
transparent 75%,
#eee 75%,
#eee 100%
),
linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
}
.c-item {
display: block;
padding: 10px 0;
user-select: none;
}
.pre {
display: flex;
flex-wrap: wrap;
}
.pre-item {
padding-right: 20px;
}
@keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
@media screen and (max-width: 1000px) {
.content {
max-width: 90%;
margin: auto;
}
.test {
height: 400px;
}
}
</style>
frontend/node_modules/vue-cropper/example/src/code.vue
Generated Vendored
+60
View File
@@ -0,0 +1,60 @@
<template>
<section :class="{'preview': !all, 'all': all}">
<code class="language-html">
<slot name="body"></slot>
</code>
<div class="show" @click="() => all = !all">{{ msg }}</div>
</section>
</template>
<script>
export default {
data: function () {
return {
all: false
}
},
computed: {
msg () {
return !this.all ? 'unfold' : 'fold'
}
}
}
</script>
<style lang="css" scoped>
section code.language-html {
padding: 10px 20px;
margin: 10px 0px;
display: block;
background-color: #333;
color: #fff;
overflow-x: auto;
font-family: Consolas, Monaco, Droid, Sans, Mono, Source, Code, Pro, Menlo, Lucida, Sans, Type, Writer, Ubuntu, Mono;
border-radius: 5px;
white-space: pre;
}
.preview {
position: relative;
height: 150px;
overflow: hidden;
}
.all{
position: relative;
}
.show {
position: absolute;
width: 100%;
text-align: center;
left: 0;
bottom: 0;
line-height: 50px;
height: 50px;
cursor: pointer;
background-color: rgba(255, 255, 255, 0.3);
color: white;
}
</style>
frontend/node_modules/vue-cropper/example/src/main.js
Generated Vendored
+7
View File
@@ -0,0 +1,7 @@
import Vue from 'vue'
import App from './App.vue'
import 'babel-polyfill'
new Vue({
el: '#app',
render: h => h(App)
})
frontend/node_modules/vue-cropper/example/src/vue-cropper/exif-js-min.js
Generated Vendored
+159
View File
@@ -0,0 +1,159 @@
const Exif = {};
Exif.getData = (img) => new Promise((reslove, reject) => {
let obj = {};
getImageData(img).then(data => {
obj.arrayBuffer = data;
obj.orientation = getOrientation(data);
reslove(obj)
}).catch(error => {
reject(error)
})
})
// 这里的获取exif要将图片转ArrayBuffer对象，这里假设获取了图片的baes64
// 步骤一
// base64转ArrayBuffer对象
function getImageData(img) {
let data = null;
return new Promise((reslove, reject) => {
if (img.src) {
if (/^data\:/i.test(img.src)) { // Data URI
data = base64ToArrayBuffer(img.src);
reslove(data)
} else if (/^blob\:/i.test(img.src)) { // Object URL
var fileReader = new FileReader();
fileReader.onload = function (e) {
data = e.target.result;
reslove(data)
};
objectURLToBlob(img.src, function (blob) {
fileReader.readAsArrayBuffer(blob);
});
} else {
var http = new XMLHttpRequest();
http.onload = function () {
if (this.status == 200 || this.status === 0) {
data = http.response
reslove(data)
} else {
throw "Could not load image";
}
http = null;
};
http.open("GET", img.src, true);
http.responseType = "arraybuffer";
http.send(null);
}
} else {
reject('img error')
}
})
}
function objectURLToBlob(url, callback) {
var http = new XMLHttpRequest();
http.open("GET", url, true);
http.responseType = "blob";
http.onload = function (e) {
if (this.status == 200 || this.status === 0) {
callback(this.response);
}
};
http.send();
}
function base64ToArrayBuffer(base64) {
base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, '');
var binary = atob(base64);
var len = binary.length;
var buffer = new ArrayBuffer(len);
var view = new Uint8Array(buffer);
for (var i = 0; i < len; i++) {
view[i] = binary.charCodeAt(i);
}
return buffer;
}
// 步骤二，Unicode码转字符串
// ArrayBuffer对象 Unicode码转字符串
function getStringFromCharCode(dataView, start, length) {
var str = '';
var i;
for (i = start, length += start; i < length; i++) {
str += String.fromCharCode(dataView.getUint8(i));
}
return str;
}
// 步骤三，获取jpg图片的exif的角度（在ios体现最明显）
function getOrientation(arrayBuffer) {
var dataView = new DataView(arrayBuffer);
var length = dataView.byteLength;
var orientation;
var exifIDCode;
var tiffOffset;
var firstIFDOffset;
var littleEndian;
var endianness;
var app1Start;
var ifdStart;
var offset;
var i;
// Only handle JPEG image (start by 0xFFD8)
if (dataView.getUint8(0) === 0xFF && dataView.getUint8(1) === 0xD8) {
offset = 2;
while (offset < length) {
if (dataView.getUint8(offset) === 0xFF && dataView.getUint8(offset + 1) === 0xE1) {
app1Start = offset;
break;
}
offset++;
}
}
if (app1Start) {
exifIDCode = app1Start + 4;
tiffOffset = app1Start + 10;
if (getStringFromCharCode(dataView, exifIDCode, 4) === 'Exif') {
endianness = dataView.getUint16(tiffOffset);
littleEndian = endianness === 0x4949;
if (littleEndian || endianness === 0x4D4D /* bigEndian */) {
if (dataView.getUint16(tiffOffset + 2, littleEndian) === 0x002A) {
firstIFDOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
if (firstIFDOffset >= 0x00000008) {
ifdStart = tiffOffset + firstIFDOffset;
}
}
}
}
}
if (ifdStart) {
length = dataView.getUint16(ifdStart, littleEndian);
for (i = 0; i < length; i++) {
offset = ifdStart + i * 12 + 2;
if (dataView.getUint16(offset, littleEndian) === 0x0112 /* Orientation */) {
// 8 is the offset of the current tag's value
offset += 8;
// Get the original orientation value
orientation = dataView.getUint16(offset, littleEndian);
// Override the orientation with its default value for Safari (#120)
// if (IS_SAFARI_OR_UIWEBVIEW) {
// dataView.setUint16(offset, 1, littleEndian);
// }
break;
}
}
}
return orientation;
}
export default Exif
frontend/node_modules/vue-cropper/example/src/vue-cropper/index.js
Generated Vendored
+19
View File
@@ -0,0 +1,19 @@
import VueCropper from './vue-cropper'
const install = function(Vue) {
Vue.component('VueCropper', VueCropper);
}
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
export { VueCropper }
export default {
version: '0.5.5',
install,
VueCropper,
vueCropper: VueCropper
}
frontend/node_modules/vue-cropper/example/src/vue-cropper/vue-cropper.vue
Generated Vendored
+2087
View File
File diff suppressed because it is too large Load Diff
frontend/node_modules/vue-cropper/example/test/index.js
Generated Vendored
+2
View File
File diff suppressed because one or more lines are too long
frontend/node_modules/vue-cropper/example/webpack.config.js
Generated Vendored
+60
View File
@@ -0,0 +1,60 @@
var path = require('path')
var webpack = require('webpack')
// var { VueLoaderPlugin } = require('vue-loader');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
resolve: {
extensions: ['.js', '.vue' ]
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
query: {
name: '[name].[ext]?[hash]'
}
}
]
},
devServer: {
historyApiFallback: true,
host: '0.0.0.0',
port: 8888,
disableHostCheck: true,
noInfo: true
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
])
}
frontend/node_modules/vue-cropper/example/yarn-error.log
Generated Vendored
+5579
View File
File diff suppressed because it is too large Load Diff
frontend/node_modules/vue-cropper/example/yarn.lock
Generated Vendored
+5597
View File
File diff suppressed because it is too large Load Diff