Skip to content

Commit

Permalink
添加彩色模式
Browse files Browse the repository at this point in the history
  • Loading branch information
@chuiliu
chuiliu committed Jan 3, 2017
1 parent d5dcc2f commit 2986a0a
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 31 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@

http://chuiliu.github.io/demo/pixel/

![](http://o743aqnrb.bkt.clouddn.com/canvas%E8%BD%AC%E5%83%8F%E7%B4%A0%E5%9B%BE/test.gif)
![](http://o743aqnrb.bkt.clouddn.com/canvas%E8%BD%AC%E5%83%8F%E7%B4%A0%E5%9B%BE/re.gif)

70 changes: 52 additions & 18 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ html, body {
width: 92%;
min-height: 100%;
min-width: 980px;
/* overflow: hidden; */
}

.sidebar {
Expand All @@ -38,12 +37,13 @@ html, body {

.sidebar h1 {
margin-top: 20px;
margin-bottom: 40px;
margin-bottom: 30px;
font-size: 32px;
color: #666;
}

.sidebar .threshold {
position: relative;
margin-top: 40px;
}

Expand All @@ -52,10 +52,23 @@ html, body {
}

.sidebar .threshold .threshold-val {
position: absolute;
top: 0;
right: 120px;
font-size: 18px;
color: #36b953;
}


.sidebar .mode {
margin-top: 30px;
}

.sidebar .mode label {
width: 50px;
margin-right: 20px;
}

.sidebar .scale {
margin-top: 20px;
margin-bottom: 40px;
Expand All @@ -74,27 +87,52 @@ html, body {
color: #ccc;
}

.sidebar .disable .option + label::before {
-webkit-box-shadow: 0 0 0 2px #ccc;
box-shadow: 0 0 0 2px #ccc;
background-color: #fff;
cursor: default;
}

.sidebar .disable .option:checked + label::before {
-webkit-box-shadow: 0 0 0 2px #ccc;
box-shadow: 0 0 0 2px #ccc;
background-color: #ccc;
cursor: default;
}

.sidebar .disable label {
color: #666;
cursor: default;
}


#scale {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-left: 10px;
width: 150px;
width: 140px;
border: 1px solid #ccc;
-webkit-border-radius: 2px;
border-radius: 2px;
outline: none;
color: #333;
}


.main {
overflow: hidden;
padding-top: 40px;
margin-left: 320px;
min-width: 500px;
}

#canvas {
display: block;
margin: 0 auto;
max-width: 500px;
}

#img-upload {
display: none;
}
Expand All @@ -110,26 +148,27 @@ html, body {
text-align: center;
color: #999;
}

#img-preview img {
display: inline-block;
max-width: 300px;
max-height: 250px;
vertical-align: middle;
}

#threshold-on {
.option {
position: absolute;
left: 0;
visibility: hidden;
}

#threshold-on + label {
display: block;
.option + label {
display: inline-block;
position: relative;
left: 26px;
cursor: pointer;
}
#threshold-on + label::before {
.option + label::before {
content: '';
position: absolute;
left: -24px;
Expand All @@ -144,7 +183,7 @@ html, body {
background-color: #fff;
}

#threshold-on:checked + label::before {
.option:checked + label::before {
content: '';
position: absolute;
left: -24px;
Expand All @@ -159,15 +198,8 @@ html, body {
background-color: #36b953;
}


#canvas {
display: block;
margin: 0 auto;
max-width: 500px;
}

input[type="range"] {
width: 200px;
width: 230px;
height: 2px;
-webkit-border-radius: 6px;
border-radius: 6px;
Expand Down Expand Up @@ -216,11 +248,13 @@ label {
.btn-small {
display: inline-block;
vertical-align: middle;
padding: 0 6px;
width: 24px;
height: 18px;
line-height: 18px;
border: none;
outline: none;
line-height: 18px;
font-size: 18px;
text-align: center;
text-shadow: 0 0 1px rgba(0, 0, 0, .2);
color: #36b953;
Expand Down
15 changes: 10 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,28 +15,33 @@ <h1>the Pixel Art</h1>
<label for="img-upload" class="btn btn-upload">+ 上传图片</label>
<div id="img-preview">未上传</div>


<div class="threshold">
<div class="threshold-checkbox">
<input type="checkbox" name="isThresholdOn" id="threshold-on" checked="checked">
<input type="checkbox" name="isThresholdOn" class="option" id="threshold-on" checked="checked">
<label for="threshold-on">阈值 (0 ~ 255)：</label>
</div>

<div class="threshold-range active" id="threshold-range">
<div class="threshold-range" id="threshold-range">
<button id="subtract" class="btn-small">-</button>
<input type="range" min="0" max="255" step="1" name="level" value="128" id="threshold-level">
<button id="add" class="btn-small">+</button>
<span class="threshold-val">128</span>
</div>
</div>

<div class="mode" id="mode-panel">
<span class="mode">模式：</span>
<input type="radio" name="mode" id="mode-black" class="option" checked="checked" value="1"><label for="mode-black">黑白</label>
<input type="radio" name="mode" id="mode-color" class="option" value="0"><label for="mode-color">彩色</label>
</div>


<div class="scale">
<label for="scale">缩放比例：</label>
<label for="scale">缩放值 (像素大小)：</label>
<input type="number" min="0.01" max="1" step="0.01" value="0.25" name="scale" id="scale">
</div>

<a href="#" id="download" class="btn btn-download">下载</a>
<a href="#" id="download" class="btn btn-download">下载图片</a>
</div>

<div class="main">
Expand Down
46 changes: 39 additions & 7 deletions js/pixel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,14 @@

var thresholdLevel = $('threshold-level'),
thresholdVal = document.querySelector('.threshold-val'),
mode = document.getElementsByName('mode'),
add = $('add'),
subtract = $('subtract'),
scaleRatio = $('scale'),
isThresholdOn = $('threshold-on'),
modePanel = $('mode-panel'),
modeBlack = $('mode-black'),
modeColor = $('mode-color'),
uploadBtn = $('img-upload'),
downloadBtn = $('download');

Expand All @@ -23,19 +27,26 @@
* @param {[type]} ctx [description]
* @param {[type]} imageData [description]
* @param {[type]} threshold [阈值]
* @param {[type]} mode [模式：0：彩色，1：黑白]
* @return {[type]} [description]
*/
var thresholdConvert = function(ctx, imageData, threshold) {
var thresholdConvert = function(ctx, imageData, threshold, mode) {
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
var red = data[i];
var green = data[i + 1];
var blue = data[i + 2];
var alpha = data[i + 3];

// 灰度计算公式
var gray = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 *data[i + 2];

var color = gray >= threshold ? 255 : 0;
var alpha = data[i + 3];
data[i] = color; // red
data[i + 1] = color; // green
data[i + 2] = color; // blue
data[i + 3] = alpha >= threshold ? 255 : 0; // 去掉透明

data[i] = (mode == 0 && color == 0) ? red : color; // red
data[i + 1] = (mode == 0 && color == 0) ? green : color; // green
data[i + 2] = (mode == 0 && color == 0) ? blue : color; // blue
data[i + 3] = alpha >= threshold ? 255 : 0; // 去掉透明
}
ctx.putImageData(imageData, 0, 0);
};
Expand All @@ -60,7 +71,7 @@

var imageData = context.getImageData(0, 0, image.width * scale, image.height * scale);
// 阈值处理
isThresholdOn.checked && thresholdConvert(context, imageData, currentThreshold);
isThresholdOn.checked && thresholdConvert(context, imageData, currentThreshold, getModeValue(mode));

var dataURL = canvasTemp.toDataURL();
var canvas = $('canvas');
Expand Down Expand Up @@ -90,12 +101,26 @@
thresholdLevel.disabled = false;
add.disabled = false;
subtract.disabled = false;
modeBlack.disabled = false;
modeColor.disabled = false;
thresholdRange.classList.remove('disable');
modePanel.classList.remove('disable');
} else {
thresholdLevel.disabled = true;
add.disabled = true;
subtract.disabled = true;
modeBlack.disabled = true;
modeColor.disabled = true;
thresholdRange.classList.add('disable');
modePanel.classList.add('disable');
}
};

var getModeValue = function(ele) {
for (var i = 0, len = ele.length; i < len; i++) {
if (ele[i].checked) {
return ele[i].value;
}
}
};

Expand Down Expand Up @@ -136,6 +161,13 @@
render();
}, false);

for (var i = 0, len = mode.length; i < len; i++) {
mode[i].addEventListener('change', function() {
render();
}, false);
}




// upload
Expand Down

0 comments on commit 2986a0a

Please sign in to comment.