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

添加选项

Browse Source
This commit is contained in:
itorr
2022-08-11 14:48:55 +08:00
parent 3b3f49bdb0
commit a00d6b6d76
3 changed files with 37 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
html/document.js
View File

@@ -146,6 +146,8 @@ const Convolutes = {
const style = {
zoom:1.3,
light:0,
blackLimit: 80,
blackLight: 40,
s:80,
l:50,
black:true,

17
html/index.html
View File

@@ -59,6 +59,9 @@ img,canvas{
<label>
<input type="checkbox" v-model="style.black">铺调子
</label>
<label>
<input type="checkbox" v-model="style.cover">方形封面
</label>
</div>
<!-- <div class="label-box" style="padding:4px 0;">
@@ -96,11 +99,23 @@ img,canvas{
<span v-text="style.lightCut"></span>
</div> -->
<div class="label-box" style="padding:4px 0;">
<b>黑场切断</b>
<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">色轮

30
html/louvre.js
View File

@@ -64,23 +64,25 @@ const louvre = (img, config, callback) => {
// const _height = 800;
canvas.width = _width;
canvas.height = _height;
let cutLeft = 0;
let cutTop = 0;
let calcWidth = oriWidth;
let calcHeight = oriHeight;
if(config.cover){
if(oriScale > 1){
cutLeft = (oriScale - 1) * oriHeight / 2;
calcWidth = oriHeight;
_width = _height;
}else{
cutTop = (1 - oriScale) * oriHeight / 2;
calcHeight = oriWidth;
_height = _width;
}
}
// if(oriScale > 1){
// cutLeft = (oriScale - 1) * oriHeight / 2;
// calcWidth = oriHeight;
// }else{
// cutTop = (1 - oriScale) * oriHeight / 2;
// calcHeight = oriWidth;
// }
let setLeft = 0;
let setTop = 0;
@@ -90,6 +92,8 @@ const louvre = (img, config, callback) => {
canvas.width = _width;
canvas.height = _height;
ctx.drawImage(
img,
@@ -129,6 +133,10 @@ const louvre = (img, config, callback) => {
}
let blackPixel;
const {
blackLimit = 80,
blackLight = 40
} = config;
if(config.black){
// 处理暗面
blackPixel = ctx.createImageData(_width, _height);
@@ -136,7 +144,7 @@ const louvre = (img, config, callback) => {
for (let i = 0; i < pixelData.length; i += 4) {
let y = pixelData[i];
y = y > 80 ? 0 : (40 + Math.random() * 40 - 20);
y = y > blackLimit ? 0 : (blackLight + Math.random() * 40 - 20);
// y = Math.max(255-y) * 0.6;