|
|
|
@ -1,179 +1,16 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> |
|
|
|
<span class="navbar-brand mb-0 h1">{{ name }} {{ version }}</span> |
|
|
|
<button |
|
|
|
class="navbar-toggler" |
|
|
|
type="button" |
|
|
|
data-toggle="collapse" |
|
|
|
data-target="#navbarSupportedContent" |
|
|
|
aria-controls="navbarSupportedContent" |
|
|
|
aria-expanded="false" |
|
|
|
aria-label="Toggle navigation" |
|
|
|
> |
|
|
|
<span class="navbar-toggler-icon"></span> |
|
|
|
</button> |
|
|
|
|
|
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent"> |
|
|
|
<ul class="navbar-nav mr-auto"> |
|
|
|
<li class="nav-item"> |
|
|
|
<a class="nav-link" :href="docs">{{ $t('introduce.docs') }}</a> |
|
|
|
</li> |
|
|
|
<li class="nav-item"> |
|
|
|
<a class="nav-link" :href="gitee">{{ $t('introduce.gitee') }}</a> |
|
|
|
</li> |
|
|
|
<li class="nav-item"> |
|
|
|
<a class="nav-link" :href="github">{{ $t('introduce.github') }}</a> |
|
|
|
</li> |
|
|
|
<li class="nav-item"> |
|
|
|
<a class="nav-link" :href="npm">{{ $t('introduce.npm') }}</a> |
|
|
|
</li> |
|
|
|
<li class="nav-item"> |
|
|
|
<a class="nav-link" :href="download">{{ $t('introduce.download') }}</a> |
|
|
|
</li> |
|
|
|
<li class="nav-item"> |
|
|
|
<a class="nav-link" :href="homepage">{{ $t('introduce.homepage') }}</a> |
|
|
|
</li> |
|
|
|
<li class="nav-item dropdown"> |
|
|
|
<a |
|
|
|
class="nav-link dropdown-toggle" |
|
|
|
href="#" |
|
|
|
id="navbarScrollingDropdown2" |
|
|
|
role="button" |
|
|
|
data-toggle="dropdown" |
|
|
|
aria-expanded="false" |
|
|
|
> |
|
|
|
语言(Language) |
|
|
|
</a> |
|
|
|
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown2"> |
|
|
|
<li><a class="dropdown-item" href="#" @click="i18n.global.locale = 'zh-CN'">中文</a></li> |
|
|
|
<li><a class="dropdown-item" href="#" @click="i18n.global.locale = 'en-US'">English</a></li> |
|
|
|
</ul> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</nav> |
|
|
|
<div class="jumbotron"> |
|
|
|
<div class="container"> |
|
|
|
<h1 class="display-3" style="margin-bottom: 20px"> |
|
|
|
{{ name }} |
|
|
|
<span class="badge badge-light">{{ version }}</span> |
|
|
|
</h1> |
|
|
|
<p style="display: flex; justify-content: center"> |
|
|
|
<a href="https://github.com/acccccccb/vue-img-cutter/stargazers" style="margin: 0 5px"> |
|
|
|
<img |
|
|
|
alt="GitHub stars" |
|
|
|
src="https://img.shields.io/github/stars/acccccccb/vue-img-cutter?style=for-the-badge" |
|
|
|
/> |
|
|
|
</a> |
|
|
|
<a href="https://github.com/acccccccb/vue-img-cutter/network" style="margin: 0 5px"> |
|
|
|
<img |
|
|
|
alt="GitHub forks" |
|
|
|
src="https://img.shields.io/github/forks/acccccccb/vue-img-cutter?style=for-the-badge" |
|
|
|
/> |
|
|
|
</a> |
|
|
|
<a href="https://www.npmjs.com/package/vue-img-cutter" style="margin: 0 5px"> |
|
|
|
<img alt="npm" src="https://img.shields.io/npm/v/vue-img-cutter?style=for-the-badge" /> |
|
|
|
</a> |
|
|
|
<a href="https://www.npmjs.com/package/vue-img-cutter" style="margin: 0 5px"> |
|
|
|
<img alt="npm" src="https://img.shields.io/npm/dt/vue-img-cutter?style=for-the-badge" /> |
|
|
|
</a> |
|
|
|
</p> |
|
|
|
<p>{{ $t('banner.description') }}</p> |
|
|
|
<p> |
|
|
|
<a |
|
|
|
class="btn btn-success btn-lg" |
|
|
|
:href="download" |
|
|
|
target="_blank" |
|
|
|
role="button" |
|
|
|
style="margin: 0 5px" |
|
|
|
> |
|
|
|
<i class="fa fa-download"></i> {{ $t('banner.download') }} |
|
|
|
</a> |
|
|
|
<a class="btn btn-light btn-lg" :href="github" target="_blank" role="button"> |
|
|
|
<i class="fa fa-link"></i> Github |
|
|
|
</a> |
|
|
|
<a |
|
|
|
class="btn btn-link" |
|
|
|
style="color: #fff; text-decoration: underline" |
|
|
|
:href="gitee" |
|
|
|
target="_blank" |
|
|
|
role="button" |
|
|
|
>Gitee</a |
|
|
|
> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<svg |
|
|
|
class="waves" |
|
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" |
|
|
|
viewBox="0 24 150 28" |
|
|
|
preserveAspectRatio="none" |
|
|
|
shape-rendering="auto" |
|
|
|
> |
|
|
|
<defs> |
|
|
|
<path |
|
|
|
id="gentle-wave" |
|
|
|
d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" |
|
|
|
/> |
|
|
|
</defs> |
|
|
|
<g class="parallax"> |
|
|
|
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" /> |
|
|
|
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" /> |
|
|
|
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" /> |
|
|
|
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" /> |
|
|
|
</g> |
|
|
|
</svg> |
|
|
|
</div> |
|
|
|
<div class="row bg" style="padding-top: 0"> |
|
|
|
<div class="col-md-10 offset-md-1"> |
|
|
|
<h1 class="bd-title"> |
|
|
|
<i class="fa fa-plane"></i> {{ $t('block1.title1') }} |
|
|
|
<small class="text-muted">{{ $t('block1.title2') }}</small> |
|
|
|
</h1> |
|
|
|
<p class="lead">{{ $t('block1.title3') }}</p> |
|
|
|
<div class="alert alert-light" style="margin-top: 40px"> |
|
|
|
<code class="language-html"> |
|
|
|
<pre> |
|
|
|
1.{{ $t('block1.title4') }}: |
|
|
|
npm i vue-img-cutter@2 -S # For vue2 |
|
|
|
npm i vue-img-cutter@3 -S # For vue3 |
|
|
|
</pre> |
|
|
|
</code> |
|
|
|
<code class="language-html"> |
|
|
|
<pre>2.{{ $t('block1.title5') }}: import ImgCutter from 'vue-img-cutter';</pre> |
|
|
|
</code> |
|
|
|
<code class="language-html"> |
|
|
|
<pre>3.{{ $t('block1.title6') }} components: components: { ImgCutter }</pre> |
|
|
|
</code> |
|
|
|
<code class="language-html"> |
|
|
|
<pre>4.{{ $t('block1.title7') }}: <ImgCutter @cutDown="cutDown"></ImgCutter></pre> |
|
|
|
</code> |
|
|
|
<code class="language-html"> |
|
|
|
<pre class="mb-0">5.{{ $t('block1.title8') }}: cutDown:(res) => { ...Do something }</pre> |
|
|
|
</code> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="row bg grayBg" style="padding-bottom: 60px"> |
|
|
|
<div class="col-md-10 offset-md-1"> |
|
|
|
<h1 class="bd-title"> |
|
|
|
<i class="fa fa-cog"></i> {{ $t('block2.title1') }} |
|
|
|
<small class="text-muted">{{ $t('block2.title2') }}</small> |
|
|
|
</h1> |
|
|
|
<p class="lead">{{ $t('block2.title3') }}</p> |
|
|
|
<div class="row" style="margin-top: 40px"> |
|
|
|
<div class="col-md-6" ref="imgCutterBox" style="height: 458px; overflow: hidden"> |
|
|
|
<div |
|
|
|
v-if="params.isModal" |
|
|
|
style=" |
|
|
|
<div v-if="params.isModal" style=" |
|
|
|
width: 100%; |
|
|
|
height: 458px; |
|
|
|
background: #dedede; |
|
|
|
box-sizing: border-box; |
|
|
|
border: 1px solid #dedede; |
|
|
|
" |
|
|
|
> |
|
|
|
"> |
|
|
|
<div style="width: 50%; margin: 180px auto auto auto"> |
|
|
|
<div class="btn btn-primary btn-block" @click="pluginExe('handleOpen')"> |
|
|
|
{{ params.label }} |
|
|
|
@ -183,45 +20,21 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<ImgCutter |
|
|
|
v-if="refresh" |
|
|
|
ref="imgCutterModal" |
|
|
|
:crossOrigin="params.crossOrigin" |
|
|
|
:label="params.label" |
|
|
|
:rate="params.rate" |
|
|
|
:index="params.index" |
|
|
|
:isModal="params.isModal" |
|
|
|
:showChooseBtn="params.showChooseBtn" |
|
|
|
:lockScroll="params.lockScroll" |
|
|
|
:boxWidth="params.boxWidth" |
|
|
|
:boxHeight="params.boxHeight" |
|
|
|
:cutWidth="params.cutWidth" |
|
|
|
:cutHeight="params.cutHeight" |
|
|
|
:sizeChange="params.sizeChange" |
|
|
|
:moveAble="params.moveAble" |
|
|
|
:imgMove="params.imgMove" |
|
|
|
:tool="params.tool" |
|
|
|
:fileType="params.fileType" |
|
|
|
:originalGraph="params.originalGraph" |
|
|
|
:previewMode="params.previewMode" |
|
|
|
:toolBoxOverflow="params.toolBoxOverflow" |
|
|
|
:WatermarkText="params.WatermarkText" |
|
|
|
<ImgCutter v-if="refresh" ref="imgCutterModal" :crossOrigin="params.crossOrigin" |
|
|
|
:label="params.label" :rate="params.rate" :index="params.index" :isModal="params.isModal" |
|
|
|
:showChooseBtn="params.showChooseBtn" :lockScroll="params.lockScroll" |
|
|
|
:boxWidth="params.boxWidth" :boxHeight="params.boxHeight" :cutWidth="params.cutWidth" |
|
|
|
:cutHeight="params.cutHeight" :sizeChange="params.sizeChange" :moveAble="params.moveAble" |
|
|
|
:imgMove="params.imgMove" :tool="params.tool" :fileType="params.fileType" |
|
|
|
:originalGraph="params.originalGraph" :previewMode="params.previewMode" |
|
|
|
:toolBoxOverflow="params.toolBoxOverflow" :WatermarkText="params.WatermarkText" |
|
|
|
:WatermarkTextFont="params.WatermarkTextFont" |
|
|
|
:WatermarkTextColor="params.WatermarkTextColor" |
|
|
|
:WatermarkTextX="params.WatermarkTextX" |
|
|
|
:WatermarkTextY="params.WatermarkTextY" |
|
|
|
:smallToUpload="params.smallToUpload" |
|
|
|
:saveCutPosition="params.saveCutPosition" |
|
|
|
:scaleAble="params.scaleAble" |
|
|
|
:accept="params.accept" |
|
|
|
:DoNotDisplayCopyright="false" |
|
|
|
toolBgc="params.toolBgc" |
|
|
|
@onChooseImg="onChooseImg" |
|
|
|
@onClearAll="onClearAll" |
|
|
|
@onPrintImg="onPrintImg" |
|
|
|
@error="catchError" |
|
|
|
@cutDown="cutDown" |
|
|
|
> |
|
|
|
:WatermarkTextColor="params.WatermarkTextColor" :WatermarkTextX="params.WatermarkTextX" |
|
|
|
:WatermarkTextY="params.WatermarkTextY" :smallToUpload="params.smallToUpload" |
|
|
|
:saveCutPosition="params.saveCutPosition" :scaleAble="params.scaleAble" |
|
|
|
:accept="params.accept" :DoNotDisplayCopyright="false" toolBgc="params.toolBgc" |
|
|
|
@onChooseImg="onChooseImg" @onClearAll="onClearAll" @onPrintImg="onPrintImg" |
|
|
|
@error="catchError" @cutDown="cutDown"> |
|
|
|
<template #open></template> |
|
|
|
<template #choose v-if="params.isModal == false"> </template> |
|
|
|
<template #cancel v-if="params.isModal == false"> </template> |
|
|
|
@ -232,534 +45,61 @@ |
|
|
|
<div class="imgCutDownBox" :style="'height:458px;'"> |
|
|
|
<div class="imgCutDownBoxContainer"> |
|
|
|
<img :src="imgSrc" v-if="!!imgSrc" alt="" /> |
|
|
|
<span v-else class="imgCutDownTips">{{ $t('block3.title8') }}</span> |
|
|
|
<span v-else class="imgCutDownTips">{{ 'block3.title8' }}</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="text-center"> |
|
|
|
<a |
|
|
|
:class="'btn btn-light' + (imgSrc ? '' : ' disabled')" |
|
|
|
:disabled="!imgSrc" |
|
|
|
:href="imgSrc" |
|
|
|
:download="downloadName || 'image.jpg'" |
|
|
|
role="button" |
|
|
|
>{{ $t('block3.title7') }}</a |
|
|
|
> |
|
|
|
<a :class="'btn btn-light' + (imgSrc ? '' : ' disabled')" :disabled="!imgSrc" |
|
|
|
:href="imgSrc" :download="downloadName || 'image.jpg'" role="button">{{ |
|
|
|
'block3.title7' }}</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col-md-3"> |
|
|
|
<form> |
|
|
|
<div class="form-group"> |
|
|
|
<label for="cutImgSrc"> {{ $t('block3.title1') }}:</label> |
|
|
|
<input |
|
|
|
type="text" |
|
|
|
name="cutImgSrc" |
|
|
|
class="form-control" |
|
|
|
@input="catchInput($event)" |
|
|
|
:value="cutImgSrc" |
|
|
|
placeholder="Remote pictures src" |
|
|
|
/> |
|
|
|
<label for="cutImgSrc"> {{ 'block3.title1' }}:</label> |
|
|
|
<input type="text" name="cutImgSrc" class="form-control" @input="catchInput($event)" |
|
|
|
:value="cutImgSrc" placeholder="Remote pictures src" /> |
|
|
|
</div> |
|
|
|
<div class="form-group"> |
|
|
|
<div |
|
|
|
class="btn btn-primary btn-block" |
|
|
|
v-if="params.isModal === false" |
|
|
|
@click="pluginExe('chooseImg')" |
|
|
|
> |
|
|
|
<div class="btn btn-primary btn-block" v-if="params.isModal === false" |
|
|
|
@click="pluginExe('chooseImg')"> |
|
|
|
{{ params.label }} |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="btn btn-primary btn-block" |
|
|
|
v-if="params.isModal === true" |
|
|
|
@click="pluginExe('handleOpen')" |
|
|
|
> |
|
|
|
<div class="btn btn-primary btn-block" v-if="params.isModal === true" |
|
|
|
@click="pluginExe('handleOpen')"> |
|
|
|
{{ params.label }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="form-group"> |
|
|
|
<div class="btn btn-secondary btn-block" @click="forIe9"> |
|
|
|
{{ $t('block3.title3') }} |
|
|
|
{{ 'block3.title3' }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="form-group"> |
|
|
|
<button |
|
|
|
type="button" |
|
|
|
:disabled="params.isModal === true || loadImg === false" |
|
|
|
class="btn btn-success btn-block" |
|
|
|
@click="pluginExe('cropPicture')" |
|
|
|
> |
|
|
|
{{ $t('block3.title5') }} |
|
|
|
<button type="button" :disabled="params.isModal === true || loadImg === false" |
|
|
|
class="btn btn-success btn-block" @click="pluginExe('cropPicture')"> |
|
|
|
{{'block3.title5' }} |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
<div class="form-group"> |
|
|
|
<button |
|
|
|
type="button" |
|
|
|
class="btn btn-light btn-block" |
|
|
|
:disabled="params.isModal === true" |
|
|
|
@click="pluginExe('clearAll')" |
|
|
|
> |
|
|
|
{{ $t('block3.title6') }} |
|
|
|
<button type="button" class="btn btn-light btn-block" |
|
|
|
:disabled="params.isModal === true" @click="pluginExe('clearAll')"> |
|
|
|
{{ 'block3.title6' }} |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col-md-10 offset-md-1" style="margin-top: 20px"> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-header">{{ $t('config.title') }}</div> |
|
|
|
<div class="card-body"> |
|
|
|
<form autocomplete="off"> |
|
|
|
<div class="row"> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="label">{{ $t('config.label') }}(label):</label> |
|
|
|
<input |
|
|
|
@input="setData($event)" |
|
|
|
name="label" |
|
|
|
type="text" |
|
|
|
class="form-control" |
|
|
|
v-model="params.label" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="boxWidth">{{ $t('config.boxWidth') }}(boxWidth):</label> |
|
|
|
<input |
|
|
|
@input="setData($event)" |
|
|
|
:readonly="params.isModal == false" |
|
|
|
name="boxWidth" |
|
|
|
type="text" |
|
|
|
class="form-control" |
|
|
|
v-model="params.boxWidth" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="boxHeight">{{ $t('config.boxHeight') }}(boxHeight):</label> |
|
|
|
<input |
|
|
|
@input="setData($event)" |
|
|
|
:readonly="params.isModal == false" |
|
|
|
name="boxHeight" |
|
|
|
type="text" |
|
|
|
class="form-control" |
|
|
|
v-model="params.boxHeight" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="cutWidth">{{ $t('config.cutWidth') }}(cutWidth):</label> |
|
|
|
<input |
|
|
|
@input="setData($event)" |
|
|
|
name="cutWidth" |
|
|
|
type="text" |
|
|
|
class="form-control" |
|
|
|
v-model="params.cutWidth" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="row"> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="cutHeight">{{ $t('config.cutHeight') }}(cutHeight):</label> |
|
|
|
<input |
|
|
|
@input="setData($event)" |
|
|
|
name="cutHeight" |
|
|
|
type="text" |
|
|
|
class="form-control" |
|
|
|
v-model="params.cutHeight" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="rate">{{ $t('config.rate') }}(rate):</label> |
|
|
|
<input |
|
|
|
@input="setData($event)" |
|
|
|
name="rate" |
|
|
|
type="text" |
|
|
|
class="form-control" |
|
|
|
placeholder="eg:1:1" |
|
|
|
v-model="params.rate" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="toolBgc">{{ $t('config.toolBgc') }}(toolBgc):</label> |
|
|
|
<input |
|
|
|
@input="setData($event)" |
|
|
|
name="toolBgc" |
|
|
|
type="text" |
|
|
|
class="form-control" |
|
|
|
v-model="params.toolBgc" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="crossOriginHeader"> |
|
|
|
{{ $t('config.crossOriginHeader') }}(crossOriginHeader):</label |
|
|
|
> |
|
|
|
<input |
|
|
|
@input="setData($event)" |
|
|
|
name="crossOriginHeader" |
|
|
|
type="text" |
|
|
|
class="form-control" |
|
|
|
v-model="params.crossOriginHeader" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="row"> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="crossOrigin">{{ $t('config.crossOrigin') }}(crossOrigin):</label> |
|
|
|
<select @change="setData($event)" name="crossOrigin" class="custom-select"> |
|
|
|
<option value="true" selected>YES</option> |
|
|
|
<option value="false">NO</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="isModal">{{ $t('config.isModal') }}(isModal):</label> |
|
|
|
<select @change="setData($event)" name="isModal" class="custom-select"> |
|
|
|
<option value="true">YES</option> |
|
|
|
<option value="false" selected>NO</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="showChooseBtn"> |
|
|
|
{{ $t('config.showChooseBtn') }}(showChooseBtn): |
|
|
|
</label> |
|
|
|
<select @change="setData($event)" name="showChooseBtn" class="custom-select"> |
|
|
|
<option value="true" selected>YES</option> |
|
|
|
<option value="false">NO</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="lockScroll">{{ $t('config.lockScroll') }}(lockScroll):</label> |
|
|
|
<select @change="setData($event)" name="lockScroll" class="custom-select"> |
|
|
|
<option value="true" selected>YES</option> |
|
|
|
<option value="false">NO</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="row"> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="sizeChange">{{ $t('config.sizeChange') }}(sizeChange):</label> |
|
|
|
<select @change="setData($event)" name="sizeChange" class="custom-select"> |
|
|
|
<option value="true" selected>YES</option> |
|
|
|
<option value="false">NO</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="moveAble">{{ $t('config.moveAble') }}(moveAble):</label> |
|
|
|
<select @change="setData($event)" name="moveAble" class="custom-select"> |
|
|
|
<option value="true" selected>YES</option> |
|
|
|
<option value="false">NO</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="tool">{{ $t('config.tool') }}(tool):</label> |
|
|
|
<select @change="setData($event)" name="tool" class="custom-select"> |
|
|
|
<option value="true" selected>YES</option> |
|
|
|
<option value="false">NO</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="originalGraph" |
|
|
|
>{{ $t('config.originalGraph') }}(originalGraph):</label |
|
|
|
> |
|
|
|
<select @change="setData($event)" name="originalGraph" class="custom-select"> |
|
|
|
<option value="true">YES</option> |
|
|
|
<option value="false" selected>NO</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="row"> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="saveCutPosition" |
|
|
|
>{{ $t('config.saveCutPosition') }}( saveCutPosition ):</label |
|
|
|
> |
|
|
|
<select @change="setData($event)" name="saveCutPosition" class="custom-select"> |
|
|
|
<option value="true" selected>YES</option> |
|
|
|
<option value="false">NO</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="scaleAble">{{ $t('config.scaleAble') }}( scaleAble ):</label> |
|
|
|
<select @change="setData($event)" name="scaleAble" class="custom-select"> |
|
|
|
<option value="true" selected>YES</option> |
|
|
|
<option value="false">NO</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="imgMove">{{ $t('config.imgMove') }}( imgMove ):</label> |
|
|
|
<select @change="setData($event)" name="imgMove" class="custom-select"> |
|
|
|
<option value="true" selected>YES</option> |
|
|
|
<option value="false">NO</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="fileType">{{ $t('config.fileType') }}( fileType ):</label> |
|
|
|
<input |
|
|
|
@input="setData($event)" |
|
|
|
name="fileType" |
|
|
|
type="text" |
|
|
|
class="form-control" |
|
|
|
v-model="params.fileType" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="row"> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="index">{{ $t('config.index') }}(index):</label> |
|
|
|
<input |
|
|
|
@input="setData($event)" |
|
|
|
name="index" |
|
|
|
type="text" |
|
|
|
class="form-control" |
|
|
|
v-model="params.index" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="smallToUpload"> |
|
|
|
{{ $t('config.smallToUpload') }} (smallToUpload ):</label |
|
|
|
> |
|
|
|
<select @change="setData($event)" name="smallToUpload" class="custom-select"> |
|
|
|
<option value="true">YES</option> |
|
|
|
<option value="false" selected>NO</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="row"> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="toolBoxOverflow"> |
|
|
|
{{ $t('config.toolBoxOverflow') }}(toolBoxOverflow): |
|
|
|
</label> |
|
|
|
<select @change="setData($event)" name="toolBoxOverflow" class="custom-select"> |
|
|
|
<option value="true" selected>YES</option> |
|
|
|
<option value="false">NO</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="previewMode">{{ $t('config.previewMode') }}(previewMode):</label> |
|
|
|
<select @change="setData($event)" name="previewMode" class="custom-select"> |
|
|
|
<option value="true" selected>YES</option> |
|
|
|
<option value="false">NO</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="WatermarkText" |
|
|
|
>{{ $t('config.WatermarkText') }}(WatermarkText):</label |
|
|
|
> |
|
|
|
<input |
|
|
|
@input="setData($event)" |
|
|
|
name="WatermarkText" |
|
|
|
type="text" |
|
|
|
class="form-control" |
|
|
|
v-model="params.WatermarkText" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="row"> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="WatermarkTextFont" |
|
|
|
>{{ $t('config.WatermarkTextFont') }}(WatermarkTextFont):</label |
|
|
|
> |
|
|
|
<input |
|
|
|
@input="setData($event)" |
|
|
|
name="WatermarkTextFont" |
|
|
|
type="text" |
|
|
|
class="form-control" |
|
|
|
v-model="params.WatermarkTextFont" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="WatermarkTextColor" |
|
|
|
>{{ $t('config.WatermarkTextColor') }}(WatermarkTextColor):</label |
|
|
|
> |
|
|
|
<input |
|
|
|
@input="setData($event)" |
|
|
|
name="WatermarkTextColor" |
|
|
|
type="text" |
|
|
|
class="form-control" |
|
|
|
v-model="params.WatermarkTextColor" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="WatermarkTextX" |
|
|
|
>{{ $t('config.WatermarkTextX') }}(WatermarkTextX):</label |
|
|
|
> |
|
|
|
<input |
|
|
|
@input="setData($event)" |
|
|
|
name="WatermarkTextX" |
|
|
|
type="text" |
|
|
|
class="form-control" |
|
|
|
v-model="params.WatermarkTextX" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="WatermarkTextY" |
|
|
|
>{{ $t('config.WatermarkTextY') }}(WatermarkTextY):</label |
|
|
|
> |
|
|
|
<input |
|
|
|
@input="setData($event)" |
|
|
|
name="WatermarkTextY" |
|
|
|
type="text" |
|
|
|
class="form-control" |
|
|
|
v-model="params.WatermarkTextY" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="row"> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="quality">{{ $t('config.quality') }}(quality):</label> |
|
|
|
<input |
|
|
|
@input="setData($event)" |
|
|
|
name="WatermarkTextFont" |
|
|
|
type="text" |
|
|
|
class="form-control" |
|
|
|
v-model="params.quality" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col"> |
|
|
|
<div class="form-group custom-control"> |
|
|
|
<label for="accept">{{ $t('config.accept') }}(accept):</label> |
|
|
|
<input |
|
|
|
@input="setData($event)" |
|
|
|
name="accept" |
|
|
|
type="text" |
|
|
|
class="form-control" |
|
|
|
v-model="params.accept" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="row" style="margin-top: 20px"> |
|
|
|
<div class="col-md-6"> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-header">HTML</div> |
|
|
|
<div class="card-body"> |
|
|
|
<pre> |
|
|
|
<code>{{code1}}</code> |
|
|
|
</pre> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col-md-6"> |
|
|
|
<div class="card"> |
|
|
|
<div class="card-header">Javascript</div> |
|
|
|
<div class="card-body" style="height: 623px"> |
|
|
|
<pre> |
|
|
|
<code>{{code2}}</code> |
|
|
|
</pre> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="row bg"> |
|
|
|
<div class="col-md-10 offset-md-1"> |
|
|
|
<h1 class="bd-title"> |
|
|
|
<i class="fa fa-magic"></i> {{ $t('donation.title1') }} |
|
|
|
<small class="text-muted">{{ $t('donation.title2') }}</small> |
|
|
|
</h1> |
|
|
|
<p class="lead">{{ $t('donation.title3') }}</p> |
|
|
|
</div> |
|
|
|
<div class="col-md-10 offset-md-1" style="margin-top: 20px"> |
|
|
|
<div class="alipay"> |
|
|
|
<div> |
|
|
|
<img src="https://ihtmlcss.oss-cn-chengdu.aliyuncs.com/2020/01/weixinpay.png" alt="捐赠" /> |
|
|
|
</div> |
|
|
|
<div class="text-center">微信 Wechat</div> |
|
|
|
</div> |
|
|
|
<div class="alipay"> |
|
|
|
<div> |
|
|
|
<img src="https://ihtmlcss.oss-cn-chengdu.aliyuncs.com/2020/01/alipay.png" alt="捐赠" /> |
|
|
|
</div> |
|
|
|
<div class="text-center">支付宝 Alipay</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="row bg grayBg" style="padding-bottom: 20px; margin-top: 50px"> |
|
|
|
<div class="col"> |
|
|
|
<blockquote class="blockquote text-center"> |
|
|
|
<p class="mb-0"> |
|
|
|
{{ name }} {{ version }} |
|
|
|
<a :href="github" class="font-weight-lighter" style="margin: 0 5px">{{ |
|
|
|
$t('introduce.github') |
|
|
|
}}</a> |
|
|
|
<a :href="gitee" class="font-weight-lighter" style="margin: 0 5px">{{ |
|
|
|
$t('introduce.gitee') |
|
|
|
}}</a> |
|
|
|
<a :href="npm" class="font-weight-lighter" style="margin: 0 5px">{{ $t('introduce.npm') }}</a> |
|
|
|
</p> |
|
|
|
<footer> |
|
|
|
<small> |
|
|
|
<a :href="homepage" class="font-weight-lighter">{{ $t('introduce.homepage') }}</a> |
|
|
|
</small> |
|
|
|
</footer> |
|
|
|
</blockquote> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
// import config from '../package.json'; |
|
|
|
// import ImgCutter from './components/ImgCutter.vue'; |
|
|
|
|
|
|
|
import ImgCutter from 'vue-img-cutter'; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'App', |
|
|
|
@ -768,18 +108,7 @@ |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
name: '', |
|
|
|
version: '', |
|
|
|
author: '', |
|
|
|
description: '', |
|
|
|
banner: 'https://i.picsum.photos/id/743/1920/500.jpg', |
|
|
|
github: 'https://github.com/acccccccb/vue-img-cutter', |
|
|
|
gitee: 'https://gitee.com/GLUESTICK/vue-img-cutter', |
|
|
|
download: 'https://github.com/acccccccb/vue-img-cutter/archive/master.zip', |
|
|
|
cutImgSrc: 'https://phpcrm-oss.oss-cn-chengdu.aliyuncs.com/weixinpay.png', |
|
|
|
homepage: 'https://www.ihtmlcss.com', |
|
|
|
docs: 'https://github.com/acccccccb/vue-img-cutter/blob/master/README.md', |
|
|
|
npm: 'https://www.npmjs.com/package/vue-img-cutter', |
|
|
|
cutImgWidth: 250, |
|
|
|
cutImgHeight: 250, |
|
|
|
imgSrc: null, |
|
|
|
@ -789,7 +118,7 @@ |
|
|
|
loadImg: false, |
|
|
|
onPrintImgTimmer: null, |
|
|
|
params: { |
|
|
|
label: this.$t('block3.title9'), |
|
|
|
label: 'block3.title9', |
|
|
|
fileType: 'jpeg', |
|
|
|
crossOrigin: true, |
|
|
|
crossOriginHeader: '*', |
|
|
|
@ -811,7 +140,7 @@ |
|
|
|
imgMove: true, |
|
|
|
tool: true, |
|
|
|
originalGraph: false, |
|
|
|
WatermarkText: 'vue-img-cutter', |
|
|
|
WatermarkText: ' ', |
|
|
|
WatermarkTextFont: '12px Sans-serif', |
|
|
|
WatermarkTextColor: '#00ff00', |
|
|
|
WatermarkTextX: 0.95, |
|
|
|
@ -825,7 +154,7 @@ |
|
|
|
code2: |
|
|
|
'\n' + |
|
|
|
'// ' + |
|
|
|
this.$t('block3.title4') + |
|
|
|
'block3.title4' + |
|
|
|
'\n' + |
|
|
|
'forIe9:() => {\n' + |
|
|
|
' this.$refs.imgCutterModal.handleOpen({\n' + |
|
|
|
@ -836,10 +165,7 @@ |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.name = config.name; |
|
|
|
this.version = config.version; |
|
|
|
this.author = config.author; |
|
|
|
this.description = config.description; |
|
|
|
|
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
let $imgCutterBox = this.$refs.imgCutterBox; |
|
|
|
@ -1124,6 +450,7 @@ |
|
|
|
0% { |
|
|
|
transform: translate3d(-90px, 0, 0); |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
transform: translate3d(85px, 0, 0); |
|
|
|
} |
|
|
|
|