Help
RSS
API
Feed
Maltego
Contact
Domain > walkinimages.com
×
More information on this domain is in
AlienVault OTX
Is this malicious?
Yes
No
DNS Resolutions
Date
IP Address
2025-08-28
3.5.184.86
(
ClassC
)
2026-01-20
3.5.185.121
(
ClassC
)
Port 80
HTTP/1.1 200 OKx-amz-id-2: U2UdgMyjRKS3epMBk9tKMadYQSm19hfZ8QHOQU3wf6J5a/vyn3vemeMb8DkY4SkGtU2RMarXn8Exrln1w+RUqh0q7DQWpodax-amz-request-id: ZAKGFJY05M8T6G0XDate: Tue, 20 Jan 2026 15:00:13 GMTLast-Modified: Mon, 04 Mar 2024 04:59:12 GMTETag: fa5d6fb084ccf9be1739fc3d2c2f0dc6Content-Type: text/htmlContent-Length: 73124Server: AmazonS3 !DOCTYPE html>html langko> head> title>walkinimages/title> meta charsetUTF-8> meta nameviewport contentwidthdevice-width, initial-scale1.0> !-- Bootstrap CSS --> !-- link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css integritysha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l crossoriginanonymous> -->!-- 최신 부트스트랩 CDN 사용 예시 --> !-- link hrefhttps://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css relstylesheet> --> !-- Optional JavaScript --> !-- jQuery and Bootstrap Bundle (includes Popper) --> !-- script srchttps://code.jquery.com/jquery-3.5.1.slim.min.js integritysha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj crossoriginanonymous>/script> script srchttps://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js integritysha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns crossoriginanonymous>/script> --> !-- script srchttps://code.jquery.com/jquery-3.6.0.min.js>/script> --> !-- script srchttps://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js>/script> --> !-- Bootstrap CSS -->link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.cssintegritysha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l crossoriginanonymous>!-- Optional JavaScript -->!-- jQuery and Bootstrap Bundle (includes Popper) -->script srchttps://code.jquery.com/jquery-3.5.1.slim.min.js integritysha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj crossoriginanonymous>/script>script srchttps://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js integritysha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns crossoriginanonymous>/script> !-- script srchttps://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js typetext/javascript charsetutf-8 >/script> --> !-- TypedArray polyfill --> script srchttps://cdn.polyfill.io/v3/polyfill.min.js?featuresTypedArray>/script> !-- colorjoe --> link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/colorjoe@4.1.1/css/colorjoe.css crossoriginanonymous /> script srchttps://cdn.jsdelivr.net/npm/colorjoe@4.1.1/dist/colorjoe.js>/script> !-- link relstylesheet hreflayout.css> --> style> * { margin:0; /* 브라우저 기본 마진 리셋 */ padding:0; /* 브라우저 기본 패딩 리셋 */ box-sizing: border-box; /* 테두리까지 포함해서 박스 모델 너비로 계산 */ font-family: Noto Sans, sans-serif; } html, body { width: 100%; height: 100%; } p { text-align: center; color: #777 } #mainSvg { border: 1px solid #333; display: block; margin-top: calc((100vh - 600px) / 2 - 30px); margin-left: auto; margin-right: auto; /* margin: 0 auto; */ cursor:auto; } path, line, polygon{ stroke: dodgerblue; } path{cursor:move;} .select-box1 { border-bottom: 1px solid #C5CAC7; width: 100%; height: 10% } .select-box2 { border-bottom: 1px solid #C5CAC7; height: 20%; width: 100%; } .select-bar{ -webkit-appearance: none; border-radius: 10px; height: 4px; width: 100%; margin: 14% 5%; background: #C5CAC7;; } .select-bar::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #ffffff; } .select-text{ /* position: absolute; */ width: 100%; height: 25%; margin-left: 5%; margin-top:8px; font-family: Noto Sans; font-style: normal; font-weight: 600; font-size: 100%; line-height: 100%; color: #000000; } .input-number { width: 100%; height: 27px; text-align: center; } #input-range { display: inline-block; width: 60%; } #input-box{ display: inline-block; width: 15%; margin-left: 10% } #generate { width: 73%; margin-top: 80%; margin-left: 14.2% } #generate-button{ width: 100%; /* background: blue; border: none; border-radius: 3px; color: white; height: 20px; */ } #re-generate { width: 73%; margin-top: 5%; margin-left: 14.2% } #re-generate-button{ width: 100% } #save{ position: fixed; right: 72px; top: 584px; width: 293px; } #save-button{ width: 100%; /* margin-left: 17%; */ /* background: blue; border: none; border-radius: 3px; color: white; height: 20px; */ } #container { width: 100%; height: 100%; /* margin:20px auto; 내용을 화면 가운데 배치하도록 좌우 마진을 auto로 */ } #header{ width:100%; /* 부모 요소의 너비와 똑같게 */ height:120px; /* 헤더의 높이 */ background-color:#acacac; border-right: solid; } #left-sidebar { width: 25%; /* 사이드바의 너비 */ height:100%; /* 사이드바의 높이 */ /* background-color:#e9e9e9; */ float: left; /* 왼쪽으로 플로팅 */ border-right: solid; } #contents { min-width: 700px; width: 50%; height: 100%; /* background-color:#f7f7f7; */ float: left; border-right: solid; } #right-sidebar { width: 25%; /* 사이드바의 너비 */ height:100%; /* 사이드바의 높이 */ float: left; /* background-color:#e9e9e9; */ } #footer { width:100%; /* 부모 요소의 너비와 똑같게 */ height:100px; /* 푸터의 높이 */ background-color:#888888; clear:left; /* 플로팅 해제 */ } #box1 { position: absolute; /* width: 275px; height: 240px; */ width: 18%; height: 26%; background: #F5F5F5; border: 2px solid #C5CAC7; border-radius: 7px; margin-top: 3.5%; margin-left: 3.5%; /* left: 50px; top: 130px; */ } /* #colorpicker { margin-top: 13%; margin-left: 13%; background: #F5F5F5; } */ .menu-dropdown { position: relative; display: inline-block; /* margin-left: 50px; margin-top: 300px; */ } .menu-dropdown-button { padding: 10px; /* background-color: #3498db; */ color: #000000; cursor: pointer; border-radius: 5px; border: 1px solid; width: 200px; text-align: center; background: #ffffff; } .menu-dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0 8px 16px rgba(0,0,0,0.2); z-index: 1; bottom: 100%; /* 드롭다운이 아래쪽에서 위쪽으로 나오도록 수정 */ } .menu-dropdown-content a { padding: 12px 16px; display: block; text-decoration: none; color: #333; } .menu-dropdown-content a:hover { background-color: #ddd; } .fixed-dropdown { position: fixed; bottom: 20px; /* 원하는 위치로 조절 가능 */ left: 20px; /* 원하는 위치로 조절 가능 */ } /* #menu { width: 60%; height: 30px; margin-left: 14.5%; margin-top: 90%; } */ #info { position: fixed; right: 72px; top: 472px; /* margin-left: 13%; margin-bottom: 5%; margin-top: 30%; */ width: 293px; height: 100px; border: 2px solid #C5CAC7; border-radius: 7px; } #colorpicker { background: #F5F5F5; position: fixed; right: 57px; top: 33px; } .colorPicker .extras { float: none; } .colorPicker .extras .colorFields { /* margin-left: 13%; margin-top: 40%; */ right: 179px; top: 310px; position: fixed; } .colorPicker .extras .colorFields input { width: 160px; } .colorPicker .extras .hex { position: fixed; right: 179px; top: 423px } .colorPicker .extras .hex input { width: 160px; } .colorPicker .extras .currentColorContainer { position: fixed; right: 88px; top: 317px; } .colorPicker .extras .currentColor { width: 80px; height: 80px; } .color-info { border: 1px solid #C5CAC7; width: 293px; height: 152px; position: fixed; right: 73px; top: 307px; border-radius: 5px; background: #F5F5F5 } #popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; } .popup-content { background: #fff; padding: 20px; border-radius: 8px; text-align: center; } #nameInput { width: 200px; padding: 10px; margin-bottom: 10px; } #confirmBtn { background-color: #3498db; color: #fff; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; } #info-text { padding: 5px; font-size: 13px; } #loading-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.7); /* 반투명한 흰색 배경 */ } #loading-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 5px solid #f3f3f3; /* 회전하는 원의 색상 */ border-top: 5px solid #3498db; /* 회전하는 원의 색상 */ border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; /* 회전 애니메이션 */ } .image-button { display: inline-block; background: none; border: none; padding: 0; margin: 0; cursor: pointer; position: relative; /* 부모 위치 지정 */ z-index: 1; /* 다른 요소들보다 앞쪽에 위치 */ } #spoid { width: 22px; position: fixed; right: 144px; top: 404px; background: gray; } #beforeColor1 { width: 22px; height: 22px; position: fixed; top: 404px; right: 116px; /* background: white; */ } #beforeColor2 { width:22px; height:22px; position: fixed; top: 404px; right: 87px; /* background: white; */ } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /style> /head> body> div idloading-overlay> div idloading-spinner>/div> /div> div idcontainer> aside idleft-sidebar> div idbox1> div classselect-box1> div classselect-text>Shapes/div> /div> div classselect-bpx1 select-box2> div idinput-range>input typerange value1 min1 max10 classselect-bar idshape-bar>/div> div idinput-box>input typenumber value1 min1 max10 classinput-number idshape-box>/div> /div> div classselect-box1> div classselect-text>Total/div> /div> div classselect-bpx1 select-box2> div idinput-range>input typerange value1 min1 max20 classselect-bar idtotal-bar>/div> div idinput-box>input typenumber value1 min1 max20 classinput-number idtotal-box>/div> /div> div classselect-box1> div classselect-text>Colors/div> /div> div classselect-bpx1 select-box2 styleborder-bottom: none> div idinput-range>input typerange value2 min2 max10 classselect-bar idcolor-bar>/div> div idinput-box>input typenumber value2 min2 max10 classinput-number idcolor-box>/div> /div> /div> div idgenerate> button idgenerate-button typebutton classbtn btn-primary onclickclickGenerate()>Generate/button> !-- button idgenerate-button typebutton onclickclickGenerate()>Generate/button> --> /div> !-- div idre-generate> button idre-generate-button typebutton classbtn btn-outline-dark onclickclickReGenerate()>Re-Generate/button> /div> --> !-- div classdropdown> button onclicktoggleDropdown() classdropbtn>Generate/button> div idmyDropdown classdropdown-content> a hrefmain.html onclickselectItem(Item 1)>Generate/a> a hreflist.html onclickselectItem(Item 2)>List/a> a href# onclickselectItem(Item 3)>About/a> /div> /div> --> !-- select namemenu idmenu> --> !-- select classform-select aria-labelLarge select example> option valueabout>about/option> option valuehow to use>how to use/option> option valuegenerator selected>generator/option> option valuegallery>gallery/option> /select> --> !-- script> // Dropdown 토글 함수 function toggleDropdown() { var dropdown document.getElementById(myDropdown); dropdown.style.display (dropdown.style.display block) ? none : block; } /script> --> div classfixed-dropdown> div classmenu-dropdown idmyDropdown> div classmenu-dropdown-button onclicktoggleDropdown()>generator/div> div classmenu-dropdown-content iddropdownContent> a hrefabout.html>about/a> a hrefhowtouse.html>how to use/a> a hreflist.html>gallery/a> /div> /div> /div> script> function toggleDropdown() { var dropdownContent document.getElementById(dropdownContent); dropdownContent.style.display (dropdownContent.style.display block) ? none : block; } window.onclick function(event) { if (!event.target.matches(.menu-dropdown-button)) { var dropdowns document.getElementsByClassName(menu-dropdown-content); for (var i 0; i dropdowns.length; i++) { var openDropdown dropdownsi; if (openDropdown.style.display block) { openDropdown.style.display none; } } } } /script> /aside> section idcontents> div idsvgContainer> svg idcolorSvg width0 height0 xmlnshttp://www.w3.org/2000/svg xmlns:xlinkhttp://www.w3.org/1999/xlink> defs idsvgDefs> /defs> /svg> svg id mainSvg width600 height600 viewBox0 0 600 600 xmlnshttp://www.w3.org/2000/svg xmlns:xlinkhttp://www.w3.org/1999/xlink> /svg> /div> /section> aside idright-sidebar> div idcolor-container> div classcolor-info> /div> div idcolorpicker>/div> !-- 스포이드 버튼 --> button classimage-button onclickclickSpoid()> img idspoid srcspoid.png alt버튼 이미지> /button> button idbeforeColor1 onclickclickBeforeColor1()>/button> button idbeforeColor2 onclickclickBeforeColor2()>/button> div idinfo> div styleborder-bottom: 2px solid #C5CAC7; padding-left: 4px;> Info /div> div idinfo-text> /div> /div> div idsave> button idsave-button typebutton classbtn btn-primary onclickopenPopup()>Save/button> !-- button idsave-button typebutton onclickclickSave()>Save/button> --> /div> /div> /aside> /div> div idpopup> div classpopup-content> label fornameInput>Name:/label> input typetext idnameInput> br> button idconfirmBtn onclickclickSave()>Save/button> /div> /div> /body>/html>script> console.log(script) var shapeBox document.getElementById(shape-box); var shapeBar document.getElementById(shape-bar); var totalBox document.getElementById(total-box); var totalBar document.getElementById(total-bar); var colorBox document.getElementById(color-box); var colorBar document.getElementById(color-bar); shapeBox.addEventListener(change, (event) > { shapeBar.value event.target.value }) shapeBar.addEventListener(change, (event) > { shapeBox.value event.target.value }) totalBox.addEventListener(change, (event) > { totalBar.value event.target.value }) totalBar.addEventListener(change, (event) > { totalBox.value event.target.value }) colorBox.addEventListener(change, (event) > { colorBar.value event.target.value }) colorBar.addEventListener(change, (event) > { colorBox.value event.target.value }) function openPopup() { document.getElementById(popup).style.display flex; } function closePopup() { document.getElementById(popup).style.display none; }/script>script> var SVGLink_NS http://www.w3.org/1999/xlink; var SVG_NS http://www.w3.org/2000/svg; // var svg document.querySelector(svg); var svg document.getElementById(mainSvg) var deg 180 / Math.PI; var rotating false; var dragging false; var resizing false; var direction ; var currentIndex -1; var background var totalNum 0; var shapeCount 0; var colorCount 0; var finalColors var isBackground false; var isSpoiding false; var beforeColor1 rgb(255,255,255); var beforeColor2 rgb(255,255,255) // color 관련 작업 ---------------------------- var joe; $(document).ready(function () { //const joe colorjoe.rgb(colorpicker, white); joe colorjoe.rgb(colorpicker, red, fields, { space: RGB, limit: 255, fix: 0 }, hex, currentColor ); //change the background color of the main div when color changes joe .on(change, function (c) { // console.log(color, c.css()) if(isBackground){ var svg document.getElementById(mainSvg) var backgroundHex rgbStringToHex(c.css()); background backgroundHex svg.setAttribute(style, `background:${backgroundHex}`) // colorCount 계산 tempColors ...finalColors tempColors.push(hexToRgb(background)) colorCount new Set(tempColors).size var info document.getElementById(info-text) info.innerText `600*600, 72dpi, ${shapeCount} shapes, total ${totalNum} features, ${colorCount} colors` } else if(currentIndex ! -1) { changeColor(c.css(), currentIndex) } //$(#main).css(backgroundColor, c.css()); beforeColor2 beforeColor1; beforeColor1 c.css() var color1 document.getElementById(beforeColor1); var color2 document.getElementById(beforeColor2); color1.setAttribute(style, `background:${beforeColor1}`); color2.setAttribute(style, `background:${beforeColor2}`); }) .update(); }); function clickSpoid() { if(isBackground || currentIndex ! -1) { isSpoiding true; } } function spoid(rgbColor) { joe.set(rgbStringToHex(rgbColor)); } function clickBeforeColor1() { spoid(beforeColor1) if(isBackground){ var svg document.getElementById(mainSvg) var backgroundHex rgbStringToHex(beforeColor1); background backgroundHex svg.setAttribute(style, `background:${backgroundHex}`) // colorCount 계산 tempColors ...finalColors tempColors.push(hexToRgb(background)) colorCount new Set(tempColors).size var info document.getElementById(info-text) info.innerText `600*600, 72dpi, ${shapeCount} shapes, total ${totalNum} features, ${colorCount} colors` } else if(currentIndex ! -1) { changeColor(beforeColor1, currentIndex) } //$(#main).css(backgroundColor, c.css()); } function clickBeforeColor2() { spoid(beforeColor2) } // ----------------------------------- var impact { x: 0, y: 0 }; var m { //mouse x: 0, y: 0 }; delta { x: 0, y: 0 }; var beforePosition { x: 0, y: 0 } var ry ; // elements array // var objectsRy ; // var image1 { // tagName: image, // src: ../sampleImage/1-1.svg, // pos: { // x : 0, // y: 0 // } // } // objectsRy.push(image1); // var image2 { // tagName: image, // src: ../sampleImage/2-1.svg, // pos: { // x : 200, // y: 100 // } // } // objectsRy.push(image2); // var image3 { // tagName: image, // src: ../sampleImage/3-1.svg, // pos: { // x : 130, // y: 250 // } // } // objectsRy.push(image3); async function generator () { var shapes document.getElementById(shape-box); var total document.getElementById(total-box); var colors document.getElementById(color-box); totalNum total.value colorCount colors.value shapeCount shapes.value // 배경 색 랜덤 지정 var backgroundRGB getRandomRGBColor(); var backgroundHex rgbStringToHex(backgroundRGB); background backgroundHex svg.setAttribute(style, `background:${backgroundHex}`) var shapeArr ; var colorArr ; var totalShapeArr ; var totalColorArr ry new Array(total.value) for(var i0;itotal.value;i++) { // 1. shape 선택 // 만약 shape 배열이 shape개수보다 적으면 새로운 shape선택 // 아니면 shape 배열에서 하나 선택 var shapeNum 1; var color rgb(0,0,0); if (shapeArr.length shapes.value) { shapeNum getRandomNumberExcluding(1,45,shapeArr); // 뒤에 숫자는 전체 이미지의 개수 shapeArr.push(shapeNum); }else { var index getRandomNumberExcluding(0,shapeArr.length-1,); shapeNum shapeArrindex; } // 2. color 선택 if (colorArr.length colors.value-1) { color getRandomRGBColor(colorArr); colorArr.push(color); } else { var index getRandomNumberExcluding(0, colorArr.length-1,); color colorArrindex; } totalColorArr.push(color) totalShapeArr.push(shapeNum) } finalColors totalColorArr; function temp(totalColorArr, totalShapeArr, ry) { fetch(https://4edvpyy35k.execute-api.ap-northeast-2.amazonaws.com/default/walkinimages, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ action: shape, shapes: totalShapeArr}), // mode: no-cors }) .then(response > response.json()) .then(data > { for(var i0;idata.urls.length;i++) { (function(index) { fetch(data.urlsindex) .then(response > response.blob()) .then(async blob > { // Blob을 사용할 수 있습니다. const x await getRandomNumber(0, 500); const y await getRandomNumber(0, 500); // const x 100 + 10*index; // const y 100 + 10*index; var reader new FileReader(); reader.onload function() { var image { tagName: image, src: reader.result, pos: { x: x, y: y } } // console.log(totalColor, totalColorArr) // console.log(i, index) // console.log(color, totalColorArrindex) var el new Element(image, index+1, totalColorArrindex); ryindex el; } reader.readAsDataURL(blob) }) .catch(error > { console.error(Error fetching image:, error); }); }(i)) } }) .catch(error > { console.error(Error fetching image: , error) }) } await temp(totalColorArr, totalShapeArr, ry) var info document.getElementById(info-text) info.innerText `600*600, 72dpi, ${shapeCount} shapes, total ${totalNum} features, ${colorCount} colors` } // async function generator () { // var shapes document.getElementById(shape-box); // var total document.getElementById(total-box); // var colors document.getElementById(color-box); // totalNum total.value // colorCount colors.value // shapeCount shapes.value // console.log(shapeNum, shapeNum) // // 배경 색 랜덤 지정 // var backgroundRGB getRandomRGBColor(); // var backgroundHex rgbStringToHex(backgroundRGB); // background backgroundHex // svg.setAttribute(style, `background:${backgroundHex}`) // var shapeArr ; // var colorArr ; // ry new Array(total.value) // for(var i0;itotal.value;i++) { // // 1. shape 선택 // // 만약 shape 배열이 shape개수보다 적으면 새로운 shape선택 // // 아니면 shape 배열에서 하나 선택 // var shapeNum 1; // var color rgb(0, 0, 0); // if (shapeArr.length shapes.value) { // shapeNum getRandomNumberExcluding(1,6,shapeArr); // 뒤에 숫자는 전체 이미지의 개수 // shapeArr.push(shapeNum); // }else { // var index getRandomNumberExcluding(0,shapeArr.length-1,); // shapeNum shapeArrindex; // } // console.log(shapeNum, shapeNum) // console.log(shapeArr, shapeArr) // // 2. color 선택 // if (colorArr.length colors.value) { // color getRandomRGBColor(colorArr); // colorArr.push(color); // } else { // var index getRandomNumberExcluding(0, colorArr.length-1,); // color colorArrindex; // } // // async function temp(i, color, shapeNum, ry) { // // console.log(shapeNum-------, shapeNum) // // fetch(https://4edvpyy35k.execute-api.ap-northeast-2.amazonaws.com/default/walkinimages, { // // method: POST, // // headers: { // // Content-Type: application/json, // // }, // // body: JSON.stringify({ action: shape, shapeNum: shapeNum}), // // // mode: no-cors // // }) // // .then(response > response.json()) // // .then(data > { // // const imageUrl data.url; // // var image { // // tagName: image, // // src: imageUrl, // // pos: { // // x : 100 + 10*i, // // y: 100 + 10*i // // } // // } // // var el new Element(image, i+1, color); // // //el.update(); // // ryi el; // // // var imageObj new Image(); // // // imageObj.onload function() { // // // var image { // // // tagName: image, // // // src: imageObj.src, // // // pos: { // // // x : 100 + 10*i, // // // y: 100 + 10*i // // // } // // // } // // // // console.log(i,i) // // // // console.log(color1, color) // // // var el new Element(image, i+1, color); // // // //el.update(); // // // ryi el; // // // // ry.push(el); // // // } // // // imageObj.url data.url // // // const imageElement new Image(); // // // imageElement.src imageUrl; // // // imageElement.onload function() { // // // var image { // // // tagName: image, // // // src: imageUrl, // // // pos: { // // // x : 100 + 10*i, // // // y: 100 + 10*i // // // } // // // } // // // var el new Element(image, i+1, color); // // // //el.update(); // // // ryi el; // // // } // // }) // // .catch(error > { // // console.error(Error fetching image: , error) // // }) // // } // function temp(i, color, shapeNum, ry) { // fetch(https://4edvpyy35k.execute-api.ap-northeast-2.amazonaws.com/default/walkinimages, { // method: POST, // headers: { // Content-Type: application/json, // }, // body: JSON.stringify({ action: shape, shapeNum: shapeNum}), // // mode: no-cors // }) // .then(response > response.json()) // .then(data > { // fetch(data.url) // .then(response > response.blob()) // .then(blob > { // // Blob을 사용할 수 있습니다. // console.log(blob); // var reader new FileReader(); // reader.onload function() { // var image { // tagName: image, // src: reader.result, // pos: { // x : 100 + 10*i, // y: 100 + 10*i // } // } // // console.log(i,i) // // console.log(color1, color) // var el new Element(image, i+1, color); // //el.update(); // ryi el; // // ry.push(el); // } // reader.readAsDataURL(blob) // }) // .catch(error > { // console.error(Error fetching image:, error); // }); // }) // // fetch(`http://localhost:3000/api/shape?num${shapeNum}`) // // // .then(response > (console.log(response))) // // .then(response > response.blob()) // // .then(blob > { // // var reader new FileReader(); // // reader.onload function() { // // var image { // // tagName: image, // // src: reader.result, // // pos: { // // x : 100 + 10*i, // // y: 100 + 10*i // // } // // } // // // console.log(i,i) // // // console.log(color1, color) // // var el new Element(image, i+1, color); // // //el.update(); // // ryi el; // // // ry.push(el); // // } // // reader.readAsDataURL(blob) // // }) // .catch(error > { // console.error(Error fetching image: , error) // }) // } // // function temp(i, color, shapeNum, ry) { // // fetch(`http://localhost:3000/api/shape?num${shapeNum}`) // // // .then(response > (console.log(response))) // // .then(response > response.blob()) // // .then(blob > { // // var reader new FileReader(); // // reader.onload function() { // // var image { // // tagName: image, // // src: reader.result, // // pos: { // // x : 100 + 10*i, // // y: 100 + 10*i // // } // // } // // // console.log(i,i) // // // console.log(color1, color) // // var el new Element(image, i+1, color); // // //el.update(); // // ryi el; // // // ry.push(el); // // } // // reader.readAsDataURL(blob) // // }) // // .catch(error > { // // console.error(Error fetching image: , error) // // }) // // } // await temp(i, color, shapeNum, ry) // } // var info document.getElementById(info-text) // info.innerText `600*600, 72dpi, ${shapeCount} shapes, total ${totalNum} features, ${colorCount} colors` // console.log(shape, shapes.value) // console.log(total, total.value) // console.log(colors, colors.value) // // for (var i 0; i objectsRy.length; i++) { // // var el new Element(objectsRyi, i + 1, rgb(0, 0, 0)); // // el.update(); // // ry.push(el) // // } // } async function clickGenerate() { if (svg) { while (svg.firstChild) { svg.removeChild(svg.firstChild); } } svg.setAttribute(style, `background:#ffffff`) ry ; currentIndex -1; // 다시 생성 await generator(); } function getImage() { fetch(http://localhost:3000/api/image) // .then(response > (console.log(response))) .then(response > response.blob()) .then(blob > { var reader new FileReader(); reader.onload function() { return reader.result; } reader.readAsDataURL(blob) }) .catch(error > { console.error(Error fetching image: , error) }) } function showLoadingOverlay() { const loadingOverlay document.getElementById(loading-overlay); loadingOverlay.style.display block; } function hideLoadingOverlay() { const loadingOverlay document.getElementById(loading-overlay); loadingOverlay.style.display none; } // SVG를 PNG로 변환하는 함수 async function svgToPng(svgString) { // SVG 문자열을 Blob으로 변환 const svgBlob new Blob(svgString, { type: image/svg+xml }); // Blob을 Data URL로 변환 const svgUrl URL.createObjectURL(svgBlob); // SVG 이미지를 Canvas에 렌더링 const canvas document.createElement(canvas); const ctx canvas.getContext(2d); const img new Image(); return new Promise((resolve, reject) > { img.onload () > { canvas.width img.width; canvas.height img.height; ctx.drawImage(img, 0, 0); // Canvas에 그려진 이미지를 Blob으로 변환하여 반환 canvas.toBlob(resolve, image/png); }; img.onerror reject; img.src svgUrl; }); } async function clickSave() { closePopup() showLoadingOverlay() // 설정 상자 없애기 if(currentIndex ! -1) { rycurrentIndex.box.removeAttributeNS(null, stroke); rycurrentIndex.box.removeAttributeNS(null, stroke-dasharray); rycurrentIndex.rp.setAttributeNS(null, fill, none); rycurrentIndex.rp.removeAttributeNS(null, cursor); rycurrentIndex.lt.setAttributeNS(null, fill, none) rycurrentIndex.lt.removeAttributeNS(null, cursor) rycurrentIndex.rt.setAttributeNS(null, fill, none) rycurrentIndex.rt.removeAttributeNS(null, cursor) rycurrentIndex.lb.setAttributeNS(null, fill, none) rycurrentIndex.lb.removeAttributeNS(null, cursor) rycurrentIndex.rb.setAttributeNS(null, fill, none) rycurrentIndex.rb.removeAttributeNS(null, cursor) } const fileName document.getElementById(nameInput).value const fileFullName getFormattedDate() + _ + shapeCount + _ + colorCount + _ + totalNum + _ + fileName const color rgbStringToHex(document.getElementById(mainSvg).style.background) // const svgString document.getElementById(svgContainer) const svgString `rect x0 y0 width1800 height1800 stylefill:${color};>/rect>`+document.getElementById(svgContainer).innerHTML // 파일 이름 중복 체크 try { const response await fetch(https://4edvpyy35k.execute-api.ap-northeast-2.amazonaws.com/default/walkinimages, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ action: image}), // mode: no-cors }) const images await response.json(); ; dataList images.imageUrls; var newList for (var iimages.imageUrls.length-1;i>0;i--) { var image images.imageUrlsi var imageArr image.split(_) var imageName imageArr5.split(.)0 if (fileName imageName) { alert(This name already exists.) hideLoadingOverlay() return } } } catch (error) { console.error(Failed to fetch images:, error); } /// const encodedSvgString encodeURIComponent(svgString); try { const response await fetch(https://4edvpyy35k.execute-api.ap-northeast-2.amazonaws.com/default/walkinimages, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ action: image-save, svgString, fileName: fileFullName}), // mode: no-cors }); if (!response.ok) { throw new Error(`API 호출에 실패했습니다. 상태 코드: ${response.error}`); } // const blob response.blob() // const a document.createElement(a); // const url URL.createObjectURL(blob); // a.href url; // a.download `${fileName}.svg`; // 파일 이름 지정 // document.body.appendChild(a); // a.click(); // document.body.removeChild(a); // URL.revokeObjectURL(url); const imageUrlData await response.json(); const imageUrl imageUrlData.url; // 이미지 URL로부터 이미지를 받아옴 const imageResponse await fetch(imageUrl); const imageBlob await imageResponse.blob(); // const svgText await imageBlob.text() const pngBlob await svgToPng(svgText) // 이미지 다운로드를 위한 가상 링크 생성 const a document.createElement(a); a.href URL.createObjectURL(pngBlob); a.download `${fileName}.png`; // 다운로드될 파일 이름 // 가상 링크를 클릭하여 이미지 다운로드 실행 a.click(); // 이미지 데이터를 Blob으로 읽어오기 // const imageBlob await response.blob(); // // Blob을 이미지로 표시하거나 다운로드할 수 있습니다. // const imageUrl URL.createObjectURL(imageBlob); // const imageElement new Image(); // imageElement.src imageUrl; // // 이미지를 페이지에 추가 (예시로 body에 추가) // // document.body.appendChild(imageElement); // // 필요에 따라 이미지를 다운로드하려면 다음 코드를 사용할 수 있습니다. // const a document.createElement(a); // a.href imageUrl; // a.download `${fileName}.png`; // a.click(); hideLoadingOverlay() } catch (error) { console.error(에러:, error); } // const fileName document.getElementById(nameInput).value // const fileFullName getFormattedDate() + _ + shapeCount + _ + colorCount + _ + totalNum + _ + fileName // const color rgbStringToHex(document.getElementById(mainSvg).style.background) // console.log(color, color) // const svgString `rect x0 y0 width600 height600 stylefill:${color};>/rect>`+document.getElementById(svgContainer).innerHTML // const encodedSvgString encodeURIComponent(svgString); // try { // const response await fetch(http://localhost:3000/convert, { // method: POST, // headers: { // Content-Type: application/json, // }, // body: JSON.stringify({ svgString, fileName: fileFullName}), // }); // if (!response.ok) { // throw new Error(`API 호출에 실패했습니다. 상태 코드: ${response.status}`); // } // // 이미지 데이터를 Blob으로 읽어오기 // const imageBlob await response.blob(); // // Blob을 이미지로 표시하거나 다운로드할 수 있습니다. // const imageUrl URL.createObjectURL(imageBlob); // const imageElement new Image(); // imageElement.src imageUrl; // // 이미지를 페이지에 추가 (예시로 body에 추가) // // document.body.appendChild(imageElement); // // 필요에 따라 이미지를 다운로드하려면 다음 코드를 사용할 수 있습니다. // const a document.createElement(a); // a.href imageUrl; // a.download `${fileName}.png`; // a.click(); // closePopup() // } catch (error) { // console.error(에러:, error); // } } function captureImageWithFilter(imageElement, filterId) { // Apply the filter to the image element imageElement.setAttribute(filter, filterId); // Use dom-to-image to capture the image with the applied filter return domtoimage.toPng(imageElement) .then(function(image) { // Reset the filter after capturing the image imageElement.removeAttribute(filter); return image; }); } function applyFilter(element, filterId) { // Apply the filter to the element element.setAttribute(filter, filterId); } function downloadImage(dataUrl, fileName) { var a document.createElement(a); a.href dataUrl; a.download fileName; document.body.appendChild(a); a.click(); document.body.removeChild(a); } function rgbToColorMatrixValues(rgbColor) { // const r parseInt(rgbColor.substring(4, rgbColor.indexOf(,))); // const g parseInt(rgbColor.substring(rgbColor.indexOf(,) + 2, rgbColor.lastIndexOf(,))); // const b parseInt(rgbColor.substring(rgbColor.lastIndexOf(,) + 2, rgbColor.length - 1)); var regex /rgb\((\d+),\s*(\d+),\s*(\d+)\)/; var match rgbColor.match(regex); if(match) { const r parseInt(match1); const g parseInt(match2); const b parseInt(match3); const scale 255; const offset 0; const rValue r / scale; const gValue g / scale; const bValue b / scale; return rValue, 0, 0, 0, -0.07, 0, gValue, 0, 0, -0.07, 0, 0, bValue, 0, -0.07, 0, 0, 0, 1, 0 ; } } function Element(o, index, rgbColor) { this.g document.createElementNS(SVG_NS, g); // g: 태그 이름. 그룹 this.g.setAttributeNS(null, id, index); svg.appendChild(this.g); o.parent this.g; drawElement(o, (el) > { this.el el; this.a 0; this.tagName o.tagName; this.elRect this.el.getBoundingClientRect(); this.svgRect svg.getBoundingClientRect(); this.Left this.elRect.left - this.svgRect.left; this.Right this.elRect.right - this.svgRect.left; this.Top this.elRect.top - this.svgRect.top; this.Bottom this.elRect.bottom - this.svgRect.top; const filterId `colorFilter-${index}`; var svgDefs document.getElementById(svgDefs) // 이미 같은 필터가 존재하면 삭제 var existingFilter document.getElementById(filterId); if (existingFilter) { existingFilter.remove(); } // var rgbColor rgb(0, 0, 0) this.el.setAttributeNS(null, filter, `url(#colorFilter-${index})`); var colorMatrixValues rgbToColorMatrixValues(rgbColor); var colorMatrixString colorMatrixValues.join( ); // 필터 생성 filter document.createElementNS(http://www.w3.org/2000/svg, filter); filter.id filterId; filter.setAttribute(color-interpolation-filters, sRGB) svgDefs.appendChild(filter); // 필터 내부에 행렬 변환 효과 추가 feColorMatrix document.createElementNS(http://www.w3.org/2000/svg, feColorMatrix); feColorMatrix.setAttribute(type, matrix); feColorMatrix.setAttribute(values, colorMatrixString); filter.appendChild(feColorMatrix); this.LT { x: this.Left, y: this.Top }; this.RT { x: this.Right, y: this.Top }; this.LB { x: this.Left, y: this.Bottom }; this.RB { x: this.Right, y: this.Bottom }; this.c { x: (this.elRect.width / 2) + this.Left, y: (this.elRect.height / 2) + this.Top }; this.o { x: o.pos.x, y: o.pos.y }; this.A Math.atan2(this.elRect.height / 2, this.elRect.width / 2); this.pointsValue function() { // points for the box return (this.Left + , + this.Top + + this.Right + , + this.Top + + this.Right + , + this.Bottom + + this.Left + , + this.Bottom + + this.Left + , + this.Top); } var box { properties: { points: this.pointsValue(), fill: none, // stroke: dodgerblue, // stroke-dasharray: 5,5 }, parent: this.g, tagName: polyline } //box.parent this.g; // drawElement(box, (boxel) > { // this.box boxel; // }) //this.box drawElement(box); var rotatePos { properties: { x: this.LT.x - 20, y: this.LT.y - 20, width: 10, height: 10, fill: none // fill: blue, // cursor: alias }, parent: this.g, tagName: rect } // drawElement(rotatePos, (rp) > { // this.rp rp; // }) //this.rp drawElement(rotatePos); var leftTop { properties: { cx: this.LT.x, cy: this.LT.y, r: 6, fill: none, // fill: blue, // cursor: nwse-resize, direction: lt }, parent: this.g, tagName: circle, } var rightTop { properties: { cx: this.RT.x, cy: this.RT.y, r: 6, fill: none, // fill: blue, // cursor: nesw-resize, direction: rt }, parent: this.g, tagName: circle, } var leftBottom { properties: { cx: this.LB.x, cy: this.LB.y, r: 6, fill: none, // fill: blue, // cursor: nesw-resize, direction: lb }, parent: this.g, tagName: circle, } var rightBottom { properties: { cx: this.RB.x, cy: this.RB.y, r: 6, fill: none, // fill: blue, // cursor: nwse-resize, direction: rb }, parent: this.g, tagName: circle, } // this.lt drawElement(leftTop); // this.rt drawElement(rightTop) // this.lb drawElement(leftBottom) // this.rb drawElement(rightBottom) var promises drawElementAsync(box), drawElementAsync(rotatePos), drawElementAsync(leftTop), drawElementAsync(rightTop), drawElementAsync(leftBottom), drawElementAsync(rightBottom) // drawElement(leftTop, (lt) > { // this.lt lt; // }) // drawElement(rightTop, (rt) > { // this.rt rt; // }) // drawElement(leftBottom, (lb) > { // this.lb lb; // }) // drawElement(rightBottom, (rb) > { // this.rb rb; // }) Promise.all(promises) .then((elements) > { //console.log(elements, elements) this.box elements0 this.rp elements1 this.lt elements2 this.rt elements3 this.lb elements4 this.rb elements5 this.addWidth 0; this.totalAddWidth 0; // 크기보다 작아지는 경우 예외처리 필요. this.update() }) .catch((error) > { console.error(error); }) }) this.update function() { //console.log(height!!, this.elRect) var addHeight (this.elRect.height/this.elRect.width)*this.addWidth; var transf translate( + this.o.x + , + this.o.y + ) + rotate( + (this.a * deg) + ); // console.log(el, this.el); // console.log(box, this.box); // console.log(rt, this.rt) this.el.setAttributeNS(null, width, this.elRect.width + this.addWidth); this.el.setAttributeNS(null, height, this.elRect.height + addHeight); this.box.setAttributeNS(null, points, this.Left + , + this.Top + + parseInt(this.Right + this.addWidth) + , + this.Top + + parseInt(this.Right + this.addWidth) + , + parseInt(this.Bottom + addHeight) + + this.Left + , + parseInt(this.Bottom + addHeight) + + this.Left + , + this.Top) this.rt.setAttributeNS(null, cx, this.RT.x + this.addWidth); this.lb.setAttributeNS(null, cy, this.LB.y + addHeight); this.rb.setAttributeNS(null, cx, this.RB.x + this.addWidth); this.rb.setAttributeNS(null, cy, this.RB.y + addHeight); cx parseInt(this.elRect.width + this.addWidth)/2; cy parseInt(this.elRect.height + addHeight)/2; this.el.setAttributeNS(null, transform-origin, cx + + cy); this.box.setAttributeNS(null, transform-origin, cx + + cy); this.rp.setAttributeNS(null, transform-origin, cx + + cy); this.lt.setAttributeNS(null, transform-origin, cx + + cy); this.rt.setAttributeNS(null, transform-origin, cx + + cy); this.lb.setAttributeNS(null, transform-origin, cx + + cy); this.rb.setAttributeNS(null, transform-origin, cx + + cy); // this.el.setAttributeNS(null, transform-origin, this.c.x + + this.c.y); // this.box.setAttributeNS(null, transform-origin, this.c.x + + this.c.y); // this.rp.setAttributeNS(null, transform-origin, this.c.x + + this.c.y); // this.lt.setAttributeNS(null, transform-origin, this.c.x + + this.c.y); // this.rt.setAttributeNS(null, transform-origin, this.c.x + + this.c.y); // this.lb.setAttributeNS(null, transform-origin, this.c.x + + this.c.y); // this.rb.setAttributeNS(null, transform-origin, this.c.x + + this.c.y); this.el.setAttributeNS(null, transform, transf); this.box.setAttributeNS(null, transform, transf); this.rp.setAttributeNS(null, transform, transf); this.lt.setAttributeNS(null, transform, transf); this.rt.setAttributeNS(null, transform, transf); this.lb.setAttributeNS(null, transform, transf); this.rb.setAttributeNS(null, transform, transf); // this.el.setAttributeNS(null, width, 304) } } function _Element(o, index, rgbColor) { this.g document.createElementNS(SVG_NS, g); // g: 태그 이름. 그룹 this.g.setAttributeNS(null, id, index); svg.appendChild(this.g); o.parent this.g; this.el null; drawElement(o, function (el) { this.el el; }) //this.el drawElement(o); this.a 0; this.tagName o.tagName; this.elRect this.el.getBoundingClientRect(); this.svgRect svg.getBoundingClientRect(); this.Left this.elRect.left - this.svgRect.left; this.Right this.elRect.right - this.svgRect.left; this.Top this.elRect.top - this.svgRect.top; this.Bottom this.elRect.bottom - this.svgRect.top; // const filterId `colorFilter-${index}`; // var svgDefs document.getElementById(svgDefs) // // 이미 같은 필터가 존재하면 삭제 // var existingFilter document.getElementById(filterId); // if (existingFilter) { // existingFilter.remove(); // } // // 필터 생성 // var filter document.createElementNS(http://www.w3.org/2000/svg, filter); // filter.id filterId; // svgDefs.appendChild(filter); // // 필터 내부에 행렬 변환 효과 추가 // var feColorMatrix document.createElementNS(http://www.w3.org/2000/svg, feColorMatrix); // feColorMatrix.setAttribute(type, matrix); // feColorMatrix.setAttribute(values, 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0); // filter.appendChild(feColorMatrix); const filterId `colorFilter-${index}`; var svgDefs document.getElementById(svgDefs) // 이미 같은 필터가 존재하면 삭제 var existingFilter document.getElementById(filterId); if (existingFilter) { existingFilter.remove(); } // var rgbColor rgb(0, 0, 0) this.el.setAttributeNS(null, filter, `url(#colorFilter-${index})`); var colorMatrixValues rgbToColorMatrixValues(rgbColor); var colorMatrixString colorMatrixValues.join( ); // 필터 생성 filter document.createElementNS(http://www.w3.org/2000/svg, filter); filter.id filterId; svgDefs.appendChild(filter); // 필터 내부에 행렬 변환 효과 추가 feColorMatrix document.createElementNS(http://www.w3.org/2000/svg, feColorMatrix); feColorMatrix.setAttribute(type, matrix); feColorMatrix.setAttribute(values, colorMatrixString); filter.appendChild(feColorMatrix); this.LT { x: this.Left, y: this.Top }; this.RT { x: this.Right, y: this.Top }; this.LB { x: this.Left, y: this.Bottom }; this.RB { x: this.Right, y: this.Bottom }; this.c { x: (this.elRect.width / 2) + this.Left, y: (this.elRect.height / 2) + this.Top }; this.o { x: o.pos.x, y: o.pos.y }; this.A Math.atan2(this.elRect.height / 2, this.elRect.width / 2); this.pointsValue function() { // points for the box return (this.Left + , + this.Top + + this.Right + , + this.Top + + this.Right + , + this.Bottom + + this.Left + , + this.Bottom + + this.Left + , + this.Top); } var box { properties: { points: this.pointsValue(), fill: none, // stroke: dodgerblue, // stroke-dasharray: 5,5 }, parent: this.g, tagName: polyline } drawElement(box, function(boxel) { this.box boxel; }) //this.box drawElement(box); var rotatePos { properties: { x: this.LT.x - 20, y: this.LT.y - 20, width: 10, height: 10, fill: none // fill: blue, // cursor: alias }, parent: this.g, tagName: rect } drawElement(rotatePos, function(rp) { this.rp rp; }) //this.rp drawElement(rotatePos); var leftTop { properties: { cx: this.LT.x, cy: this.LT.y, r: 6, fill: none, // fill: blue, // cursor: nwse-resize, direction: lt }, parent: this.g, tagName: circle, } var rightTop { properties: { cx: this.RT.x, cy: this.RT.y, r: 6, fill: none, // fill: blue, // cursor: nesw-resize, direction: rt }, parent: this.g, tagName: circle, } var leftBottom { properties: { cx: this.LB.x, cy: this.LB.y, r: 6, fill: none, // fill: blue, // cursor: nesw-resize, direction: lb }, parent: this.g, tagName: circle, } var rightBottom { properties: { cx: this.RB.x, cy: this.RB.y, r: 6, fill: none, // fill: blue, // cursor: nwse-resize, direction: rb }, parent: this.g, tagName: circle, } // this.lt drawElement(leftTop); // this.rt drawElement(rightTop) // this.lb drawElement(leftBottom) // this.rb drawElement(rightBottom) drawElement(leftTop, function(lt) { this.lt lt; }) drawElement(rightTop, function(rt) { this.rt rt; }) drawElement(leftBottom, function(lb) { this.lb lb; }) drawElement(rightBottom, function(rb) { this.rb rb; }) this.addWidth 0; this.totalAddWidth 0; // 크기보다 작아지는 경우 예외처리 필요. this.update function() { var addHeight (this.elRect.height/this.elRect.width)*this.addWidth; var transf translate( + this.o.x + , + this.o.y + ) + rotate( + (this.a * deg) + ); this.el.setAttributeNS(null, width, this.elRect.width + this.addWidth); this.el.setAttributeNS(null, height, this.elRect.height + addHeight); this.box.setAttributeNS(null, points, this.Left + , + this.Top + + parseInt(this.Right + this.addWidth) + , + this.Top + + parseInt(this.Right + this.addWidth) + , + parseInt(this.Bottom + addHeight) + + this.Left + , + parseInt(this.Bottom + addHeight) + + this.Left + , + this.Top) this.rt.setAttributeNS(null, cx, this.RT.x + this.addWidth); this.lb.setAttributeNS(null, cy, this.LB.y + addHeight); this.rb.setAttributeNS(null, cx, this.RB.x + this.addWidth); this.rb.setAttributeNS(null, cy, this.RB.y + addHeight); cx parseInt(this.elRect.width + this.addWidth)/2; cy parseInt(this.elRect.height + addHeight)/2; this.el.setAttributeNS(null, transform-origin, cx + + cy); this.box.setAttributeNS(null, transform-origin, cx + + cy); this.rp.setAttributeNS(null, transform-origin, cx + + cy); this.lt.setAttributeNS(null, transform-origin, cx + + cy); this.rt.setAttributeNS(null, transform-origin, cx + + cy); this.lb.setAttributeNS(null, transform-origin, cx + + cy); this.rb.setAttributeNS(null, transform-origin, cx + + cy); // this.el.setAttributeNS(null, transform-origin, this.c.x + + this.c.y); // this.box.setAttributeNS(null, transform-origin, this.c.x + + this.c.y); // this.rp.setAttributeNS(null, transform-origin, this.c.x + + this.c.y); // this.lt.setAttributeNS(null, transform-origin, this.c.x + + this.c.y); // this.rt.setAttributeNS(null, transform-origin, this.c.x + + this.c.y); // this.lb.setAttributeNS(null, transform-origin, this.c.x + + this.c.y); // this.rb.setAttributeNS(null, transform-origin, this.c.x + + this.c.y); this.el.setAttributeNS(null, transform, transf); this.box.setAttributeNS(null, transform, transf); this.rp.setAttributeNS(null, transform, transf); this.lt.setAttributeNS(null, transform, transf); this.rt.setAttributeNS(null, transform, transf); this.lb.setAttributeNS(null, transform, transf); this.rb.setAttributeNS(null, transform, transf); // this.el.setAttributeNS(null, width, 304) } } // for (var i 0; i objectsRy.length; i++) { // var el new Element(objectsRyi, i + 1); // el.update(); // ry.push(el) // } svg.addEventListener(mousedown, (evt) > { // 컬러 스포이드 if(isSpoiding) { if(evt.target.parentElement.id) { if(evt.target.parentElement.id svgContainer) { spoid(hexToRgb(background)) }else{ var index parseInt(evt.target.parentElement.id) - 1; spoid(finalColorsindex); } } isSpoiding false; return } // console.log(ry, ry) if (!evt.target.parentElement.id || evt.target.parentElement.id svgContainer) { // 도형 이외의 공간을 클릭한 경우 isBackground true; if(currentIndex ! -1) { rycurrentIndex.box.removeAttributeNS(null, stroke); rycurrentIndex.box.removeAttributeNS(null, stroke-dasharray); rycurrentIndex.rp.setAttributeNS(null, fill, none); rycurrentIndex.rp.removeAttributeNS(null, cursor); rycurrentIndex.lt.setAttributeNS(null, fill, none) rycurrentIndex.lt.removeAttributeNS(null, cursor) rycurrentIndex.rt.setAttributeNS(null, fill, none) rycurrentIndex.rt.removeAttributeNS(null, cursor) rycurrentIndex.lb.setAttributeNS(null, fill, none) rycurrentIndex.lb.removeAttributeNS(null, cursor) rycurrentIndex.rb.setAttributeNS(null, fill, none) rycurrentIndex.rb.removeAttributeNS(null, cursor) } return; }; isBackground false; var index parseInt(evt.target.parentElement.id) - 1; if (currentIndex ! -1 && index ! currentIndex) { rycurrentIndex.box.removeAttributeNS(null, stroke); rycurrentIndex.box.removeAttributeNS(null, stroke-dasharray); rycurrentIndex.rp.setAttributeNS(null, fill, none); rycurrentIndex.rp.removeAttributeNS(null, cursor); rycurrentIndex.lt.setAttributeNS(null, fill, none) rycurrentIndex.lt.removeAttributeNS(null, cursor) rycurrentIndex.rt.setAttributeNS(null, fill, none) rycurrentIndex.rt.removeAttributeNS(null, cursor) rycurrentIndex.lb.setAttributeNS(null, fill, none) rycurrentIndex.lb.removeAttributeNS(null, cursor) rycurrentIndex.rb.setAttributeNS(null, fill, none) rycurrentIndex.rb.removeAttributeNS(null, cursor) } currentIndex index; ryindex.box.setAttributeNS(null, stroke,dodgerblue); ryindex.box.setAttributeNS(null, stroke-dasharray, 5,5); ryindex.rp.setAttributeNS(null, fill, blue); ryindex.rp.setAttributeNS(null, cursor, alias); ryindex.lt.setAttributeNS(null, fill, blue) ryindex.lt.setAttributeNS(null, cursor, nwse-resize) ryindex.rt.setAttributeNS(null, fill, blue) ryindex.rt.setAttributeNS(null, cursor, nesw-resize) ryindex.lb.setAttributeNS(null, fill, blue) ryindex.lb.setAttributeNS(null, cursor, nesw-resize) ryindex.rb.setAttributeNS(null, fill, blue) ryindex.rb.setAttributeNS(null, cursor, nwse-resize) svg.removeChild(ryindex.g); svg.appendChild(ryindex.g); if (evt.target.tagName ryindex.tagName) { dragging index + 1; impact oMousePos(svg, evt); delta.x ryindex.o.x - impact.x; delta.y ryindex.o.y - impact.y; } if (evt.target.tagName rect) { rotating parseInt(evt.target.parentElement.id); // evt.target.parentElement.querySelector(circle).setAttributeNS(null, fill, red) // console.log(evt.target.parentElement.querySelector(circle).setAttributeNS(null, fill, none)) //evt.target.parentElement.lt.setAttributeNS(null, fill, none) } if (evt.target.tagName circle) { resizing parseInt(evt.target.parentElement.id); impact oMousePos(svg, evt); beforePosition oMousePos(svg, evt); // totalAddWidth ryindex.addWidth; direction evt.target.getAttribute(direction); } }, false); svg.addEventListener(mouseup, (evt) > { if(resizing) { var index resizing - 1; ryindex.totalAddWidth ryindex.addWidth; } rotating false; dragging false; resizing false; }, false); svg.addEventListener(mousemove, (evt) > { m oMousePos(svg, evt); if (dragging) { var index dragging - 1; ryindex.o.x m.x + delta.x; ryindex.o.y m.y + delta.y; ryindex.update(); } if (rotating) { var index rotating - 1; ryindex.a Math.atan2(ryindex.o.y + ryindex.elRect.height/2 - m.y, ryindex.o.x + ryindex.elRect.width/2 - m.x) - ryindex.A; ryindex.update(); } if (resizing) { var index resizing - 1 var addWidth m.x - impact.x; if (direction rb) { ryindex.addWidth addWidth + ryindex.totalAddWidth; }else if(direction rt) { ryindex.addWidth addWidth + ryindex.totalAddWidth; ryindex.o.y ryindex.o.y - (m.x - beforePosition.x)*ryindex.elRect.height/ryindex.elRect.width }else if(direction lb) { ryindex.addWidth -1 * addWidth + ryindex.totalAddWidth; ryindex.o.x ryindex.o.x + m.x - beforePosition.x; }else if(direction lt) { ryindex.addWidth -1 * addWidth + ryindex.totalAddWidth; ryindex.o.x ryindex.o.x + m.x - beforePosition.x; ryindex.o.y ryindex.o.y - (beforePosition.x - m.x)*ryindex.elRect.height/ryindex.elRect.width } beforePosition m; ryindex.update() } }, false); function oMousePos(svg, evt) { var ClientRect svg.getBoundingClientRect(); return { x: Math.round(evt.clientX - ClientRect.left), y: Math.round(evt.clientY - ClientRect.top) } } function drawElementAsync(o) { return new Promise((resolve) > { drawElement(o, (el) > { resolve(el); }) }) } function drawElement(o, callback) { var el document.createElementNS(SVG_NS, o.tagName); if (o.tagName image) { var image new Image(); image.onload function () { el.setAttributeNS(SVGLink_NS, href, o.src); for (var name in o.properties) { if (o.properties.hasOwnProperty(name)) { el.setAttributeNS(null, name, o.propertiesname); } } o.parent.appendChild(el); if (callback) { callback(el); } } image.src o.src; } else { for (var name in o.properties) { if (o.properties.hasOwnProperty(name)) { el.setAttributeNS(null, name, o.propertiesname); } } requestAnimationFrame(function () { o.parent.appendChild(el); if (callback) { callback(el) } }) } return el; } // function drawElement(o) { // var el document.createElementNS(SVG_NS, o.tagName); // if (o.tagName image) { // el.setAttributeNS(SVGLink_NS, href, o.src); // } // for (var name in o.properties) { // if (o.properties.hasOwnProperty(name)) { // el.setAttributeNS(null, name, o.propertiesname); // } // } // o.parent.appendChild(el); // return el; // } function getRandomNumber(min, max) { let randomNumber Math.floor(Math.random() * (max - min) + min); return randomNumber; } function getRandomNumberExcluding(min, max, excludeArray) { let randomNumber; do { randomNumber Math.floor(Math.random() * (max - min) + min); } while (excludeArray.includes(randomNumber)); return randomNumber; } function getRandomRGBColor(excludeColors) { const generateRandomColorComponent () > Math.floor(Math.random() * 256); let randomColor; do { randomColor `rgb(${generateRandomColorComponent()},${generateRandomColorComponent()},${generateRandomColorComponent()})`; } while (excludeColors.includes(randomColor)); return randomColor; } function changeColor(rgbColor, index) { finalColorsindex rgbColor; tempColors ...finalColors tempColors.push(hexToRgb(background)) colorCount new Set(tempColors).size var info document.getElementById(info-text) info.innerText `600*600, 72dpi, ${shapeCount} shapes, total ${totalNum} features, ${colorCount} colors` const filterId `colorFilter-${index+1}`; ryindex.el.setAttributeNS(null, filter, `url(#colorFilter-${index+1})`); var colorMatrixValues rgbToColorMatrixValues(rgbColor); var colorMatrixString colorMatrixValues.join( ); var existingFilter document.getElementById(filterId); if (existingFilter) { existingFilter.remove(); } // 필터 생성 var filter document.createElementNS(http://www.w3.org/2000/svg, filter); filter.id filterId; filter.setAttribute(color-interpolation-filters, sRGB) svgDefs.appendChild(filter); // 필터 내부에 행렬 변환 효과 추가 var feColorMatrix document.createElementNS(http://www.w3.org/2000/svg, feColorMatrix); feColorMatrix.setAttribute(type, matrix); feColorMatrix.setAttribute(values, colorMatrixString); filter.appendChild(feColorMatrix); } function getColor(event) { var colorPicker event.target; var selectedColorHex colorPicker.value; var selectedColorRGB hexToRgb(selectedColorHex); if (currentIndex ! -1) { changeColor(selectedColorRGB, currentIndex) } } function hexToRgb(hex) { // 16진수 색상을 RGB로 변환하는 함수 // 출처: https://stackoverflow.com/a/5624139/9901271 const bigint parseInt(hex.slice(1), 16); const r (bigint >> 16) & 255; const g (bigint >> 8) & 255; const b bigint & 255; return `rgb(${r},${g},${b})`; } function rgbStringToHex(rgbString) { // 정규 표현식을 사용하여 숫자 부분 추출 const matches rgbString.match(/\d+/g); if (!matches || matches.length ! 3) { throw new Error(Invalid RGB string format); } // 각 색상 구성 요소 추출 및 HEX로 변환 const r, g, b matches.map(Number); const toHex (value) > { const hex value.toString(16); return hex.length 1 ? 0 + hex : hex; }; const hexR toHex(r); const hexG toHex(g); const hexB toHex(b); return # + hexR + hexG + hexB; } function getFormattedDate() { const today new Date(); const year today.getFullYear(); const month String(today.getMonth() + 1).padStart(2, 0); const day String(today.getDate()).padStart(2, 0); const formattedDate `${year}${month}${day}`; return formattedDate; }/script>
View on OTX
|
View on ThreatMiner
Please enable JavaScript to view the
comments powered by Disqus.
Data with thanks to
AlienVault OTX
,
VirusTotal
,
Malwr
and
others
. [
Sitemap
]