xit-app
/
external-system-test
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev' into dev

Browse Source
main
Jonguk. Lim 2 years ago
parent dcc5da0b31 6dcd75bb73
commit bba5d5d79a
7 changed files with 148 additions and 107 deletions
Show Stats Download Patch File Download Diff File

75
src/main/webapp/WEB-INF/jsp/framework/biz/cmm/file/cmmPaintwebImageEditorPopup.jsp
Unescape Escape View File

@ -15,11 +15,9 @@
</head> </head>
<body> <body>
<img id="editableImage"/> <img id="editableImage"/>
<canvas id="orgnCanvas"></canvas>
<div id="PaintWebTarget"></div> <div id="PaintWebTarget"></div>
<script type="text/javascript"> <script type="text/javascript">
let brightnessSliderValue = 0;
//FIXME: pw instance 변수명 변경시 paintweb.js의 imageSaveTo() 내의 2564 line if(pw.image.modified) 변경 필요 //FIXME: pw instance 변수명 변경시 paintweb.js의 imageSaveTo() 내의 2564 line if(pw.image.modified) 변경 필요
var pw; var pw;
//FIXME: srcImg 변수명 변경시 paintweb.js의 imageSaveTo() 내의 2669 line var url = srcImg.src; 변경 필요 //FIXME: srcImg 변수명 변경시 paintweb.js의 imageSaveTo() 내의 2669 line var url = srcImg.src; 변경 필요
@ -95,77 +93,6 @@
return true; 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 () { $(document).ready(function () {
srcImg = window.opener.document.getElementById('<c:out value="${imageTagId}"/>'); srcImg = window.opener.document.getElementById('<c:out value="${imageTagId}"/>');
@ -174,8 +101,6 @@
editImg.onload = function () { editImg.onload = function () {
initEditor(); initEditor();
editImg.style.display = 'none'; editImg.style.display = 'none';
fn_saveOrgnData();
$("#orgnCanvas")[0].style.display = 'none';
} }
}); });

10
src/main/webapp/resources/3rd-party/paintweb/interfaces/default/layout.xhtml vendored
Unescape Escape View File

@ -73,14 +73,8 @@
</p> </p>
</li> </li>
<li class="paintweb_bright"> <li class="paintweb_buttonStyle" data-pwCommand="imageBright">brighten image</li>
<button type="button" class="btn gray" title="밝게" style="width: 100%;height: 100%" <li class="paintweb_buttonStyle" data-pwCommand="imageDark">darken image</li>
onclick="fn_brightnessFilter(20);">밝게</button>
</li>
<li class="paintweb_dark">
<button type="button" class="btn gray" title="어둡게" style="width: 100%;height: 100%"
onclick="fn_brightnessFilter(-20);">어둡게</button>
</li>
</ul> </ul>

24
src/main/webapp/resources/3rd-party/paintweb/interfaces/default/script.js vendored
Unescape Escape View File

@ -349,7 +349,8 @@ pwlib.gui = function (app) {
layerCanvas = app.layer.canvas, layerCanvas = app.layer.canvas,
layerContext = app.layer.context, layerContext = app.layer.context,
layerStyle = layerCanvas.style, layerStyle = layerCanvas.style,
bufferCanvas = app.buffer.canvas; bufferCanvas = app.buffer.canvas,
orginlCanvas = app.orginl.canvas;
if (!canvasContainer) { if (!canvasContainer) {
app.initError(lang.missingCanvasContainer); app.initError(lang.missingCanvasContainer);
@ -359,6 +360,7 @@ pwlib.gui = function (app) {
var containerStyle = canvasContainer.style; var containerStyle = canvasContainer.style;
canvasContainer.className = this.classPrefix + 'canvasContainer'; canvasContainer.className = this.classPrefix + 'canvasContainer';
orginlCanvas.className = this.classPrefix + 'orginlCanvas';
layerCanvas.className = this.classPrefix + 'layerCanvas'; layerCanvas.className = this.classPrefix + 'layerCanvas';
bufferCanvas.className = this.classPrefix + 'bufferCanvas'; bufferCanvas.className = this.classPrefix + 'bufferCanvas';
@ -368,6 +370,7 @@ pwlib.gui = function (app) {
containerStyle.backgroundImage = 'none'; containerStyle.backgroundImage = 'none';
} }
canvasContainer.appendChild(orginlCanvas);
canvasContainer.appendChild(layerCanvas); canvasContainer.appendChild(layerCanvas);
canvasContainer.appendChild(bufferCanvas); canvasContainer.appendChild(bufferCanvas);
@ -1404,6 +1407,22 @@ pwlib.gui = function (app) {
elem.className += ' ' + _self.classPrefix + 'cmd_' + ev.id; elem.className += ' ' + _self.classPrefix + 'cmd_' + ev.id;
if(elem.classList.contains('paintweb_buttonStyle')){
button = doc.createElement('button');
button.title = lang.commands[ev.id];
button.type = "button";
button.classList.add('btn');
button.classList.add('blue');
button.appendChild(doc.createTextNode(button.title));
if (elem.firstChild) {
elem.removeChild(elem.firstChild);
}
elem.appendChild(button);
button.addEventListener('click', _self.commandClick, false);
} else {
anchor = doc.createElement('a'); anchor = doc.createElement('a');
anchor.title = lang.commands[ev.id]; anchor.title = lang.commands[ev.id];
anchor.href = '#'; anchor.href = '#';
@ -1420,6 +1439,9 @@ pwlib.gui = function (app) {
anchor.addEventListener('click', _self.commandClick, false); anchor.addEventListener('click', _self.commandClick, false);
anchor.addEventListener('mouseover', _self.item_mouseover, false); anchor.addEventListener('mouseover', _self.item_mouseover, false);
anchor.addEventListener('mouseout', _self.item_mouseout, false); anchor.addEventListener('mouseout', _self.item_mouseout, false);
}
}; };
/** /**

9
src/main/webapp/resources/3rd-party/paintweb/interfaces/default/style.css vendored
Unescape Escape View File

@ -734,11 +734,10 @@
width: 100% width: 100%
} }
.paintweb_bright { .paintweb_buttonStyle button {
min-width: 70px width: 100%;
} height: 100%;
.paintweb_dark { min-width: 70px;
min-width: 70px
} }
.paintweb_strokeFillStyles { .paintweb_strokeFillStyles {

3
src/main/webapp/resources/3rd-party/paintweb/lang/en.json vendored
Unescape Escape View File

@ -108,6 +108,9 @@
"historyUndo": "Undo", "historyUndo": "Undo",
"imageClear": "Clear image", "imageClear": "Clear image",
"imageSave": "Save image", "imageSave": "Save image",
"imageRotate": "Rotate image",
"imageBright": "brighten image",
"imageDark": "darken image",
"selectionCopy": "Copy selection", "selectionCopy": "Copy selection",
"selectionCrop": "Crop selection", "selectionCrop": "Crop selection",
"selectionCut": "Cut selection", "selectionCut": "Cut selection",

3
src/main/webapp/resources/3rd-party/paintweb/lang/ko.json vendored
Unescape Escape View File

@ -108,6 +108,9 @@
"historyUndo": "실행취소", "historyUndo": "실행취소",
"imageClear": "Clear image", "imageClear": "Clear image",
"imageSave": "이미지 저장", "imageSave": "이미지 저장",
"imageRotate": "이미지 회전",
"imageBright": "밝게",
"imageDark": "어둡게",
"selectionCopy": "선택영역 복사", "selectionCopy": "선택영역 복사",
"selectionCrop": "선택영역만 자르기", "selectionCrop": "선택영역만 자르기",
"selectionCut": "선택영역 잘라내기", "selectionCut": "선택영역 잘라내기",

99
src/main/webapp/resources/3rd-party/paintweb/paintweb.js vendored
Unescape Escape View File

@ -91,6 +91,11 @@ function PaintWeb (win, doc) {
*/ */
this.layer = {id: null, canvas: null, context: null}; this.layer = {id: null, canvas: null, context: null};
/**
* 원본 이미지
*/
this.orginl = {canvas: null, context: null};
/** /**
* The instance of the active tool object. * The instance of the active tool object.
* *
@ -168,6 +173,12 @@ function PaintWeb (win, doc) {
*/ */
this.win = win; this.win = win;
/**
* 밝기조절 슬라이더 값
*
*/
this.brightnessSliderValue = 0;
/** /**
* Holds image information: width, height, zoom and more. * Holds image information: width, height, zoom and more.
* *
@ -742,6 +753,8 @@ function PaintWeb (win, doc) {
this.commandRegister('clipboardPaste', this.clipboardPaste) && this.commandRegister('clipboardPaste', this.clipboardPaste) &&
this.commandRegister('imageSave', this.imageSave) && this.commandRegister('imageSave', this.imageSave) &&
this.commandRegister('imageRotate', this.imageRotate) && this.commandRegister('imageRotate', this.imageRotate) &&
this.commandRegister('imageBright', this.imageBright) &&
this.commandRegister('imageDark', this.imageDark) &&
this.commandRegister('imageClear', this.imageClear) && this.commandRegister('imageClear', this.imageClear) &&
this.commandRegister('swapFillStroke', this.swapFillStroke) && this.commandRegister('swapFillStroke', this.swapFillStroke) &&
this.commandRegister('imageZoomIn', this.imageZoomIn) && this.commandRegister('imageZoomIn', this.imageZoomIn) &&
@ -877,8 +890,10 @@ function PaintWeb (win, doc) {
resInfo = doc.getElementById(res.elemId), resInfo = doc.getElementById(res.elemId),
layerCanvas = doc.createElement('canvas'), layerCanvas = doc.createElement('canvas'),
bufferCanvas = doc.createElement('canvas'), bufferCanvas = doc.createElement('canvas'),
orginlCanvas = doc.createElement('canvas'),
layerContext = layerCanvas.getContext('2d'), layerContext = layerCanvas.getContext('2d'),
bufferContext = bufferCanvas.getContext('2d'), bufferContext = bufferCanvas.getContext('2d'),
orginlContext = orginlCanvas.getContext('2d'),
width = cfg.imageWidth, width = cfg.imageWidth,
height = cfg.imageHeight, height = cfg.imageHeight,
imageLoad = cfg.imageLoad; imageLoad = cfg.imageLoad;
@ -914,16 +929,20 @@ function PaintWeb (win, doc) {
} }
res.elem = resInfo; res.elem = resInfo;
this.image.width = layerCanvas.width = bufferCanvas.width = width; this.image.width = layerCanvas.width = bufferCanvas.width = orginlCanvas.width = width;
this.image.height = layerCanvas.height = bufferCanvas.height = height; this.image.height = layerCanvas.height = bufferCanvas.height = orginlCanvas.height = height;
this.layer.canvas = layerCanvas; this.layer.canvas = layerCanvas;
this.layer.context = layerContext; this.layer.context = layerContext;
this.buffer.canvas = bufferCanvas; this.buffer.canvas = bufferCanvas;
this.buffer.context = bufferContext; this.buffer.context = bufferContext;
this.orginl.canvas = orginlCanvas;
this.orginl.context = orginlContext;
if (imageLoad) { if (imageLoad) {
layerContext.drawImage(imageLoad, 0, 0); layerContext.drawImage(imageLoad, 0, 0);
orginlContext.drawImage(imageLoad,0,0);
orginlCanvas.style.display = 'none';
} else { } else {
// Set the configured background color. // Set the configured background color.
var fillStyle = layerContext.fillStyle; var fillStyle = layerContext.fillStyle;
@ -2808,6 +2827,82 @@ function PaintWeb (win, doc) {
return true; return true;
}; };
/**
* 밝기 조절(이미지 밝게)
*/
this.imageBright = function (type) {
_self.brightnessSliderChange(20);
};
/**
* 밝기 조절(이미지 어둡게)
*/
this.imageDark = function (type) {
_self.brightnessSliderChange(-20);
};
this.brightnessSliderChange = function(step){
_self.brightnessSliderValue += step;
if(_self.brightnessSliderValue < -255){
_self.brightnessSliderValue = -255;
} else if(_self.brightnessSliderValue > 255){
_self.brightnessSliderValue = 255;
}
// imageData를 가져온다.
let orginlCanvasWidth = _self.orginl.canvas.width;
let orginlCanvasHeight = _self.orginl.canvas.height;
let orginlCtx = _self.orginl.context;
let pixels = orginlCtx.getImageData(0,0, orginlCanvasWidth, orginlCanvasHeight);
// image processing
let filteredData = _self.brightnessCalc(pixels, _self.brightnessSliderValue);
// Canvas에 다시 그린다.
let jobCtx = _self.layer.context;
jobCtx.putImageData(filteredData, 0 , 0);
}
this.brightnessCalc = function(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;
}
/** /**
* The <code>imageSaveResult</code> application event handler. This method * The <code>imageSaveResult</code> application event handler. This method
* PaintWeb-related stuff: for example, the {@link PaintWeb.image.modified} * PaintWeb-related stuff: for example, the {@link PaintWeb.image.modified}

Write Preview
Loading…
Cancel
Save