From db335b2057b245670bdbd19b0127c6d0d2875b11 Mon Sep 17 00:00:00 2001 From: "Jonguk. Lim" Date: Sat, 7 Jan 2023 18:37:53 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20image=20editor=20=EB=B9=84=EC=9C=A8=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../jsp/fims/biz/ec/ecCctvCrackdownPopup.jsp | 4 +- .../jsp/fims/biz/ec/ecCtznSttemntMgtPopup.jsp | 4 +- .../paintweb/interfaces/default/script.js | 14 +++++-- .../3rd-party/paintweb/paintweb-config.json | 10 +++-- .../resources/3rd-party/paintweb/paintweb.js | 42 +++++++++++++------ 5 files changed, 52 insertions(+), 22 deletions(-) diff --git a/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCctvCrackdownPopup.jsp b/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCctvCrackdownPopup.jsp index 42d1bcdd..51f5bb33 100644 --- a/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCctvCrackdownPopup.jsp +++ b/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCctvCrackdownPopup.jsp @@ -204,9 +204,11 @@ let popTitle; let popOption; switch (flag) { + // FIXME: 이미지에디터 팝업 width, height는 952, 800으로 fix + // paintweb config의 imageWidth, imageHeight, viewportWidth, viewPortHeight 와 같이 연관 case "imageEditor": url = ''; - popOption = {width: 950, height: 750, resizable:false,scrollbars:'no'}; + popOption = {width: 952, height: 800, resizable:false,scrollbars:'no'}; popTitle = "이미지 에디터"; break; case "imageView": diff --git a/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtPopup.jsp b/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtPopup.jsp index 4c8678de..ee3bb6af 100644 --- a/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtPopup.jsp +++ b/src/main/webapp/WEB-INF/jsp/fims/biz/ec/ecCtznSttemntMgtPopup.jsp @@ -282,9 +282,11 @@ let popTitle; let popOption; switch (flag) { + //FIXME: 이미지에디터 팝업 width, height는 952, 800으로 fix + // paintweb config의 imageWidth, imageHeight, viewportWidth, viewPortHeight 와 같이 연관 case "imageEditor": url = ''; - popOption = {width: 950, height: 750, resizable:false,scrollbars:'no'}; + popOption = {width: 952, height: 800, resizable:false,scrollbars:'no'}; popTitle = "이미지 에디터"; break; case "imageView": diff --git a/src/main/webapp/resources/3rd-party/paintweb/interfaces/default/script.js b/src/main/webapp/resources/3rd-party/paintweb/interfaces/default/script.js index a5d8f8cf..87956941 100644 --- a/src/main/webapp/resources/3rd-party/paintweb/interfaces/default/script.js +++ b/src/main/webapp/resources/3rd-party/paintweb/interfaces/default/script.js @@ -779,8 +779,17 @@ pwlib.gui = function (app) { return true; // allow layouts without the zoom input } - input.value = 100; + //--------------------------------------------------------------------------------------- + // FIXME : image size 조정값 zoom에 set + //--------------------------------------------------------------------------------------- + console.log('initImageZoom>>>>>', app.image.width, app.image.height, app.image.zoom); + input.value = app.image.zoom * 100; input._old_value = 100; + //--------------------------------------------------------------------------------------- + //input.value = 100; + //input._old_value = 100; + + // Override the attributes, based on the settings. input.setAttribute('step', config.imageZoomStep * 100); @@ -788,14 +797,13 @@ pwlib.gui = function (app) { input.setAttribute('min', config.imageZoomMin * 100); var changeFn = function () { - app.imageZoomTo(parseInt(this.value) / 100); + app.imageZoomTo(parseInt(this.value) / 100); }; input.addEventListener('change', changeFn, false); input.addEventListener('input', changeFn, false); // Update some language strings - var label = input.parentNode; if (label.tagName.toLowerCase() === 'label') { label.replaceChild(doc.createTextNode(lang.imageZoomLabel), diff --git a/src/main/webapp/resources/3rd-party/paintweb/paintweb-config.json b/src/main/webapp/resources/3rd-party/paintweb/paintweb-config.json index 4d19d847..a1ee3ae2 100644 --- a/src/main/webapp/resources/3rd-party/paintweb/paintweb-config.json +++ b/src/main/webapp/resources/3rd-party/paintweb/paintweb-config.json @@ -67,8 +67,9 @@ * * @type String * @default "400px" + * 672px */ - "viewportHeight": "620px", + "viewportHeight": "82%", /** * Image save quality for the JPEG format. @@ -83,8 +84,9 @@ * * @type Number * @default 400 + * 945 */ - "imageWidth": 800, + "imageWidth": 945, /** * The default image width. @@ -92,7 +94,7 @@ * @type Number * @default 300 */ - "imageHeight": 750, + "imageHeight": 800, /** * Image preload. The image you want to display when PaintWeb loads. This must @@ -176,7 +178,7 @@ * @default 0.05 */ // 0.1 means 10% zoom. it's modified with zoom step in layout.xhtml. - "imageZoomStep": 0.1, + "imageZoomStep": 0.01, /** * The maximum allowed image zoom level. diff --git a/src/main/webapp/resources/3rd-party/paintweb/paintweb.js b/src/main/webapp/resources/3rd-party/paintweb/paintweb.js index 3e202ebc..85413e52 100644 --- a/src/main/webapp/resources/3rd-party/paintweb/paintweb.js +++ b/src/main/webapp/resources/3rd-party/paintweb/paintweb.js @@ -948,28 +948,44 @@ function PaintWeb (win, doc) { //--------------------------------------------------------------------------------------- - // FIXME : image size 조정 - start + // FIXME : image size scale 조정 - start //--------------------------------------------------------------------------------------- let scaleRate = 1.0; let imgWidth = parseInt(imageLoad.width); let imgHeight = parseInt(imageLoad.height); + const cfgImgWidth = cfg.imageWidth; + const cfgImgHeight = cfg.imageHeight; + const calWidth = imgWidth - cfgImgWidth; + const calHeight = imgHeight -cfgImgHeight; - if(imgWidth > width) { - scaleRate = width / imgWidth; - imgHeight = Math.floor(imgHeight * scaleRate); - } - // viewportHeight": "620px" 설정에 맞게 set - if(imgHeight > 620){ - scaleRate = scaleRate * (620 / imgHeight); + + if(calWidth > calHeight) { + if (imgWidth > cfgImgWidth) { + scaleRate = cfgImgWidth / imgWidth; + imgHeight = Math.floor(imgHeight * scaleRate); + } + // viewportHeight": "620px" 설정에 맞게 set + if (imgHeight > cfgImgHeight) { + scaleRate = scaleRate * (cfgImgHeight / imgHeight); + } + }else{ + if (imgHeight > cfgImgHeight) { + scaleRate = cfgImgHeight / imgHeight; + imgWidth = Math.floor(imgWidth * scaleRate); + } + // viewportHeight": "620px" 설정에 맞게 set + if (imgWidth > cfgImgWidth) { + scaleRate = scaleRate * (cfgImgWidth / imgWidth); + } } - this.image.zoom = MathRound(scaleRate * 10) / 10; - //this.imageZoomTo(0.1); + scaleRate = scaleRate.toFixed(2); + console.log('>>>>>>>>initCanvas', imageLoad.width*scaleRate, imageLoad.height*scaleRate, scaleRate) - //pwlib.inputs.imageZoom.value = 40; - //pwlib.initImageZoom(); + this.image.zoom = scaleRate; + //this.imageZoomTo(scaleRate) //--------------------------------------------------------------------------------------- - // FIXME : image size 조정 - end + // FIXME : image size scale 조정 - end //---------------------------------------------------------------------------------------