mirror of
https://github.com/itorr/one-last-image.git
synced 2026-01-02 20:06:03 +08:00
162 lines
5.4 KiB
HTML
162 lines
5.4 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">
|
|
<img src="images/asuka-8.jpg" @load="setImageAndDraw">
|
|
<canvas ref="canvas"></canvas>
|
|
</div>
|
|
<div class="ctrl-box">
|
|
<button @click="chooseFile()">选择图片</button>
|
|
<button @click="save()">下载封面</button>
|
|
<!-- <button @click="louvre()" class="generator-btn"></button> -->
|
|
<div class="config-box">
|
|
<!-- <div class="label-box" style="padding:4px 0;">
|
|
<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" style="padding:4px 0;">
|
|
<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" style="padding:4px 0;">
|
|
<b>l</b>
|
|
<input type="range" v-model.number="style.l"
|
|
min="0" max="100" step="1">
|
|
<span v-text="style.l"></span>
|
|
</div> -->
|
|
<div class="label-box" style="padding:10px 0;">
|
|
<b>线条</b>
|
|
<!-- <label>
|
|
<input type="radio" v-model="style.convoluteName" :value="null">null
|
|
</label> -->
|
|
<label v-for="con,convoluteName in Convolutes">
|
|
<input type="radio" v-model="style.convoluteName" :value="convoluteName">{{convoluteName}}
|
|
</label>
|
|
</div>
|
|
|
|
<!-- <div class="label-box" style="padding:4px 0;">
|
|
<label>
|
|
<input type="checkbox" v-model="style.convolute1Diff">卷曲diff
|
|
</label>
|
|
</div> -->
|
|
|
|
<div class="label-box" style="padding:4px 0;">
|
|
<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" style="padding:4px 0;">
|
|
<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" style="padding:4px 0;">
|
|
<label>
|
|
<input type="checkbox" v-model="style.invertLight">颠倒黑白
|
|
</label>
|
|
</div> -->
|
|
<!-- <div class="label-box" style="padding:4px 0;">
|
|
<b>明度观察层</b><input type="range" v-model.number="style.lightGroup"
|
|
min="1" max="10" step="1">
|
|
<span v-text="style.lightGroup"></span>
|
|
</div> -->
|
|
|
|
<!-- <div class="label-box" style="padding:4px 0;">
|
|
<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" style="padding:4px 0;">
|
|
<b>线迹轻重</b>
|
|
<input type="range" v-model.number="style.darkCut"
|
|
min="80" max="126" step="1">
|
|
<span v-text="style.darkCut"></span>
|
|
</div>
|
|
<div class="label-box" style="padding:4px 0;">
|
|
<b>调子数量</b>
|
|
<input type="range" v-model.number="style.blackLimit"
|
|
min="20" max="140" step="1">
|
|
<span v-text="style.blackLimit"></span>
|
|
</div>
|
|
<div class="label-box" style="padding:4px 0;">
|
|
<b>调子轻重</b>
|
|
<input type="range" v-model.number="style.blackLight"
|
|
min="10" max="70" step="1">
|
|
<span v-text="style.blackLight"></span>
|
|
</div>
|
|
<!-- <div class="label-box" style="padding:4px 0;">
|
|
<label>
|
|
<input type="checkbox" v-model="style.hue">色轮
|
|
</label>
|
|
</div>
|
|
<div class="label-box" style="padding:4px 0;">
|
|
<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>
|
|
</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="document.js"></script>
|
|
</body>
|
|
</html> |