裁剪图像无法正常工作,裁剪了错误的部分
Jcrop Cropping images does not work properly, wrong sections are being cropped
我使用jcrop裁剪图像。以下代码包含客户端代码,该代码将图像与坐标一起发送到服务器端进行裁剪。据我了解,jcrop代码看起来很好,但没有返回正确的结果。
为此工作了几个小时,但没有任何成功。搜索谷歌等,但没有成功。任何帮助将不胜感激。
<html>
<form id="frm1" action="jcropServer.php" method="post" enctype="multipart/form-data" >
<img id="img1"/>
<label> <input type="text" size="4" id="x" name="x" /></label>
<label><input type="text" size="4" id="y" name="y" /></label>
<label> <input type="text" size="4" id="x2" name="x2" /></label>
<label> <input type="text" size="4" id="y2" name="y2" /></label>
<label> <input type="text" size="4" id="w" name="w" /></label>
<label> <input type="text" size="4" id="h" name="h" /></label>
<input type="file" name="fileToUpload" id="fileToUpload" onchange="readURL(this)">
<input type="submit" value="Upload Image" name="submit">
</form>
<script>
function readURL(input) {
if(document.getElementById("fileToUpload").value != "") {
if ($('#img1').data('Jcrop')) {
$('#img1').data('Jcrop').destroy();
}
}
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img1').attr('src',e.target.result);
$('#img1').Jcrop({
aspectRatio: 1,
onChange: showCoords,
onSelect: showCoords,
});
}
reader.readAsDataURL(input.files[0]);
}
}
function showCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
};
</script>
</html>
<?php
if(isset($_FILES['fileToUpload'])){
$namecv=$_FILES['fileToUpload']['name'];
move_uploaded_file($_FILES['fileToUpload']['tmp_name'],"shared/cv/".$namecv);
}
$targ_w = $targ_h = 150;
$jpeg_quality = 90;
$src='shared/cv/'.$_FILES['fileToUpload']['name'];
$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);
?>
我遇到了同样的问题。一个可能的原因是由于客户端的图像大小调整(显式或隐式)而导致坐标更改。选择后,您需要固定比率:
$('#img1').Jcrop({
onSelect: function (coords) {
// fix crop size: find ratio dividing current per real size
var ratioW = $('#img1')[0].naturalWidth / $('#img1').width();
var ratioH = $('#img1')[0].naturalHeight / $('#img1').height();
var currentRatio = Math.min(ratioW, ratioH);
$('#x').val(Math.round(coords.x * currentRatio));
$('#y').val(Math.round(coords.y * currentRatio));
$('#w').val(Math.round(coords.w * currentRatio));
$('#h').val(Math.round(coords.h * currentRatio));
}
});
如果您需要它们(似乎并非如此),请不要忘记修复 x2 和 y2。此外,还可以优化选择器。
我遇到了同样的问题,浪费了很多时间。我正在设置我的高度和宽度
<img>
标记。我相信您可能正在为
<img id="img1"/>
img 标签的这种手动大小设置会导致 jcrop 获得相对于 0,0 的错误坐标。希望对您有所帮助。
相关文章:
- Node.js v6.2.0类扩展不是函数错误
- Jquery菜单操作不稳定,定位不正确,存在一般错误
- document.open/document.write没有正确地清除chrome中的文档——这是chrome的错误吗
- 试图在引导模式内动态生成图表,得到offsetWidth错误
- 为什么会出现错误;未捕获的类型错误:undefined不是函数;
- 我如何修复包含在captcha的addthis中的错误
- 同样,同样的错误'ahorcado.js:26未捕获类型错误:无法读取属性'beginPath'
- 节点是否需要模块传递带有方括号的arg?这是个错误吗
- Webpack/Rect:遵循egghead.io教程,但出现错误:您可能需要一个合适的加载程序来处理此文件类型
- CKFinder 3为所选文件返回错误的URL
- 同位素库错误:未捕获错误无布局模式包装生产线8
- 铬:“;未捕获的语法错误:意外的标记:"
- Jcrop&画布:裁剪区域的大小很奇怪;500内部服务器错误
- 裁剪图像无法正常工作,裁剪了错误的部分
- 图像转换错误裁剪
- Javascript图像裁剪画布错误
- Jquery插件Croppie裁剪图像错误
- Wordpress图像裁剪器JS错误
- filepicker.io JS API v2使用裁剪UI在pick调用之后转换调用时出现错误142
- javascript代码中的错误迭代裁剪函数