使用PHP/GD創建混合顏色調色板

Question

客戶端提出了一個有趣的問題。他們正在創建一個應用程序，允許用戶從多種顏色中挑選並生成顯示所選顏色混合的動態圖像。選定的顏色隨機繪製在具有不同形狀和位置的圖像上。

最終產品可能會是這個樣子

http://matsinc.com/mixologyapp/swatchimage.php?red1=71&green1=160&blue1=109&size1=1&pct1=0.3&colname1=Ocean%20Green&red3=30&green3=28&blue3=27&size3=1&pct3=0.5&colname3=Black&red5=234&green5=221&blue5=200&size5=1&pct5=0.2&colname5=Eggshell

上面的鏈接有3種顏色放入圖像。

我們正在考慮建立一個網格，其中每個塊有提供顯示顏色的機率。然後用一個隨機的偏移距網格位置來繪製圖像，並使用隨機的形狀和大小......然後移動到網格中的下一個元素。

有沒有人處理過這樣的事情？你用什麼策略攻擊這個問題？

Answer 1

我不明白你的問題，但你的客戶的問題很有趣。

我建立與這裏的計算器一些其他問題的幫助示例，請參見：http://twitterbootstrapbuttons.w3masters.nl/randomimage.html

randomimage.html包含樹拾色器形式（http://www.eyecon.ro/bootstrap-colorpicker/）：在提交調用randomimage

<form action="" method="get" id="imageform"> 
    <div class="input-append color" data-color="#08c" data-color-format="hex"> 
    <input type="text" class="span2" value="#08c" name="color1" id="color1"> 
    <span class="add-on"><i style="background-color: #08c"></i></span> 
    </div><br> 
    <div class="input-append color" data-color="#08c" data-color-format="hex"> 
    <input type="text" class="span2" value="#08c" name="color2" id="color2"> 
    <span class="add-on"><i style="background-color: #08c"></i></span> 
    </div><br> 
    <div class="input-append color" data-color="#08c" data-color-format="hex"> 
    <input type="text" class="span2" value="#08c" name="color3" id="color3"> 
    <span class="add-on"><i style="background-color: #08c"></i></span> 
    </div><br> 

    <input type="submit" class="btn btn-primary" value="Generate your image"/> 
</form> 

.php通過jquery顯示圖片（以空圖像Clear an IMG with jQuery開頭）：

<script>  

    /*empty images from: https://stackoverflow.com/questions/10865689/clear-an-img-with-jquery */ 

    $('#result1').attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='); 


    $('.color').colorpicker(); 
    $('#imageform').submit(function() { 

    $.get('randomimage.php', { 'colors[]': [ $('#color1').val(), $('#color2').val(), $('#color3').val() ]}, function(data) { 
$('#result1').attr('src', 'data:image/png;base64,'+data); 

}); 



     return false; 
    }); 

</script> 

rando mimage.php根據How can I make a noisy background image using PHP?構建圖像。其結果是BASE64_ENCODE IMG字符串（PHP HTML image output）：

<? 
error_reporting(E_ALL); 
ini_set('display_errors','on'); 
function ImageColorAllocateFromHex ($img, $hexstr) 
{ 
    $int = hexdec($hexstr); 

    return ImageColorAllocate ($img, 
     0xFF & ($int >> 0x10), 
     0xFF & ($int >> 0x8), 
     0xFF & $int); 
} 


//https://stackoverflow.com/questions/3695077/php-html-image-output 
ob_start(); 
//random colored noise 
https://stackoverflow.com/questions/2727450/how-can-i-make-a-noisy-background-image-using-php 
$x = 150; 
$y = 150; 
$im = imagecreatetruecolor($x,$y); 
$colors = array(); 
foreach($_GET['colors'] as $color) 
{ 
    $colors[]= ImageColorAllocateFromHex ($im, $color); 
} 
$number = count($colors)-1; 

for($i = 0; $i < $x; $i++) { 
    for($j = 0; $j < $y; $j++) { 

     imagesetpixel($im, $i, $j, $colors[rand(0,$number)]); 
    } 
} 
imagepng($im); 

$output = ob_get_contents(); 
ob_end_clean(); 

echo base64_encode($output); 
exit; 

樂趣