如何选择图像的区域进行裁剪？
Posted
技术标签:
【中文标题】如何选择图像的区域进行裁剪？【英文标题】：How to select area of an image for cropping? 【发布时间】：2018-07-17 00:01:04 【问题描述】：我正在 php Codeigniter 中进行图像裁剪，下面是我尝试过的代码。当我给出图像的路径时，代码运行良好，这意味着我可以选择要裁剪的图像区域。但是当我尝试使用用户上传的图像（用户上传图像然后裁剪）相同的代码时，我无法选择上传图像的图像区域。如何选择用户上传的图像的图像区域？我正在使用 JCrop 插件。
图像裁剪
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8">
<title>Jcrop Dynamic Avatar JS/PHP Demo</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/jquery.Jcrop.css">
<script type="text/javascript" src="js/jquery.Jcrop.js"></script>
<script type="text/javascript" src="js/cropsetup.js"></script>
</head>
<body>
<div id="wrapper">
<div class="jc">
<input type='file' name="userfile" size="20"
onchange="readURL(this);"/>
<img src="#" id="target" />
<div id="preview-pane">
<div class="preview-container">
<img src="#" class="jcrop-preview" />
</div>
</div>
<div id="form-container">
<form id="cropimg" name="cropimg" method="post" action="crop.php"
target="_blank">
<input type="hidden" id="x" name="x">
<input type="hidden" id="y" name="y">
<input type="hidden" id="w" name="w">
<input type="hidden" id="h" name="h">
<input type="submit" id="submit" value="Crop Image!">
</form>
</div>
</div>
</div>
<script>function readURL(input)
if (input.files && input.files[0])
var reader = new FileReader();
reader.onload = function (e)
$('#target')
.attr('src', e.target.result)
.width(200)
.height(200);
;
reader.readAsDataURL(input.files[0]);
</script>
</body>
</html>
PHP 代码：
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST')
$targ_w = $targ_h = 150;
$jpeg_quality = 90;
if(!isset($_POST['x']) || !is_numeric($_POST['x']))
die('Please select a crop area.');
$src = 'images/cropimg.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor($targ_w, $targ_h);
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);
header('Content-type: image/jpeg');
imagejpeg($dst_r,null,$jpeg_quality);
exit;
?>
这是 Javascript 代码：
$(function($)
var jcrop_api,
boundx,
boundy,
// Grab some information about the preview pane
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(),
ysize = $pcnt.height();
$('#target').Jcrop(
onChange: updatePreview,
onSelect: updatePreview,
bgOpacity: 0.5,
aspectRatio: xsize / ysize
,function()
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
jcrop_api = this;
$preview.appendTo(jcrop_api.ui.holder);
);
function updatePreview(c)
if (parseInt(c.w) > 0)
var rx = xsize / c.w;
var ry = ysize / c.h;
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
$pimg.css(
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
);
);
【问题讨论】：
显示你尝试过的php代码。这只是代码的一半。 我已经编辑了代码，请检查。 试试这个插件，说明：webmotionuk.com/php-jquery-image-upload-and-crop 我正在使用 ajax 显示图像，所以我想在其上制作一个裁剪区域而不提交上传按钮？ 【参考方案1】：jQuery 插件 ImageSelectArea 为我工作！ http://odyniec.net/projects/imgareaselect/
代码如下：
<html>
<link rel="stylesheet" href="css/imgareaselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/jquery.imgareaselect.js"></script>
<body>
<form action="crop.php" method="post" enctype="multipart/form-data">
Upload Image: <input type="file" name="image" id="image" />
<input type="hidden" name="x1" value="" />
<input type="hidden" name="y1" value="" />
<input type="hidden" name="w" value="" />
<input type="hidden" name="h" value="" /><br><br>
<input type="submit" name="submit" value="Submit" />
</form>
<p><img id="previewimage" style="display:none;"/></p>
</body>
<script>
jQuery(function($)
var p = $("#previewimage");
$("body").on("change", "#image", function()
var imageReader = new FileReader();
imageReader.readAsDataURL(document.getElementById("image").files[0]);
imageReader.onload = function (oFREvent)
p.attr('src', oFREvent.target.result).fadeIn();
;
);
$('#previewimage').imgAreaSelect(
onSelectEnd: function (img, selection)
$('input[name="x1"]').val(selection.x1);
$('input[name="y1"]').val(selection.y1);
$('input[name="w"]').val(selection.width);
$('input[name="h"]').val(selection.height);
);
);
</script>
</html>
【讨论】：
以上是关于如何选择图像的区域进行裁剪？的主要内容，如果未能解决你的问题，请参考以下文章