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

我不明白你的问题，但客户的问题很有趣。

我在stackoverflow上的其他一些问题的帮助下构建了一个示例，请参阅：http://twitterbootstrapbuttons.w3masters.nl/randomimage.html

randomimage.html包含一个带有树颜色选择器（http://www.eyecon.ro/bootstrap-colorpicker/）的表单：

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

通过jquery提交调用randomimage.php并显示图像（以空图像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>

randomimage.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;

玩得开心

使用PHP / GD创建混合颜色的调色板

1 个答案: