在img區域選擇，我想要顯示在新的選定圖像div

我正在創建一個圖像選擇區域，我想顯示所選圖像在一個新的div。在img區域選擇，我想要顯示在新的選定圖像div

我嘗試：

<!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; 
var thumbWidth = 145, thumbHeight = 190; 
    $('#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' 
    }); 
} 

$('div#uploadPreview').attr('src', image) 
     .css({ 
      float: 'right', 
      position: 'relative', 
      overflow: 'hidden', 
      width: thumbWidth + 'px', 
        height: thumbHeight + 'px' 
     }) 
     .insertAfter($('#uploadPreview1')); 



    $('#uploadPreview1').imgAreaSelect({aspectRatio: '1:1', onSelectChange: preview ,minWidth: 100,minHeight: 100,maxWidth: 180,maxHeight: 180}); 

});  

</script> 

<style> 



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

    <img src="" id="uploadPreview1" /><br> 

</body> 
</html>

首先，我上傳圖片然後檢查的圖像的最小標準。

如果圖像通過了標準，我就會在頁面上顯示它。然後我選擇一個區域來創建縮略圖。

但是，當我選擇圖像的某個區域時，我無法在新的div中顯示選定區域。

來源

2013-12-17 user3102009

演示非常有用：http：//jsbin.com/aBiNIDu/1/edit –

無法看到選定的圖像區域。只顯示div邊框.. – user3102009

我修正了演示。 –

試試這個：

function preview(img, selection) { 
    var scaleX = 100/(selection.width || 1); 
    var scaleY = 100/(selection.height || 1); 

    $('#ferret + div > img').css({ 
     width: Math.round(scaleX * 400) + 'px', 
     height: Math.round(scaleY * 300) + 'px', 
     marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
     marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
    }); 
} 

$(document).ready(function() { 
    $('<div><img src="ferret.jpg" style="position: relative;" /><div>') 
     .css({ 
      float: 'left', 
      position: 'relative', 
      overflow: 'hidden', 
      width: '100px', 
      height: '100px' 
     }) 
     .insertAfter($('#ferret')); 

    $('#ferret').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview }); 
});

從here

來源

2013-12-17 09:09:16

我已經試過了，但無法與我的代碼整合。這是在我的代碼中提到的 – user3102009

你不包括jQuery imgAreaSelect庫首先得到，然後你應該在DIV包裝你uploadPreview1圖像。而更多的在你應該定義這些變量gloabally，而不是在函數內部在readImage功能var image = new Image(); 在showPreview功能

，並在此行var thumbWidth = 145, thumbHeight = 190;

$('#uploadPreview1').imgAreaSelect({aspectRatio: '1:1', onSelectChange: preview ,minWidth: 100,minHeight: 100,maxWidth: 180,maxHeight: 180});

您致電preview函數，而不是showPreview

來源

2013-12-18 02:37:58

在img區域選擇，我想要顯示在新的選定圖像div

回答

相關問題