上传后的裁剪图片

这是我的图片上传代码，现在我想裁剪选定的图片。上传后的裁剪图片

请帮我裁剪选定的图像。

我对croping最大渔政船是145X190像素

我的图片上传代码

此：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI Tooltip - Default functionality</title> 
<script src="http://deepliquid.com/projects/Jcrop/js/jquery.min.js"></script> 
     <script src="http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js"></script> 
     <link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/css/jquery.Jcrop.css" type="text/css" /> 
     <link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/demos/demo_files/demos.css" type="text/css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css"> 
<script > 
$(function() { 
function readImage(file) { 

    var reader = new FileReader(); 
    var image = new Image(); 
    var maxw = 600; 
    var maxh = 600; 

    reader.readAsDataURL(file); 
    reader.onload = function (_file) { 
     image.src = _file.target.result; // url.createObjectURL(file); 
     image.onload = function() { 
      var w = this.width, 
       h = this.height, 
       t = file.type, // ext only: // file.type.split('/')[1], 
       n = file.name, 
       s = ~~ (file.size/1024) + 'KB'; 
      if ( h > maxh || w > maxw) { 
       alert("Height and width is bigger then over max criteria pls select image max height and width           =2024X2024"); 
       alert(w); 
       alert(h); 
      } else { 
alert(w); 
       alert(h); 

       $('#uploadPreview').html('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>'); 
      } 

     }; 
     image.onerror = function() { 
      alert('Invalid file type: ' + file.type); 
     }; 
    }; 

} 

$("#choose").change(function (e) { 
    if (this.disabled) return alert('File upload not supported!'); 
    var F = this.files; 
    if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]); 
}); 

$(function(){ 

    $('image.src').Jcrop({ 
     onChange: showPreview, 
     onSelect: showPreview, 
     aspectRatio: 1 
    }); 

}); 

function showPreview(coords) 
{ 
    var rx = 100/coords.w; 
    var ry = 100/coords.h; 

    $('#uploadPreview1').css({ 
     width: Math.round(rx * 500) + 'px', 
     height: Math.round(ry * 370) + 'px', 
     marginLeft: '-' + Math.round(rx * coords.x) + 'px', 
     marginTop: '-' + Math.round(ry * coords.y) + 'px' 
    }); 
} 

}); 




</script> 



<style> 



</style> 
</head> 
<body > 
<input type="file" id="choose" multiple="multiple" /> 
<br> 
<div id="uploadPreview" ></div> 
<div id="uploadPreview1" ></div> 


</body> 
</html>

现在我想裁剪你明白我的代码image.hope。

来源

2013-12-16 sonalgoyal

这不是“请为我代码”网站。 – moonwave99

我为此第一次尝试.. – sonalgoyal

你已经导入了jquery.min，所以你不必再导入“jquery-1.9.1.js”。除此之外，您可能需要在创建图像标签后立即调用Jcrop。我修改了你的代码，我能够裁剪上传的图片。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI Tooltip - Default functionality</title> 
<script src="http://deepliquid.com/projects/Jcrop/js/jquery.min.js"></script> 
     <script src="http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js"></script> 
     <link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/css/jquery.Jcrop.css" type="text/css" /> 
     <link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/demos/demo_files/demos.css" type="text/css" /> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css"> 
<script > 
$(function() { 
function readImage(file) { 

    var reader = new FileReader(); 
    var image = new Image(); 
    var maxw = 600; 
    var maxh = 600; 

    reader.readAsDataURL(file); 
    reader.onload = function (_file) { 
     image.src = _file.target.result; // url.createObjectURL(file); 
     image.onload = function() { 
      var w = this.width, 
       h = this.height, 
       t = file.type, // ext only: // file.type.split('/')[1], 
       n = file.name, 
       s = ~~ (file.size/1024) + 'KB'; 
      if ( h > maxh || w > maxw) { 
       alert("Height and width is bigger then over max criteria pls select image max height and width           =2024X2024"); 
       alert(w); 
       alert(h); 
      } else { 
       alert(w); 
       alert(h); 
       $('#uploadPreview').html('<img id="myImage" src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>'); 
       $('#myImage').Jcrop({ 
        onChange: showPreview, 
        onSelect: showPreview, 
        aspectRatio: 1 
       }); 
      } 

     }; 
     image.onerror = function() { 
      alert('Invalid file type: ' + file.type); 
     }; 
    }; 

} 

$("#choose").change(function (e) { 
    if (this.disabled) return alert('File upload not supported!'); 
    var F = this.files; 
    if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]); 
}); 


function showPreview(coords) 
{ 
    var rx = 100/coords.w; 
    var ry = 100/coords.h; 

    $('#uploadPreview1').css({ 
     width: Math.round(rx * 500) + 'px', 
     height: Math.round(ry * 370) + 'px', 
     marginLeft: '-' + Math.round(rx * coords.x) + 'px', 
     marginTop: '-' + Math.round(ry * coords.y) + 'px' 
    }); 
} 

}); 




</script> 



<style> 



</style> 
</head> 
<body > 
<input type="file" id="choose" multiple="multiple" /> 
<br> 
<div id="uploadPreview" ></div> 
<div id="uploadPreview1" ></div> 


</body> 
</html>

来源

2013-12-16 13:29:21 Hammam

谢谢它的工作，但我想显示在新的div的选定区域 – sonalgoyal

在哪个标签我显示在img或div的预览？ – sonalgoyal

如果你想创建裁剪图像的预览，那么你必须定义一个图像标签显示将裁剪尺寸应用到其父div后的原始图像。检查[本示例来自jcrop站点]（http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail） – Hammam

虽然我还没有理解你的完整代码，但看起来你还没有实现裁剪功能。纠正我，如果我错了。但为了实现裁剪，您可以使用JQuery插件Jcrop。

让我知道我是否误解了您的查询。

来源

2013-12-16 12:41:25

我知道jcrop的概念，但无法与我的代码集成。 – sonalgoyal

你有没有试过jcrop自带的例子。 –

是的，我试过，但不能实现的功能:( – sonalgoyal

上传后的裁剪图片

回答

相关问题