1

一个客户提出了一个有趣的问题。他们正在寻求创建一个应用程序，允许用户从选择的颜色中进行选择，并生成显示所选颜色混合的动态图像。所选颜色随机绘制在具有不同形状和位置的图像上。

最终产品可能看起来像这样

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=蛋壳

上面的链接在图像中放入了 3 种颜色。

我们正在考虑有一个网格，其中每个块都有 % 的机会显示所提供的颜色。然后绘制与网格位置随机偏移的图像，具有随机的形状和大小......然后移动到网格中的下一个元素。

有没有人处理过这样的事情？你用什么策略来解决这个问题？

4

1 回答 1

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 构建图像基于如何使用 PHP 制作嘈杂的背景图像？. 结果是 base64_encode img 字符串（PHP HTML 图像输出）：

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

玩得开心

于 2013-04-24T22:25:57.933 回答