파트라슈
10
2021-04-14 01:32:26 작성 2021-04-14 01:51:58 수정됨
2
215

코알못 비전공자입니다...html, css, javascript, jquery, php 관련하여 질문드립니다..제발 도와주세요ㅠㅠㅠㅠ



<!DOCTYPE html>
 <html>
 <head>
<link rel="shortcut icon" href="img/favicon.ico" />
      <title>!PRINTERUPT!</title>
     <link rel="shortcut icon" type="image/x-icon" href="printer.png">
  </head>
     
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
     <script src="https://cdn.rawgit.com/eligrey/FileSaver.js/5ed507ef8aa53d8ecfea96d96bc7214cd2476fd2/FileSaver.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
     <script src="https://unpkg.com/wavesurfer.js"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  
     
<style>
   
    
  body{

    /*background-image: url('total.png');*/
    background-image: url('web-bg.png');
    background-color:black;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center top;
     
    width:auto;
    height:auto; 
      margin-left: 30px;
      margin-right: 30px;
      overflow-y: scroll;
    overflow-x: hidden;
  }
  textarea{
  /*  margin-left: 240px;
    margin-top: 100px;*/
    font-size: 300px;
    font-family: "DOSGothic";
    writing-mode: tb-rl
    overflow-y: scroll;
    overflow-x: hidden;
    border : none;
    width:200pt;height:500pt;
  }
 /*input{
    font-size: 30px;
    font-family: "DOSGothic";
    border : none;
    position: fixed;
    left: 250px;
    top: 250px;/*top: 100px;*/
    /*writing-mode: tb-rl
    overflow-y: scroll;
    overflow-x: hidden;
    background-color:transparent;
    background-size: cover;*/
  }
    option-box first{
        font-family: "DOSGothic"
    }
    .filebox input[type="file"] { 
        position: absolute; 
        width: 1px; 
        height: 1px; 
        padding: 0; 
        margin: -1px; 
        overflow: hidden; 
        clip:rect(0,0,0,0); 
        border: 0; 
    } 
    
    .filebox label { 
        display: inline-block; 
        padding: .5em .75em; 
        color: #999; 
        font-size: inherit; 
        line-height: normal; 
        vertical-align: middle; 
        background-color: #fdfdfd; 
        cursor: pointer; 
        border: 1px solid #ebebeb; 
        border-bottom-color: #e2e2e2; 
        border-radius: .25em; 
    } /* named upload */ 
    
    .filebox .upload-name { 
        display: inline-block; 
        padding: .5em .75em; /* label의 패딩값과 일치 */ 
        font-size: inherit; 
        font-family: inherit; 
        line-height: normal; 
        vertical-align: middle; 
        background-color: #f5f5f5; 
        border: 1px solid #ebebeb; 
        border-bottom-color: #e2e2e2; 
        border-radius: .25em; -webkit-
        appearance: none; /* 네이티브 외형 감추기 */ -moz-appearance: none; 
        appearance: none; 
    }

    
.html2canvas-container { width: 3000px !important; height: 3000px !important; }

   
    .pre_img{/*미리보기*/
        /*위치 배치*/
        position: absolute;
        top:850px;
        left:650px;
        background-color:white;
        border : 1px solid black;
        width:420px;
        height: 594px;
       margin : 0;
     padding : 0;
        z-index: 1;
    } 
    
    #save{     
        position: absolute;
        bottom: 200px;
        background-color:yellow;
        width:100px;
        height:100px;
        margin : 0;
        padding : 0;
        z-index: 1;
    }
    
     h1 {
    color:white;
      font-size: 35pt;
    font-family: VCR OSD Mono;
} 
    
    .pre_img{
        text-align: center;  
        color: black; 
        font-family: DOSGothic; 
        position: absolute; 
        top: 105%; 
        left: 30%; 
        transform: translate(-50%, -0%); 
        font-size: 10px;
    }
    
    .preview{/*미리보기*/
        /*위치 배치*/
        position: absolute;
        top:850px;
        left:650px;
        background-color: b;
        border : 1px solid black;
        width:420px;
        height: 594px;
       margin : 0;
     padding : 0;
        z-index: 1;
        text-align: center;  
        color: black; 
        font-family: DOSGothic; 
        position: absolute; 
        top: 105%; 
        left: 30%; 
        transform: translate(-50%, -0%); 
        font-size: 10px;
    } 
</style>
 
 <body>
      
      
     <h1 class="title"> <marquee behavior=alternate scrollamount=20>&#128424;&#128163;PRINTERUPT&#128163;&#128424;</marquee>   </h1>
  
    
    <div id= "prevwhole">
      <img id = "image" class ="pre_img">
          <h3>미리보기 이미지 예정지 210*297</h3>
     <div id = "prev" class="preview">
     
     </div></div>
     

<!--<div id = "image" class="printer-img" style="position: relative;z-index: 1;">-->
     
     <div  class="printer-img" style="position: relative;">
         <img src="print-web-mmodified.png" width="100%" height="100%">
         </div>
         
        
     
     <!--<div class="filebox" style=""> <input class="upload-name" value="Choose Your File..." disabled="disabled"> <label for="ex_filename">Upload</label> <input type="file" id="ex_filename" class="upload-hidden"> </div>*/-->
     
     <div class="option-box first" style="text-align: center;  color: black; font-family: DOSGothic; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -0%); font-size: 45px;">
     <div class="option-left" style="font-family: DOSGothic;"></div>!Choose Your Image! 
     <div class="option-right" style="font-family: DOSGothic; align-content: center;">
       
       
         <input type="file" id="file" name="file" accept="img/*" style="font-family: DOSGothic; font-size: 20px; background-color: yellow;">
     </div>
     <div class="option-hint file_limits" style="font-size: 20px; color: black;">
       제한: jpg, png file
     </div>
   </div>
    
        
    <div id="typebox" class="typebox" style="width: 650px; height: 595px; background-color: transparent; position: absolute; top: 105%; left: 65%; transform: translate(-50%, -0%); overflow: auto;">
        <!--<div id="alphabet" style="font-family: VCR OSD Mono; color: magenta; font-size: 45px; top:10%; position: absolute;">
        a
        </div>
        <div id="morsecode">
            <img src="A.svg" style="height: 15px; left: 20%; top:13%; position: absolute;" >
        </div>-->
        
        <div id="waveform" style="width: 250px; height: 50px; float: right;">
        <button class="btn btn-primary" onclick="wavesurfer.playPause()" style="background-color: magenta; font-family: VCR OSD Mono; ">
            <i class="fa fa-play"></i><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
      Play /
            </font></font><i class="fa fa-pause"></i><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
      Pause
    </font></font></button>
        </div>
       
    </div>
         
     
<div class="type" style="text-align: center;  color: black; font-family: DOSGothic; position: absolute; top: 93%; left: 50%; transform: translate(-50%, -0%); font-size: 45px; color: white;" onkeypress="myFunction(event)">!Type &  Press Enter!
   <!-- <input id ='name' onchange='printName()'/>
        <div id = 'result'></div>-->
<br><input id="name" maxlength="12" style="font-family: VCR OSD Mono; font-size: 20px; background-color: magenta;" onchange="printName()"/>
        <div id = 'result'></div>
    <!--<input type="submit" id="submit" name="submit" style="font-family: DOSGothic; font-size: 20px; background-color: magenta;">-->
     </div>
         
         
         
     
     <div   class="balloon" style="position: absolute; top: 50px;  width: 95vw;z-index: 2;">
    <a href = "info.html" target="" >
         <p align="right"><img class="info" src="thought-balloon.png" alt="balloon" width="20%" height="20%" onmouseover="this.src='thought-balloon copy.png'" onmouseout="this.src='thought-balloon.png'"></a>
</div>
      
     <button id="save" style="font-family: DOSGothic; font-size: 20px; background-color: cyan; width:200px; font-size: 20pt; position: absolute; top: 180%; left: 50%; transform: translate(-50%, -0%);">!Save It!</button>

<!--overflow: scroll; resize: none;-->
   <!--<textarea rows="1" cols="3" type= "text" style ="writing-mode:tb-rl;  style='IME-MODE: active; transform: rotate(180deg);"></textarea>-->
window.scrollTo(0, 0); 
  
</body>
   <script type = "text/javascript">
           
     $(function(){
        
         $("#save").click(function() { 
             window.scrollTo(0, 0); 
             html2canvas($("#image"), {
               onrendered: function(canvas) {
                   canvas.toBlob(function(blob) {
                       saveAs(blob, 'image.png');
     });
               }
              });
         });
     window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
         
     });
     
     </script>
     
     <script>
         $(document).ready(function(){ var fileTarget = $('.filebox .upload-hidden'); fileTarget.on('change', function(){ /* 값이 변경되면*/ if(window.FileReader){ // modern browser 
             var filename = $(this)[0].files[0].name; } else { // old IE 
                 var filename = $(this).val().split('/').pop().split('\\').pop(); // 파일명만 추출 
             } // 추출한 파일명 삽입 
$(this).siblings('.upload-name').val(filename); }); });

     </script>
     
     <script>
     function readImage(input) {
    /* 인풋 태그에 파일이 있는 경우*/
    if(input.files && input.files[0]) {
        // 이미지 파일인지 검사 (생략)
        // FileReader 인스턴스 생성
        const reader = new FileReader()
        // 이미지가 로드가 된 경우
        reader.onload = e => {
            const previewImage = document.getElementById("image")
            previewImage.src = e.target.result
        }
        // reader가 이미지 읽도록 하기
        reader.readAsDataURL(input.files[0])
    }
}
// input file에 change 이벤트 부여
const inputImage = document.getElementById("file")
inputImage.addEventListener("change", e => {
    readImage(e.target)
})
     </script>
     
     <script>
     var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
    progressColor: 'purple'
         
});
         wavesurfer.load('morsecolor.m4a');
     </script>
     
     <script>
     $(document).ready( function() {
  $.justwave({ showname: 0, buttoncolor: 'magenta' });
});
         
     </script>
     
     <script type="text/javascript">

function printName()  {
  const name = document.getElementById('name').value; //name이라는 변수에 사용자가 입력한값 저장
  var string = name; //입력한 값을 string에 저장
    const arr = string.split("");//입력한 글자 쪼갬
    const len = name.length;
    
    console.log(len);
    
     for(var i =0; i<len; i++){
  if(arr[i]=='a'){
        document.getElementById('prev').innerHTML+='<img src="A01r.png"><br><br><br>'; //id가 이미지에 저 그림(a01.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="AA.png"><br>';
      document.getElementById('typebox').innerHTML+='<audio controls><audio src="morsetest08.mp3"><br>';
        } 
  else if(arr[i]=='b'){
        document.getElementById('prev').innerHTML+='<img src="B02r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="BB.png"><br>';
      
//else if(arr[i]=='c'){위에 조건 그대로 복붙}
//else if(arr[i]=='c'){위에 조건 그대로 복붙}
  //이런식으로 모든 알파벳 노가다 화이팅^^
  
  } 
else if(arr[i]=='c'){
        document.getElementById('prev').innerHTML+='<img src="C02r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="CC.png"><br>';
  
  }
else if(arr[i]=='d'){
        document.getElementById('prev').innerHTML+='<img src="D03r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="DD.png"><br>';
  
  }
else if(arr[i]=='e'){
        document.getElementById('prev').innerHTML+='<img src="E04r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="EE.png"><br>';
  
  }
else if(arr[i]=='f'){
        document.getElementById('prev').innerHTML+='<img src="F01r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="FF.png"><br>';
  
  }
else if(arr[i]=='g'){
        document.getElementById('prev').innerHTML+='<img src="G01r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="GG.png"><br>';
  
  } 
 else if(arr[i]=='h'){
        document.getElementById('prev').innerHTML+='<img src="H07r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="HH.png"><br>';
  
  } 
else if(arr[i]=='i'){
        document.getElementById('prev').innerHTML+='<img src="I01r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="II.png"><br>';
  
  }  
else if(arr[i]=='j'){
        document.getElementById('prev').innerHTML+='<img src="J01r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="JJ.png"><br>';
  
  }
else if(arr[i]=='k'){
        document.getElementById('prev').innerHTML+='<img src="K01r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="KK.png"><br>';
  
  } 
else if(arr[i]=='l'){
        document.getElementById('prev').innerHTML+='<img src="L01r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="LL.png"><br>';
  
  }   
else if(arr[i]=='m'){
        document.getElementById('prev').innerHTML+='<img src="M01r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="MM.png"><br>';
  
  }  
 else if(arr[i]=='n'){
        document.getElementById('prev').innerHTML+='<img src="N05r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="NN.png"><br>';
  
  } 
 else if(arr[i]=='o'){
        document.getElementById('prev').innerHTML+='<img src="O05r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="OO.png"><br>';
  
  }   
 else if(arr[i]=='p'){
        document.getElementById('prev').innerHTML+='<img src="P01r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="PP.png"><br>';
  
  } 
else if(arr[i]=='q'){
        document.getElementById('prev').innerHTML+='<img src="Q01r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="QQ.png"><br>';
  
  } 
else if(arr[i]=='r'){
        document.getElementById('prev').innerHTML+='<img src="R01r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="RR.png"><br>';
  
  }  
else if(arr[i]=='s'){
        document.getElementById('prev').innerHTML+='<img src="S01r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="SS.png"><br>';
  
  }  
 else if(arr[i]=='t'){
        document.getElementById('prev').innerHTML+='<img src="T04r.png"><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="TT.png"><br>';
  
  } 
 else if(arr[i]=='u'){
        document.getElementById('prev').innerHTML+='<img src="U01r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="UU.png"><br>';
  
  }  
 else if(arr[i]=='v'){
        document.getElementById('prev').innerHTML+='<img src="V01r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="VV.png"><br>';
  
  }  
 else if(arr[i]=='w'){
        document.getElementById('prev').innerHTML+='<img src="W01r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="WW.png"><br>';
  
  }   
 else if(arr[i]=='x'){
        document.getElementById('prev').innerHTML+='<img src="X02r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="XX.png"><br>';
  
  }  
 else if(arr[i]=='y'){
        document.getElementById('prev').innerHTML+='<img src="Y01r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="YY.png"><br>';
  
  }    
 else if(arr[i]=='z'){
        document.getElementById('prev').innerHTML+='<img src="Z01r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
        document.getElementById('typebox').innerHTML+='<img src="ZZ.png"><br>';
  
  }        
     }//for문 괄호 끝
    
}//스크립트 괄호 끝
         
         
   
    </script>
     
     

<!--     <script>
         $('#button').click(function(){
            html2canvas($('#image')[0],
                {
                promise: function(canvas){
                    var a = document.createElement('a');
                    
                    a.href = canvas.toDataURL("image/png");
                    a.download = 'image_f.png';
                    a.click();
                }
            });
             });
     </script>
-->
 </html>


구현된 사이트 링크: www.janeih.com


1. 이미지 파일을 업로드 하고, 업로드 한 이미지 위에 다른 이미지를 올리는 코드를 작성하였습니다.

(다른 이미지는 키보드 입력에 반응해서 이미지가 결정됩니다. img 태그 한 개와 div 태그 한 개를 같은 크기, 같은 위치로 만들어서 겹쳐놨습니다)

이미지 파일을 업로드 하는 곳은 img태그와 자바스크립트, 제이쿼리로 작성을 하였고

다른 이미지를 올리는 코드는 div 태그와 자바스크립트로 작성을 하였습니다.

이 둘이 합쳐진 것을 출력하고 싶어서 html2canvas를 사용했는데 두개가 겹쳐진 형태로 출력이 되지 않습니다. 어떻게 해결을 해야 할까요?


2. 키보드 입력에 반응해서 출력되는 이미지 중 오른쪽 div에 들어가는 이미지(모스부호 이미지) 옆에 음악 플레이어가 함께 출력되게 하고 싶습니다. 

다만 키보드 입력을 위한 if문 안에 이미지와 같은 방식으로 출력되게 하고싶어 a 입력 시에 해당하는 if문에 

document.getElementById('typebox').innerHTML+='<audio controls><audio src="morsetest08.mp3"><br>';

이런 방식으로 오디오 컨트롤을 추가했더니 플레이어는 생기지만 그 어떤 버튼도 작동하지 않았습니다.

키보드를 입력했을 때 각각 다른 mp3파일을 정상적으로 재생할 수 있는 음악 플레이어를 넣으려면 어떻게 해결해야 할까요? (꼭 오디오 컨트롤 플레이어의 형태가 아니더라도 정상적으로 구동되는 재생버튼만이라도 넣고 싶습니다...)


0
  • 답변 2

  • 20170923
    2k
    2021-04-14 10:06:33

    우선 질문1은 아마 css를 통해 해결 가능할 것으로 보입니다

    2는 현재 사이트 확인해보니 플레이어 Play 버튼 클릭 시 뒤의 오디오 파형이 움직이는게 보이던데 잘 처리하셨는지 모르겠네요

    그리고 여담으로

    else if(arr[i]=='c'){
            document.getElementById('prev').innerHTML+='<img src="C02r.png"><br><br><br>'; //id 이미지에 저 그림(a02.png)을 추가시켜라
            document.getElementById('typebox').innerHTML+='<img src="CC.png"><br>';
      
      }

    이거는 arr[i]에 따른 반복적인 동작을 하는걸로 보이는데


    document.getElementById('prev').innerHTML+='<img src="'+ arr[i] +'02r.png"><br><br><br>'; 
    document.getElementById('typebox').innerHTML+='<img src="'+arr[i]+arr[i]'.png"><br>';


    이런식으로 처리하시고 다르게 처리해야하는 부분에 대해서만 if로 처리해주세요

  • 파트라슈
    10
    2021-04-14 12:55:51

    안녕하세요! 우선 답변 감사드립니다ㅠㅠ

    1번은 css로 다시 시도해보겠습니다.

    2번은 말씀해주신 것이 따로 오디오 파형이 보이는 플레이어 자바스크립트 코드를 넣었던 것인데요, 그게 키보드 입력시 나오는 것이 아닌 웹을 열면 나오는 default 개체로 넣어 놓은 것이라 이것을 디폴트 개체가 아닌 키보드 입력에 반응해서 나오는 개체로 만들고싶은데 방법을 도무지 모르겠습니다..

    그리고 마지막으로 주신 if 관련 조언 감사합니다!! 참고해서 수정해보겠습니다! 

  • 로그인을 하시면 답변을 등록할 수 있습니다.