Блог

Главная - Вопросы по программированию - Пропорциональная обрезка изображения

Пропорциональная обрезка изображения

#javascript #php #image #crop

#javascript #php #изображение #обрезка

Вопрос:

Я пытаюсь создать профиль и выбрать изображение обложки. Я нашел это видео. И интегрировал эту систему в свой веб-сайт. Но есть проблема, с которой я никак не мог разобраться. Изображение обрезается по разрешению области выделения. (Например, вы пытаетесь сделать его отзывчивым. И увеличил разрешение области выделения до 100×100, чтобы соответствовать экрану мобильного устройства. При применении он обрезает изображение в разрешении 100×100.).

Я хочу, чтобы область выделения представляла желаемое разрешение изображения, но другого размера. (Например, я хочу обрезанное изображение размером 512×512. Но в поле выбора оно должно быть 100×100 или 200×200 пикселей для адаптивного веб-сайта) Как я могу это сделать?

Это область выделения.

область выделения

Вот index.php код; нажмите

Вот upload.php

 <?php

//upload.php

if(isset($_POST["image"]))
{
 $data = $_POST["image"];

 $image_array_1 = explode(";", $data);

 $image_array_2 = explode(",", $image_array_1[1]);

 $data = base64_decode($image_array_2[1]);

 $imageName = time() . '.png';

 file_put_contents($imageName, $data);

 echo '<img src="'.$imageName.'" class="img-thumbnail" />';
}

?>

Вот croppie.js
щелчок

Комментарии:

1. Поле выбора??

2. В result обещании есть size опция, и установка этого значения "original" приведет к обрезке изображения, но не к изменению размера. Это означает, что если ваше поле выбора имеет квадратную форму, вы получите квадратное изображение произвольного размера, в зависимости от уровня масштабирования и исходного размера. Это может быть изображение размером 77×77 или изображение размером 678×678. Изменение размера до 512×512 (независимо от того, насколько разумно), конечно, легко возможно с помощью imagescale ()

3. @NalinNishant Извините, я забыл описать. Я добавил его изображение.

4. @ChrisG Но это всегда дает мне изображение размером с поле выбора. Независимо от уровня масштабирования. Результат всегда 100×100.

5. Предполагается, что это должно быть внутри вопроса, но я уже нашел соответствующий вариант. Как я уже сказал, вам нужно size: "original" вместо size: "viewport" . Вот пример кода: jsfiddle.net/ramkh4y7