mirror of
https://github.com/itorr/one-last-image.git
synced 2026-01-02 20:06:03 +08:00
182 lines
5.6 KiB
HTML
182 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>One Last Image - One Last Kiss 风格 图片转线稿 生成器 - 神奇海螺实验室</title>
|
|
<link rel="stylesheet" href="document.css">
|
|
<meta name="viewport" content="width=device-width,user-scalable=0">
|
|
<meta name="description" content="One Last Kiss 风格 图片转线稿 封面生成器 宇多田光 神奇海螺实验室">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="app" :data-runing="runing">
|
|
<header>
|
|
<h1>
|
|
One Last Image
|
|
</h1>
|
|
<p>One Last Kiss 风格 图片转线稿 封面生成器</p>
|
|
<!-- <img src="../one-last-image-logo-color.png"> -->
|
|
</header>
|
|
<div>
|
|
<div class="output-box"
|
|
:data-cover="style.cover"
|
|
:data-diff="diff"
|
|
@touchstart.prevent="diff = true"
|
|
@touchend.prevent="diff = false"
|
|
@mousedown.prevent="diff = true"
|
|
@mouseup.prevent="diff = false">
|
|
<img src="images/asuka-8.jpg" @load="setImageAndDraw">
|
|
<canvas ref="canvas"></canvas>
|
|
</div>
|
|
<div class="ctrl-box">
|
|
<button class="btn" @click="chooseFile()">选择图片</button>
|
|
<button class="btn current" @click="save()">下载图片</button>
|
|
<!-- <button @click="louvre()" class="generator-btn"></button> -->
|
|
<div class="config-box">
|
|
<!-- <div class="label-box">
|
|
<b>light</b>
|
|
<input type="range" v-model.number="style.light"
|
|
min="-100" max="100" step=".1">
|
|
<span v-text="style.light"></span>
|
|
</div> -->
|
|
<!--
|
|
<div class="label-box">
|
|
<b>s</b>
|
|
<input type="range" v-model.number="style.s"
|
|
min="0" max="100" step="1">
|
|
<span v-text="style.s"></span>
|
|
</div>
|
|
<div class="label-box">
|
|
<b>l</b>
|
|
<input type="range" v-model.number="style.l"
|
|
min="0" max="100" step="1">
|
|
<span v-text="style.l"></span>
|
|
</div> -->
|
|
<ui-tabs v-model="style.convoluteName" :options="convolutes"></ui-tabs>
|
|
|
|
<!-- <div class="label-box">
|
|
<label>
|
|
<input type="checkbox" v-model="style.convolute1Diff">卷曲diff
|
|
</label>
|
|
</div> -->
|
|
<div style="padding:14px 0;">
|
|
<ui-switch v-model="style.black">调子</ui-switch>
|
|
<!-- <ui-switch v-model="style.cover">方形</ui-switch> -->
|
|
<ui-switch v-model="style.kuma">Kiss</ui-switch>
|
|
<ui-switch v-model="style.watermark">水印</ui-switch>
|
|
<ui-switch v-model="style.hajimei":disabled="!style.watermark">初回</ui-switch>
|
|
</div>
|
|
<!-- <div class="label-box">
|
|
<label>
|
|
<input type="checkbox" v-model="style.black">调子
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" v-model="style.cover">方形
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" v-model="style.kuma">Kiss
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" v-model="style.watermark">水印
|
|
</label>
|
|
|
|
<label>
|
|
<input type="checkbox" v-model="style.hajimei" :disabled="!style.watermark">初回
|
|
</label>
|
|
</div> -->
|
|
|
|
<!-- <div class="label-box">
|
|
<b>contrast</b>
|
|
<input type="range" v-model.number="style.contrast"
|
|
min="1" max="100" step=".1">
|
|
<span v-text="style.contrast"></span>
|
|
</div> -->
|
|
|
|
<!-- <div class="label-box" style="padding:10px 0;">
|
|
<b>线条方案2</b>
|
|
<label>
|
|
<input type="radio" v-model="style.convoluteName2" :value="null">null
|
|
</label>
|
|
<label v-for="con,convoluteName in Convolutes">
|
|
<input type="radio" v-model="style.convoluteName2" :value="convoluteName">{{convoluteName}}
|
|
</label>
|
|
</div> -->
|
|
|
|
<!-- <div class="label-box">
|
|
<label>
|
|
<input type="checkbox" v-model="style.invertLight">颠倒黑白
|
|
</label>
|
|
</div> -->
|
|
|
|
<!-- <div class="label-box">
|
|
<b>高亮切断</b>
|
|
<input type="range" v-model.number="style.lightCut"
|
|
min="0" max="128" step="1">
|
|
<span v-text="style.lightCut"></span>
|
|
</div> -->
|
|
<div class="label-box range-box" style="padding:10px 0 4px;">
|
|
<div class="head">
|
|
<b>线迹轻重</b>
|
|
<span v-text="style.darkCut"></span>
|
|
</div>
|
|
<input type="range" v-model.number="style.darkCut"
|
|
min="80" max="126" step="1">
|
|
</div>
|
|
<div class="label-box range-box">
|
|
<div class="head">
|
|
<b>调子数量</b>
|
|
<span v-text="style.blackLimit"></span>
|
|
</div>
|
|
<input type="range" v-model.number="style.blackLimit"
|
|
min="20" max="140" step="1">
|
|
</div>
|
|
<div class="label-box range-box">
|
|
<div class="head">
|
|
<b>调子轻重</b>
|
|
<span v-text="style.blackLight"></span>
|
|
</div>
|
|
<input type="range" v-model.number="style.blackLight"
|
|
min="10" max="70" step="1">
|
|
</div>
|
|
<!-- <div class="label-box">
|
|
<label>
|
|
<input type="checkbox" v-model="style.hue">色轮
|
|
</label>
|
|
</div>
|
|
<div class="label-box">
|
|
<b>色轮压缩</b><input type="range" v-model.number="style.hueGroup"
|
|
min="10" max="255" step="1">
|
|
<span v-text="style.hueGroup"></span>
|
|
</div> -->
|
|
</div>
|
|
<div class="tips-box">
|
|
<p>
|
|
建议上传
|
|
<b>赛璐璐风格</b> 的
|
|
<b>动画截图</b>、<b>插画</b>
|
|
等，效果最佳
|
|
</p>
|
|
<p>
|
|
移动端请使用
|
|
<b>自带浏览器</b>
|
|
进行保存
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer>
|
|
<a href="https://weibo.com/reiove" target="_blank">@卜卜口</a>
|
|
<a href="https://github.com/itorr/one-last-image" target="_blank">GitHub</a>
|
|
<a href="https://lab.magiconch.com" target="_blank">神奇海螺实验室</a>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="https://lab.magiconch.com/vue.2.6.11.min.js"></script>
|
|
<script src="color.js"></script>
|
|
<script src="bezier-easing.js"></script>
|
|
<script src="louvre.js"></script>
|
|
<script src="ui-tabs.vue.js"></script>
|
|
<script src="ui-switch.vue.js"></script>
|
|
<script src="document.js"></script>
|
|
</body>
|
|
</html> |