更新時に画像がちらつき続ける

Question

画像のサイズを変更するか、色を変更してみてください。

Click here to see a live exampleを（更新]をクリックし、フォントを選択してください）

PHP：画像がちらつく

<?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：

<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を設定して、異なるサイズの背景イメージを更新してください。あなたはまだ簡単なちらつきを得るかもしれませんが、あなたが今持っているものほど悪くはありません。また、膨大な帯域幅を節約できます。