Подскажите, перерыл пол гугла, нечего не походит, может быть не так понимаю. Задача такая: Есть картинки разных размеров где то около 2000x***-5000x**** px в ширину, а мне требуется выделить фиксированный блок например на 1600x350px, выбрать курсором место сверху слева или даже уменьшить или приблизить, но строго чтобы не вылезло за рамки изображения. И все это делать в блоке допустим на 800px шириной (т.е. данный кроппинг ужать и чтоб не повлияло на пиксели при результате). Можно чтоб скрипт js выдавал высчитанные координаты, а дальше я в PHP по ним отрезал. Проблема именно в том что в основном все кропинги которые встречал работают с не большими изображениями, в общем не то на выходе получается.
1 ответ
В общем как это всегда бывает сам допер) Приложу полный код, если кто столкнется, пусть для себя чего-нибудь да почерпнут. Единственное замечу чтоб понятно было что в коде, в моем случае мне нужно 1600 на 350 px и блок в котором изображение редактировалось размером в 800 на 175, т.е. я те величины нужные мне разделил на 2. Получив удовлетворяющие меня значения не испортив результативных пропорций, другие пропорции можно решить вроде с помощью ратио и не много математики (но это уже вам на десерт, а моя задача выполнена).
<?php
if(isset($_POST['cropping'])){
if($_POST['cropping']==1){
// Кропаем
$x = $_POST['x'];
$y = $_POST['y'];
$w = $_POST['w'];
$h = $_POST['h'];
$imageIn = imagecreatefromjpeg($_FILES['image']['tmp_name']);
$imageCrop = imagecreatetruecolor($w,$h);
imageCopy($imageCrop,$imageIn,0,0,$x,$y,$w,$h);
$imageOut = imagecreatetruecolor(1600,350);
imagecopyresampled($imageOut,$imageCrop,0,0,0,0,1600,350,$w,$h);
imagejpeg($imageOut,'out.jpg',75);
imagedestroy($imageOut);
}else{
// Уменьшаем только качество, чтоб не весила 100500 мегабайт ))
$imageIn = imagecreatefromjpeg($_FILES['image']['tmp_name']);
imagejpeg($imageIn,'out.jpg',75);
imagedestroy($imageIn);
}
}
?><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" media="screen" rel="stylesheet" href="jquery.cropbox.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cropbox.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.js"></script>
</head>
<body>
<img id="cropImage" src="" />
<br>
<input type="file" id="selectFile" accept=".jpeg,.jpg" />
<br>
<button onclick="send();">send</button>
<script type="text/javascript" defer>
function send(crop = 1){
var data = new FormData();
data.append('cropping',crop);
if(crop==1){
data.append('x',$('body').data('cropX'));
data.append('y',$('body').data('cropY'));
data.append('w',$('body').data('cropW'));
data.append('h',$('body').data('cropH'));
}
data.append('image',$('#selectFile').get(0).files[0]);
$.ajax({
type: 'POST',
data: data,
processData: false,
contentType: false
});
}
(function($){
$('#selectFile').on('change',function(){
if(['image/jpeg','image/jpg'].indexOf($(this).get(0).files[0].type)==-1) {
alert('Разрешен формат только: JPG');
return;
}
var fileReader = new FileReader();
fileReader.onload = function(e){
var image = new Image();
image.onload = function(){
if(this.width==1600 && this.height==350){
// Кропать не нужно, сразу заливаем
send(0);
}else{
if(this.width>1600 && this.height>350){
$('#cropImage').attr('src',this.src);
$('#cropImage').cropbox({width:800,height:175,showControls:'auto'}).on('cropbox',function(event,results,img){
$('body').data('cropX',results.cropX);
$('body').data('cropY',results.cropY);
$('body').data('cropW',results.cropW);
$('body').data('cropH',results.cropH);
});
$('head').append($('<script>').attr('type','text/javascript').attr('src','http://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.10/hammer.js'));
}else{
// Изображение меньше заданных требований, уведомляем
alert('Изображение должно быть не менее 1600x350px');
}
}
};
image.src = e.target.result;
}
fileReader.readAsDataURL($(this).get(0).files[0]);
});
})(jQuery);
</script>
</body>
</html>
Библиотеку взял отсюда: http://www.jqueryscript.net/other/jQuery-In-Place-Image-Cropping-Plugin-cropbox.html