|
|
|
|
@ -15,10 +15,11 @@
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<img id="editableImage"/>
|
|
|
|
|
|
|
|
|
|
<canvas id="orgnCanvas"></canvas>
|
|
|
|
|
<div id="PaintWebTarget"></div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
|
|
let brightnessSliderValue = 0;
|
|
|
|
|
//FIXME: pw instance 변수명 변경시 paintweb.js의 imageSaveTo() 내의 2564 line if(pw.image.modified) 변경 필요
|
|
|
|
|
var pw;
|
|
|
|
|
//FIXME: srcImg 변수명 변경시 paintweb.js의 imageSaveTo() 내의 2669 line var url = srcImg.src; 변경 필요
|
|
|
|
|
@ -94,6 +95,77 @@
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function fn_brightnessFilter(step){
|
|
|
|
|
|
|
|
|
|
brightnessSliderValue += step;
|
|
|
|
|
if(brightnessSliderValue < -255){
|
|
|
|
|
brightnessSliderValue = -255;
|
|
|
|
|
} else if(brightnessSliderValue > 255){
|
|
|
|
|
brightnessSliderValue = 255;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// imageData를 가져온다.
|
|
|
|
|
let orgnCanvas = $('#orgnCanvas')[0];
|
|
|
|
|
let orgnCtx = orgnCanvas.getContext('2d');
|
|
|
|
|
let pixels = orgnCtx.getImageData(0,0, orgnCanvas.width, orgnCanvas.height);
|
|
|
|
|
|
|
|
|
|
// image processing
|
|
|
|
|
let filteredData = fn_brightnessCalc(pixels, brightnessSliderValue);
|
|
|
|
|
|
|
|
|
|
// Canvas에 다시 그린다.
|
|
|
|
|
let jobCanvas = $('canvas.paintweb_layerCanvas')[0];
|
|
|
|
|
let jobCtx = jobCanvas.getContext('2d');
|
|
|
|
|
jobCtx.putImageData(filteredData, 0 , 0);
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function fn_brightnessCalc(pixels, sliderValue) {
|
|
|
|
|
let imgSource = pixels.data;
|
|
|
|
|
|
|
|
|
|
for(let i =0; i< imgSource.length; i+=4){
|
|
|
|
|
let tempR = imgSource[i];
|
|
|
|
|
let tempG = imgSource[i+1];
|
|
|
|
|
let tempB = imgSource[i+2];
|
|
|
|
|
|
|
|
|
|
tempR += sliderValue;
|
|
|
|
|
tempG += sliderValue;
|
|
|
|
|
tempB += sliderValue;
|
|
|
|
|
|
|
|
|
|
if(tempR < 0){
|
|
|
|
|
tempR = 0;
|
|
|
|
|
} else if(tempR > 255){
|
|
|
|
|
tempR = 255;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(tempG < 0){
|
|
|
|
|
tempG = 0;
|
|
|
|
|
} else if(tempG > 255){
|
|
|
|
|
tempG = 255;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(tempB < 0){
|
|
|
|
|
tempB = 0;
|
|
|
|
|
} else if(tempB > 255){
|
|
|
|
|
tempB = 255;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
imgSource[i] = tempR;
|
|
|
|
|
imgSource[i+1] = tempG;
|
|
|
|
|
imgSource[i+2] = tempB;
|
|
|
|
|
}
|
|
|
|
|
return pixels;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function fn_saveOrgnData(){
|
|
|
|
|
let img = new Image();
|
|
|
|
|
img.src = $("#editableImage")[0].src;
|
|
|
|
|
$("#orgnCanvas")[0].width = $("#editableImage")[0].width;
|
|
|
|
|
$("#orgnCanvas")[0].height = $("#editableImage")[0].height;
|
|
|
|
|
let canvas = $("#orgnCanvas")[0];
|
|
|
|
|
let ctx = canvas.getContext('2d');
|
|
|
|
|
ctx.drawImage(img, 0, 0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$(document).ready(function () {
|
|
|
|
|
srcImg = window.opener.document.getElementById('<c:out value="${imageTagId}"/>');
|
|
|
|
|
|
|
|
|
|
@ -102,6 +174,8 @@
|
|
|
|
|
editImg.onload = function () {
|
|
|
|
|
initEditor();
|
|
|
|
|
editImg.style.display = 'none';
|
|
|
|
|
fn_saveOrgnData();
|
|
|
|
|
$("#orgnCanvas")[0].style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
