업데이트 할 때 이미지가 계속 깜박입니다.

Question

이미지의 크기를 조정하거나 색상을 변경하십시오. 이미지가 깜빡이는

<?php 
// Set the content-type 
header('Content-Type: image/png'); 

// Create the image 
$im = imagecreatetruecolor(400, 64); 

// Create some colors 
$white = imagecolorallocate($im, 255, 255, 255); 
$grey = imagecolorallocate($im, 128, 128, 128); 
$black = imagecolorallocate($im, 0, 0, 0); 
imagefilledrectangle($im, 0, 0, 399, 64, $white); 

// The text to draw 
$text = $_GET['t']; // text 
// Replace path by your own font path 
$font = 'fonts/' . $_GET['f'] . '.ttf'; // font 

$color = $_GET['c']; 
$red = hexdec(substr($color, 0, 2)); 
$green = hexdec(substr($color, 2, 2)); 
$blue = hexdec(substr($color, 4, 2)); 

$font_color = imagecolorallocate($im, $red, $green, $blue); 

$size = $_GET['s']; 

// Add the text 
imagettftext($im, $size, 0, 5, 30, $font_color, $font, $text); 

// Using imagepng() results in clearer text compared with imagejpeg() 
imagepng($im); 
imagedestroy($im); 
?> 

JS :

$(function() 
     { 
      $.farbtastic('#colorpicker', function(color) 
      { 
       $('#color').val(color); 
       updateImage(); 
      }); 

      $('#color').blur(function() 
      { 
       $.farbtastic('#colorpicker').setColor($(this).val()); 
       updateImage(); 
      }); 

      $('#update-btn').click(function() 
      { 
       updateImage(); 
      }); 

     }); 

     function updateImage() 
     { 
      $('.sample-text').attr('style', 'background:url(preview.php?s='+$('#font-size').val()+'&c='+$('#color').val().substr(1)+'&f='+$('#font').val()+'&t=' + $('#sample-text').val().replace(' ', '+') + ')'); 
     } 

     function update(value) 
     { 
      $('#range-display').text(value); 
      updateImage(); 
     } 

HTML :

Click here to see a live example

이

PHP (글꼴은 다음 업데이트를 클릭 선택)

<div> <select id="font"> <option>Choose a Font</option> <option value="dandy">Dandy</option> <option value="wtf">Pixel Font</option> </select> <input id="font-size" type="range" min="14" max="70" value="25" onchange="update(this.value)" /><span id="range-display">25</span> <input type="text" id="sample-text" placeholder="Sample text" /> <input type="button" value="Update" id="update-btn" /> <div id="colorpicker"></div> <input type="text" id="color" name="color" value="#123456" /> <div class="sample-text"></div> </div> 

위에서 알 수 있듯이 크기와 색상을 업데이트하면 깜박 거립니다. 어떻게 그걸 막을 수 있니?

Answer 1

background 속성을 지속적으로 업데이트하므로 크기 조정의 모든 단일 픽셀에 대해 이미지를 다시 가져와야합니다. 분명히, 즉각적으로 그렇게 할 수는 없으므로 깜박 거립니다.

대신 background-size을 변경하고 setTimeout을 설정하여 다른 크기의 배경 이미지를 업데이트하십시오. 당신은 여전히 ​​짧은 깜박임을 얻을 수 있지만, 당신이 지금 가지고있는 것만 큼 나쁜 것은 아닙니다. 또한 엄청난 양의 대역폭을 절약 할 수 있습니다.