jsを用いて画像の芸術処理を実現する
4201 ワード
index.html
app.js
効果図
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> canvas createjs </title>
<script src="easeljs-0.8.0.min.js"></script>
<style type="text/css">
/* contnet */
* {margin: 0;padding: 0;}
body {font-size: 12px; margin: 10px; font-family: simsun; background: #fff;}
p { height: 12px;}
p.ts { margin: 10px 0 0 0; width: 500px; float: left;}
span {width: 12px;}
#cv, #txt {float: left;}
#cv { margin-right: 5px;}
.bt{ height: 37px; }
form, input {width: 73px;height: 27px;}
form {
position: relative;
float: left;
margin: 0 10px 0 0;
}
#up-button{
position: absolute;
right: 0;
top: 0;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
outline: none;
}
#button{
}
iframe {display: none;}
</style>
</head>
<body id="body">
<div class="bt">
<form id="uf">
<input type="file" name="file" id="up-button"/>
<input type="button" id="button" value=" "/>
</form>
</div>
<canvas id="cv"></canvas>
<script src="js/app.js" type="text/javascript"></script>
</body>
</html>
app.js
var cv = document.getElementById('cv');
var c = cv.getContext('2d');
var fileBtn = document.getElementById("up-button");
var img = new Image();
var data;
var canvas;
img.src = 'jiejing.jpg';
img.onload = init; //
fileBtn.onchange = getImg;
//
function getColor(g) {
if (g <= 30) {
return '#000';
} else if (g > 30 && g <= 60) {
return '#333';
} else if (g > 60 && g <= 120) {
return '#666';
} else if (g > 120 && g <= 150) {
return '#999';
} else if (g > 150 && g <= 180) {
return '#bbb';
} else if (g > 180 && g <= 210) {
return '#ccc';
} else if (g > 210 && g <= 240) {
return '#eee';
} else {
return '#fff';
}
}
// rgb
function getGray(r, g, b) {
return 0.299 * r + 0.578 * g + 0.114 * b;
}
//
function init() {
console.log(document.getElementById('body').childNodes.length);
var body = document.getElementById('body');
if(body.childNodes.length>7){
body.removeChild(body.childNodes[6]);
}
cv.width = img.width;
cv.height = img.height;
c.drawImage(img, 0, 0);
var imgData = c.getImageData(0, 0, img.width, img.height);
var imgDataArr = imgData.data;
var imgDataWidth = imgData.width;
var imgDataHeight = imgData.height;
var stage;
canvas = document.createElement('canvas');
canvas.setAttribute('width',img.width);
canvas.setAttribute('height',img.height);
canvas.setAttribute('id','canvas');
document.getElementById("body").appendChild(canvas);
stage = new createjs.Stage("canvas");
data = new Array(imgDataWidth,imgDataHeight);
for (h = 0; h < imgDataHeight; h++) {
for (w = 0; w < imgDataWidth; w++) {
var index = (w + imgDataWidth * h) * 4;
var r = imgDataArr[index + 0];
var g = imgDataArr[index + 1];
var b = imgDataArr[index + 2];
var gray = getGray(r, g, b);
var s = new createjs.Shape();
var g = s.graphics;
g.setStrokeStyle(1);
g.beginStroke(getColor(gray));
g.drawRect(w,h,1,1);
stage.addChild(s);
}
}
stage.update();
}
//
function getImg(file) {
var reader = new FileReader();
reader.readAsDataURL(fileBtn.files[0]);
reader.onload = function () {
img.src = reader.result;
}
}
効果図