Как можно создавать изображения, связанные с конкретными результатами?

Я учусь на своем первом уроке CS. Для нашего финала мы с моей командой хотим создать случайный образец искусства, создав несколько вопросов / входов с выходными данными, которые ссылаются на определенные изображения, которые все будут сгенерированы на холсте. Есть ли способ связать выходные данные с генерацией изображений в Javascript? Кроме того, как бы можно было назвать то, что мы пытаемся сделать, чтобы мы могли исследовать похожие проекты и как они были выполнены?

Источник

1 ответ

На этот ответ может быть несколько ответов, поскольку он довольно абстрактный, но вы ищете руководство, так что вот мое мнение:

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

Я предполагаю, что это можно назвать генератором случайных изображений или генератором, если вы хотите попробовать поискать в Google с этим.

Однако, если бы это было мной, я бы сделал это в JavaScript, выполнив определенные шаги:

  • Вам нужны файлы изображений, которые вы хотите сгенерировать, которые будут находиться в папке где-то в вашем проекте.
  • Тогда вам нужны вопросы с входами, которые, как я полагаю, лучше, если они представляют собой группу переключателей? Так что-то вроде:

<div class="questionA">
    <h4>Question A</h4>
    <input name="questionA" type="radio" value="path/toimagefile1CategoryCows.png">1
    <input name="questionA" type="radio" value="path/toimagefile2CategoryCows.png">2
    <input name="questionA" type="radio" value="path/toimagefile3CategoryCows.png">3
    <input name="questionA" type="radio" value="path/toimagefile4CategoryCows.png">4
</div>
<div class="questionB">
    <h4>Question B</h4>
    <input name="questionB" type="radio" value="path/toimagefile1CategoryChickens.png">1
    <input name="questionB" type="radio" value="path/toimagefile2CategoryChickens.png">2
    <input name="questionB" type="radio" value="path/toimagefile3CategoryChickens.png">3
    <input name="questionB" type="radio" value="path/toimagefile4CategoryChickens.png">4
</div>

Чтобы привести пример, это можно сделать разными способами.

Итак, когда пользователь выбирает любой из вопросов, у вас уже есть пути к изображениям, которые вам нужно отобразить в одно изображение, для этого вы можете использовать что-то вроде:

Или что угодно, вы можете сделать это даже с Canvas из javascript и следовать другим решениям даже в Stackru, например:

Источник
Другие вопросы по тегам