Я разработал функцию для искажения PNG-логотипа с помощью dragpoints (используя эту функцию: http://codepen.io/fta/pen/ifnqH). Сам логотип представляет собой изображение внутри div с перетаскиванием.
Этот логотип может быть позже сгенерирован как изображение с использованием PHP + Image Magick с использованием модуля Imagick. Логотип может быть круглой, узкой или любой формы, но изображение всегда имеет соотношение 1: 1 (например, 800×800), заполненное прозрачностью.
Теперь к проблеме:
Я всегда не хотел, чтобы логотип имел соотношение 1: 1 относительно того, насколько широкая или узкая область перетаскивания (я не хочу, чтобы сам логотип растягивался). Хотя само изображение может быть искажено.
Изображение вверху иллюстрирует, как это работает сейчас, а изображение внизу, как я хочу, чтобы это работало
http://i.stack.imgur.com/Ev0H8.jpg
Самое главное, это должно работать на сгенерированном изображении, используя Image Magick + PHP. Если это возможно, чтобы заставить его работать на стороне клиента, используя dragpoints … это бонус.
Я знаю, как получить реальный размер логотипа, используя $image->trimImage(0);
Я должен каким-то образом быть в состоянии заполнить края изображения с дополнительной прозрачностью (ось X или Y), чтобы компенсировать растяжение, но это только пока я пришел.
Это моя PHP-функция для растягивания или масштабирования логотипа.
public function generate($file, $watermark, $offset = array()) {
$file = rtrim(DIR_IMAGE . str_replace(array('../', '..\\', '..'), '', $file));
$watermark = rtrim(DIR_IMAGE . str_replace(array('../', '..\\', '..'), '', $watermark));
$width = (int)$this->config->get('config_image_popup_width');
$height = (int)$this->config->get('config_image_popup_height');
if (is_file($file) && is_file($watermark)) {
$top = (int)$offset['top'];
$left = (int)$offset['left'];
$opacity = (float)$offset['opacity'];
$new_width = (int)$offset['width'];
$new_height = (int)$offset['height'];
$topleft_y = (float)$offset['transform_topleft_y'];
$topleft_x = (float)$offset['transform_topleft_x'];
$topright_y = (float)$offset['transform_topright_y'];
$topright_x = (float)$offset['transform_topright_x'];
$bottomleft_y = (float)$offset['transform_bottomleft_y'];
$bottomleft_x = (float)$offset['transform_bottomleft_x'];
$bottomright_y = (float)$offset['transform_bottomright_y'];
$bottomright_x = (float)$offset['transform_bottomright_x'];
$image = new ImageMagick($file);
$watermark = new ImageMagick($watermark);
// Resize the product image
$image->resize($width, $height);
// Perspective has not changed, scale only
if ($topleft_y == 0 && $topleft_x == 0 && $topright_y == 0 && $bottomleft_x == 0 && $topright_x == $bottomleft_y && $bottomleft_y == $bottomright_y && $bottomright_y == $bottomright_x) {
$watermark->scale($new_width, $new_height);
} else {
$watermark->perspective($offset);
}
$watermark->opacity($opacity);
$image->composite($watermark->get(), $left, $top);
return $image->base64output(100);
}
Задача ещё не решена.
Других решений пока нет …