@chesd/rcropper
v1.0.1
Published
cropper image resize
Downloads
6
Readme
Установка
npm i @chesd/rcropper
Подключение
import '@chesd/rcropper';
Использование
<div
data-width="400" // Ширина
data-height="300" // Высота
data-save-original="false" // Сохранять ли оригинал
data-original-folder="original" // Подпапка куда сохранять оригинал
data-multi="false" // Загрузка нескольких изображений
data-multi-input-name="images" // Имя инпута, если сохраняем несколько изображений
data-input-name="image" // Имя основного инпута если 1 изображений (или 1-е изображение, когда мульти)
data-input-id="rinput2" // ID основного инпута
data-upload-url="/plugin/upload" // Путь для скачивания изображений с другого сайта
data-action="/plugin/add" // Путь для загрузки обрезанного изображения
data-img-container="#rimages2" // Контейнер для вывода фото
data-rcropper
>
</div>
// Для существующих изображений
<div
data-width="300"
data-height="300"
data-entity="App\Entity\User"
data-save-original="false"
data-original-folder="original"
data-multi="true"
data-multi-input-name="images"
data-input-name="image"
data-input-input-id="rinput"
data-upload-url="/plugin/upload"
data-action="/plugin/add"
data-img-container="#rimages"
data-rcropper
>
<div id="rimages">
<img src="/uploads/image1.jpg">
<img src="/uploads/image2.jpg">
</div>
<input type="hidden" name="image" id="rinput" value="/uploads/image1.jpg">
</div>
Пример PHP
// Загрузка изображения по URL
#[Route('/plugin/upload', name: 'plugin.upload', methods: ['GET', 'POST'])]
public function uploadImage(): JsonResponse {
$url = json_decode(file_get_contents('php://input', true));
try {
$data = file_get_contents($url);
$filename = pathinfo($url);
$base64 = 'data:image/' . $filename['extension'] . ';base64,' . base64_encode($data);
return $this->json([
'filename' => $filename['basename'],
'data' => $base64
]);
} catch(Exception $e) {
return $this->json(false);
}
}
// Загрузка обрезанного изображения
#[Route('/plugin/add', name: 'plugin.add', methods: ['GET', 'POST'])]
public function uploadAdd(): JsonResponse {
$data = json_decode(file_get_contents('php://input', true));
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') {
return $this->json(['error' => 'Invalid request']);
}
if(!$data->image) {
return $this->json(['error' => 'File upload error']);
}
$path = 'uploads/test/';
if(!is_dir($path)){
mkdir($path);
}
$dest = $path . $data->filename;
file_put_contents($dest, file_get_contents($data->image));
$copyResult = file_exists($dest);
if($data->saveOriginal) {
$path = $path . $data->originalFolder . '/';
if(!is_dir($path)){
mkdir($path);
}
file_put_contents($path . $data->filename, file_get_contents($data->originalImage));
$copyResult = file_exists($path . $data->filename);
if(!$copyResult){
unlink($dest);
return $this->json(['error' => 'Original image upload error']);
}
}
if(!$copyResult) {
return $this->json(['error' => 'File upload error']);
}
return $this->json($dest);
}