Как я могу генерировать два цветных изображения продукта динамически?

Question

В настоящее время я создаю сайт электронной коммерции (с Drupal Commerce). Мы продаем спортивную одежду, которая производится на заказ. Клиент может выбрать стиль, два цвета и размер. Для каждого стиля есть более трехсот комбинаций цветов, которые можно выбрать.

Я создаю иллюстрацию для продуктов в Illustrator. Это довольно простые векторы, которые используют только два плоских цвета с черным контуром сверху.

Я пытаюсь найти способ создания всех цветовых комбинаций для каждого стиля, желательно динамически. Я посмотрел на GD, но я не уверен, что это сработает. Я задавался вопросом, есть ли способ использовать SVG (так как у меня уже есть векторы) или укладка трех прозрачных PNG, которые могут иметь наложенную цветовую накладку и сохранять прозрачность? Выполнено.

Чтобы создать изображения динамически, я создал один GIF, содержащий белый фон и чистую красную и чистую синюю область для определения первичной и вторичной областей. Это выполняется через GD, который изменяет красный и синий цвета на выбранные пользователем цвета. Затем прозрачный PNG объединяется сверху, который содержит черный контур и логотип компании.

На index.php У меня есть форма, которая позволяет пользователям выбирать стиль и два цвета:

<form method="post" action="index.php"> 
    <label for="style">Style:</label> 
    <select id="style" name="style" required> 
     <option value="0001">Vertical Stripe</option> 
     <option value="0002">V Neck</option> 
     <option value="0003">Contrast Side</option> 
     ... 
    </select> 
    <br><br> 
    <label for="color1">Color 1:</label> 
    <select id="color1" name="color1" required> 
     <option></option> 
     <option value="134,84,66">Retro Brown</option> 
     <option value="115,51,68">Claret</option> 
     <option value="167,57,52">Deep Red</option> 
     <option value="213,69,54">Bright Red</option> 
     ... 
    </select> 
    ... 
</form> 

После того, как форма была отправлена, есть некоторые PHP для создания URL, который проходит опции к продукту -image.php:

<?php 
    $url = "product-image.php"; 

    if (isset($_POST["style"])) { 
     $url = $url . "?style=" . $_POST["style"]; 
    } 
    if (isset($_POST["color1"])) { 
     $url = $url . "&color1=" . $_POST["color1"]; 
    } 
    if (isset($_POST["color2"])) { 
     $url = $url . "&color2=" . $_POST["color2"]; 
    } 

?> 

<img class="product" src="<?php echo $url; ?>"> 

Тогда основная часть работы выполняется продукт-image.php:

// Set some dummy values to avoid errors 
$style = "0001"; 
$color1 = array(255,255,0); 
$color2 = array(0,0,200); 

if (isset($_GET["style"])) { 
    $style = $_GET["style"]; 
} 

$colorFile = $style . "colors.gif"; 
$outlineFile = $style . "outline.png"; 

// Load image with coloured sections 
$image_1 = imagecreatefromgif($colorFile); 
// Load image with outlines 
$image_2 = imagecreatefrompng($outlineFile);    

imagealphablending($image_1, true); 
imagesavealpha($image_1, true); 

imagetruecolortopalette($image_1, false, 255); 

// Import $color1 values to create an RGB array 
if (isset($_GET["color1"])) { 
    $color1 = explode(',', $_GET["color1"]);     
} 
// Import $color2 values to create an RGB array 
if (isset($_GET["color2"])) {    
    $color2 = explode(',', $_GET["color2"]); 
} 

// Define Primary (red) region 
$region1 = imagecolorclosest ($image_1, 255,0,0); 

// Set new colour for $region1 using the values passed into $color1 
imagecolorset($image_1, $region1, $color1[0], $color1[1], $color1[2]); 

// Get Secondary (blue) region 
$region2 = imagecolorclosest ($image_1, 0,0,255); 

// Set new colour for $region2 using the values passed into $color2 
imagecolorset($image_1, $region2, $color2[0], $color2[1], $color2[2]); 

// Create a true color canvas, this seems to retain transparency when merging PNG & GIF 
$merged_image = imagecreatetruecolor(339, 390); 

// Merge the newly coloured sections 
imagecopy($merged_image, $image_1, 0, 0, 0, 0, 339, 390); 

// Merge the outlines on top  
imagecopy($merged_image, $image_2, 0, 0, 0, 0, 339, 390); 

// Tell browser to expect PNG 
header("Content-type: image/png"); 

// Output new PNG      
imagepng($merged_image);   

// Tidy up 
imagedestroy($image_1);          
imagedestroy($image_2); 
imagedestroy($merged_image); 

Я довольно запутался в результатах, так как я все еще изучаю PHP и никогда раньше не смотрел в GD. Я разместил rough demo here (есть также ссылка для загрузки всех файлов, используемых на этой странице).

Любые предложения по улучшению? В конечном счете, я хочу, чтобы пользователь выбирал два цвета в раскрывающихся списках, а затем сценарий будет смотреть, существует ли изображение с этими параметрами, и если оно не динамически создает его, задавая цвет двух регионов, а затем сохраняет вновь созданное изображение для будущих пользователей.

Как сделать автоматическое обновление без необходимости кнопки отправки?

Answer 1

Все вышеперечисленные работы, и теперь у меня есть это, чтобы сохранить созданные изображения, и добавил чек, чтобы увидеть, есть ли изображение, прежде чем оно попытается его создать. Связанный пример обновлен всем кодом, но вот новый файл product-image.php для всех, кого это интересует.

$style = "0001";     // Dummy values to avoid errors 
$color1 = array(247,228,064); 
$color2 = array(031,076,146); 

$templatePath = "../templates/";  // Relative path from this file to your templates 

if (isset($_GET["style"])) { 
    $style = $_GET["style"];     // Replace $style with real value if recieved 
} 

if (isset($_GET["color1"])) { 
    $color1 = explode(',', $_GET["color1"]); // Replace $color1 with real RGB array if recieved 
} 

if (isset($_GET["color2"])) {    
    $color2 = explode(',', $_GET["color2"]); // Replace $color2 with real RGB array if recieved 
} 

// Create unique output file name by concatenating all numerical values eg:0001247228522562146.png 
$outputFileName = $style . implode("", $color1) . implode("", $color2) . ".png"; 

// Check if the image we want already exists 
if (file_exists($outputFileName)) { 

    // If it does then open the file in a binary mode 
    $fp = fopen($outputFileName, 'rb'); 

    // send the right headers 
    header("Content-Type: image/png"); 
    header("Content-Length: " . filesize($outputFileName)); 

    // dump the picture and stop the script 
    fpassthru($fp); 
    exit; 

} else {  // If it doesn't already exist then lets create the image... 

    $colorFile = $templatePath . $style . "colors.gif"; 
    $outlineFile = $templatePath . $style . "outline.png"; 

    $image_1 = imagecreatefromgif($colorFile);    // Load image with coloured sections 
    $image_2 = imagecreatefrompng($outlineFile);   // Load image with outlines 

    imagealphablending($image_1, true); 
    imagesavealpha($image_1, true); 

    imagetruecolortopalette($image_1, false, 255); 

    $region1 = imagecolorclosest ($image_1, 255,0,0);       // Get Primary (red) region 
    imagecolorset($image_1, $region1, $color1[0], $color1[1], $color1[2]);  // Set new colour for $region1 

    $region2 = imagecolorclosest ($image_1, 0,0,255);       // Get Secondary (blue) region 
    imagecolorset($image_1, $region2, $color2[0], $color2[1], $color2[2]);  // Set new colour for $region2 

    $merged_image = imagecreatetruecolor(339, 390);    // Create a true color canvas 

    imagecopy($merged_image, $image_1, 0, 0, 0, 0, 339, 390); // Merge the newly coloured sections 
    imagecopy($merged_image, $image_2, 0, 0, 0, 0, 339, 390); // Merge the outlines on top 

    header("Content-type: image/png");       // Tell browser to expect PNG 
    imagepng($merged_image, $outputFileName);     // Save new PNG to server 

    imagedestroy($image_1);          // Tidy up 
    imagedestroy($image_2); 
    imagedestroy($merged_image); 

    // open the image we just created in a binary mode 
    $fp = fopen($outputFileName, 'rb'); 

    // send the right headers 
    header("Content-Type: image/png"); 
    header("Content-Length: " . filesize($outputFileName)); 

    // dump the picture and stop the script 
    fpassthru($fp); 
    exit; 
} 

Answer 2

Используя приведенный выше код и добавив несколько строк jQuery, я наконец достиг своей первоначальной цели.

The JQuery:

$('select').click(function() { 
     var style = $("select#style").val(); 
     var color1 = $("select#color1").val(); 
     var color2 = $("select#color2").val(); 
     var productImgURL = 'product-image.php?style='+ style + '&color1=' + color1 + '&color2=' + color2; 
     $('.product').attr('src',productImgURL); 
    }); 

Как только выберите окно модифицируется JQuery запрашивает другое изображение из продукта-image.php путем добавления значения. Взаимодействие гладко и работает точно так, как я хотел.

Теперь мне просто нужно выяснить, как хранить сгенерированные изображения и добавить чек, чтобы узнать, были ли они уже созданы. Тогда я должен сделать все это хорошо с Drupal Commerce.

Я обновил my example page и весь код доступен для загрузки.

Хотя этот вопрос не получил никаких ответов, я бы не подумал об этом, не пробираясь по многим другим вопросам на этом сайте, поэтому спасибо всем, кто публикует здесь!