새로 고침을하지 않고 자바 스크립트 변수를 변경하십시오.

Question

나는 캔버스를 지우지 않고 자바 스크립트에서 페이지를 새로 고치지 않고 "image.src"를 어떻게 변경하는지 궁금합니다.

나는 AJAX와 같은 것을 사용하려고 생각 했었지만 (나는 전에 그것을 사용 해본 적이 없다.) 나는 그것이 올바른 길인지 확실하지 않다. 아무도 나를 도울 수 있습니까?

<form> 
Image URL:<input type="text" size="50" name="i" value="<?php echo $_REQUEST['i']?>" /> 
Background Color:<select name="color" > 
<?php if($_REQUEST['color'] == "#000000"){ ?> 
    <option value="#000000">Black</option> 
    <option value="#ffffff">White</option> 
    <?php }else{ ?> 
    <option value="#ffffff">White</option> 
    <option value="#000000">Black</option> 
    <?php } ?> 
</select> 
<input type="submit"/> || Back to the <a href="/cloner/index.php">Home Page</a> 
</form> 
</div> 
     <script type="text/javascript"> 
     var imageWidthHalf, imageHeightHalf; 
     var canvas = document.createElement('canvas'); 
     var height = window.innerHeight; 
      canvas.width = window.innerWidth; 
      canvas.height = height; 
      canvas.style.display = 'block'; 
      document.body.appendChild(canvas); 
      var context = canvas.getContext('2d'); 
      var image = document.createElement('img'); 
      image.addEventListener('load', function() { 
       imageWidthHalf = Math.floor(this.width/2); 
       imageHeightHalf = Math.floor(this.height/2); 
       document.addEventListener('mousemove', onMouseEvent, false); 
       document.addEventListener('touchstart', onTouchEvent, false); 
       document.addEventListener('touchmove', onTouchEvent, false); 
      }, false); 
      image.src = "<?php echo $_REQUEST['i']; ?>"; 
      function onMouseEvent(event) { 
       context.drawImage(image, event.clientX - imageWidthHalf, event.clientY - '50' - imageHeightHalf); 
      } 
      function onTouchEvent(event) { 
       event.preventDefault(); 
    for (var i = 0; i < event.touches.length; i++) { 
        context.drawImage(image, event.touches[i].pageX - imageWidthHalf, event.touches[i].pageY - imageHeightHalf); 
       } 
      } 
     </script> 

Answer 1

document.querySelector('input[name="i"]').addEventListener('blur', function() { 
    image.src = this.value; 
}, false);