Я работаю над проектом, в котором пользователь будет выбирать различные прозрачные изображения в формате png, которые будут накладываться друг на друга с помощью z-index. Пользователь сможет изменить цвет изображения на каждом слое, а затем он будет объединен с помощью GD и сохранен на сервере. Вместо использования ползунка HSL, я бы предпочел использовать карты градиента, поскольку изображения в оттенках серого, и я могу сделать более привлекательный выбор цвета, используя это (фиолетовый, розовый к желтому вместо мутного ярко-розового)
Действия по наложению изображений и их сохранению уже были написаны на PHP моим другом. Я просто пытаюсь выяснить пользовательский интерфейс на стороне клиента, а не рендерить все на сервере. Библиотеки изображений PHP имеют эту функцию, но она будет очень медленной и хуже, если будет много пользователей. Поэтому я подумал, что Javascript будет лучшим способом справиться с этим. К сожалению, я все еще новичок в этом. Но я нашел много ресурсов и добился небольшого успеха.
Я попробовал Gradientmaps.js , и я смог настроить его так, чтобы он делал именно то, что я хочу, до того, как раскрасить определенное изображение и иметь общий пользовательский интерфейс, который мне бы хотелось. Однако прозрачные пиксели выглядят так, как будто они черные, а полупрозрачные пиксели сглажены. (посмотрите, что он здесь делает)
Я нашел этот ответ о Глобальных составных операциях , который объясняет, как использовать исходное изображение в качестве маски, и я думаю, что это было бы моим решением этой проблемы.
Я просто не уверен, как это осуществить. Приведенная выше ссылка хочет все на холсте, а изображения вызываются через DOM. Но буквально тысячи изображений будут сохранены в базе данных, и не все будут использоваться тем или иным пользователем. Я не думаю, что это будет эффективно?
Может быть, есть другой способ обрезать изображение? Любые предложения, особенно когда речь идет о скорости / эффективности?
Спасибо!