Mirrors/one-last-image
1
0
Fork 0
mirror of https://github.com/itorr/one-last-image.git synced 2026-01-02 20:06:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

kiss 选项

Browse Source
This commit is contained in:
itorr
2022-08-11 17:27:26 +08:00
parent a00d6b6d76
commit 66f57f3389
5 changed files with 78 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
html/document.js
View File

@@ -144,13 +144,14 @@ const Convolutes = {
}
const style = {
zoom:1.3,
zoom:1,
light:0,
blackLimit: 80,
blackLight: 40,
s:80,
l:50,
black:true,
kuma:true,
convoluteName: '一般',
convolute1Diff: true,
convoluteName2: null,

BIN
html/images/asuka-11.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 271 KiB

BIN
html/images/asuka.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 152 KiB

After

Width:  |  Height:  |  Size: 437 KiB

7
html/index.html
View File

@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="UTF-8">
<title>One Last Image - One Last Kiss 风格封面生成器</title>
<title>One Last Image - One Last Kiss 风格 图片转线稿 生成器</title>
<style>
canvas{
background:#FFF;
@@ -17,7 +17,7 @@ img,canvas{
<div class="app">
<div class="ctrl-box">
<img src="images/asuka.jpg" @load="setImageAndDraw">
<img src="images/asuka-8.jpg" @load="setImageAndDraw">
<!-- <div class="label-box" style="padding:4px 0;">
@@ -62,6 +62,9 @@ img,canvas{
<label>
<input type="checkbox" v-model="style.cover">方形封面
</label>
<label>
<input type="checkbox" v-model="style.kuma">Kiss
</label>
</div>
<!-- <div class="label-box" style="padding:4px 0;">

138
html/louvre.js
View File

@@ -291,80 +291,84 @@ const louvre = (img, config, callback) => {
pixelData[i+3 ] = 255
}
}
const hStart = 30;
const hEnd = -184;
const be = bezier(0.57, 0.01, 0.43, 0.99);
const s = config.s/100;
if(config.kuma){
const gradient = ctx.createLinearGradient(0,0, _width,_height);
// Add three color stops
gradient.addColorStop(0, '#fbba30');
gradient.addColorStop(0.4, '#fc7235');
gradient.addColorStop(.6, '#fc354e');
gradient.addColorStop(0.7, '#cf36df');
gradient.addColorStop(.8, '#37b5d9');
gradient.addColorStop(1, '#3eb6da');
// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, _width, _height);
let gradientPixel = ctx.getImageData(0, 0, _width, _height);
const hStart = 30;
const hEnd = -184;
for (let i = 0; i < pixelData.length; i += 4) {
let y = pixelData[i];
let p = Math.floor(i / 4);
let _h = Math.floor(p/_width);
let _w = p % _width;
/*
const be = bezier(0.57, 0.01, 0.43, 0.99);
const s = config.s/100;
const gradient = ctx.createLinearGradient(0,0, _width,_height);
// Add three color stops
gradient.addColorStop(0, '#fbba30');
gradient.addColorStop(0.4, '#fc7235');
gradient.addColorStop(.6, '#fc354e');
gradient.addColorStop(0.7, '#cf36df');
gradient.addColorStop(.8, '#37b5d9');
gradient.addColorStop(1, '#3eb6da');
// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, _width, _height);
let gradientPixel = ctx.getImageData(0, 0, _width, _height);
// const
// hScale = hScale * hScale;
let hScale = (_h + _w)/(_width + _height);
hScale = hScale * hScale;
hScale = be(hScale);
// let h = Math.floor((hStart + (hScale) * (hEnd - hStart)));
let [h] = rgb2hsl([
gradientPixel.data[i + 0],
gradientPixel.data[i + 1],
gradientPixel.data[i + 2],
]);
const l = y/255;
const rgb = hsl2rgb([h, s, l * (1 - config.l/100) + (config.l/100)]);
if(i%5677===0){
// console.log(h,y,l,l * (config.l/100) + (1 - config.l/100))
// console.log((_h + _w)/(_width + _height),hScale)
for (let i = 0; i < pixelData.length; i += 4) {
let y = pixelData[i];
let p = Math.floor(i / 4);
let _h = Math.floor(p/_width);
let _w = p % _width;
/*
// const
// hScale = hScale * hScale;
let hScale = (_h + _w)/(_width + _height);
hScale = hScale * hScale;
hScale = be(hScale);
// let h = Math.floor((hStart + (hScale) * (hEnd - hStart)));
let [h] = rgb2hsl([
gradientPixel.data[i + 0],
gradientPixel.data[i + 1],
gradientPixel.data[i + 2],
]);
const l = y/255;
const rgb = hsl2rgb([h, s, l * (1 - config.l/100) + (config.l/100)]);
if(i%5677===0){
// console.log(h,y,l,l * (config.l/100) + (1 - config.l/100))
// console.log((_h + _w)/(_width + _height),hScale)
}
pixelData[i+0 ] = rgb[0];
pixelData[i+1 ] = rgb[1];
pixelData[i+2 ] = rgb[2];
pixelData[i+3 ] = 255;
*/
pixelData[i+0 ] = gradientPixel.data[i + 0];
pixelData[i+1 ] = gradientPixel.data[i + 1];
pixelData[i+2 ] = gradientPixel.data[i + 2];
y = 255 - y;
if(config.black){
y = Math.max(
y,
blackPixel.data[i]
);
}
pixelData[i+3 ] = y
}
pixelData[i+0 ] = rgb[0];
pixelData[i+1 ] = rgb[1];
pixelData[i+2 ] = rgb[2];
pixelData[i+3 ] = 255;
*/
pixelData[i+0 ] = gradientPixel.data[i + 0];
pixelData[i+1 ] = gradientPixel.data[i + 1];
pixelData[i+2 ] = gradientPixel.data[i + 2];
y = 255 - y;
if(config.black){
y = Math.max(
y,
blackPixel.data[i]
);
}
pixelData[i+3 ] = y
}
if(config.hue){
for (let i = 0; i < pixelData.length; i += 4) {
let y = pixelData[i ]