上傳後的裁剪圖片

這是我的圖片上傳代碼，現在我想裁剪選定的圖片。上傳後的裁剪圖片

請幫我裁剪選定的圖像。

我對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

上傳後的裁剪圖片

回答

相關問題