7
Vui lòng kiểm tra http://jsfiddle.net/UmJtB/18/ mã dưới đâycắt xén duyệt hình ảnh trên cửa sổ bật lên
<script type="text/javascript">
$(document).ready(function() {
$(".uploadphoto").click(function() {
if(document.getElementById('files').files.length == 0){
alert('Select an Image first');
return false;
}else {
// When upload button is pressed, load the Popupbox First
loadPopupBox();
}
$('#popupBoxClose').click(function() {
unloadPopupBox();
});
$('#container').click(function() {
unloadPopupBox();
});
function unloadPopupBox() { // TO Unload the Popupbox
$('#popup_box').fadeOut("slow");
$("#container").css({ // this is just for style
"opacity": "1"
});
}
function loadPopupBox() { // To Load the Popupbox
$('#popup_box').fadeIn("slow");
$("#container").css({ // this is just for style
"opacity": "1.5"
});
}
});
//$('.FieldRequired').attr('id','files');
// set up variables
var reader = new FileReader(),
i=0,
numFiles = 0,
imageFiles;
// use the FileReader to read image i
function readFile() {
reader.readAsDataURL(imageFiles[i])
}
// define function to be run when the File
// reader has finished reading the file
reader.onloadend = function(e) {
// make an image and append it to the div
var image = $('<img>').attr('src', e.target.result);
var imgdiv = $('#popup_box');
$(imgdiv).append(image);
// if there are more files run the file reader again
if (i < numFiles) {
i++;
readFile();
}
};
$(".uploadphoto").click(function() {
imageFiles = document.getElementById('files').files
// get the number of files
numFiles = imageFiles.length;
readFile();
});
$(function(){
$('#popup_box img').Jcrop({
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1
});
});
function showPreview(coords)
{
var rx = 100/coords.w;
var ry = 100/coords.h;
$('#preview').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>
</head>
<body>
<input type="file" value="" size="" class="Textbox FieldRequired" name="ProductFields[3]" id="files">
<input type="submit" value="upload" class="uploadphoto"/>
<div id="popup_box"> <!-- OUR PopupBox DIV-->
<canvas id="preview" style="width:150px;height:150px;overflow:hidden;"></canvas>
<a id="popupBoxClose">close</a> </div>
<div id="container"> <!-- Main Page -->
</div>
</body>
</html>
<style type="text/css">
/* popup_box DIV-Styles*/
#popup_box {
display:none; /* Hide the DIV */
position:fixed;
_position:absolute; /* hack for internet explorer 6 */
height:600px;
width:600px;
background:#FFFFFF;
left: 300px;
top: 150px;
z-index:100; /* Layering (on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
margin-left: 15px;
/* additional features, can be omitted */
border:2px solid #ff0000;
padding:15px;
font-size:15px;
-moz-box-shadow: 0 0 5px #ff0000;
-webkit-box-shadow: 0 0 5px #ff0000;
box-shadow: 0 0 5px #ff0000;
}
#popup_box img {
height:600px;
width:600px
}
#container {
background: #d2d2d2; /*Sample*/
width:100%;
height:100%;
}
a {
cursor: pointer;
text-decoration:none;
}
/* This is for the positioning of the Close Link */
#popupBoxClose {
background: url("close.png") no-repeat scroll 0 0 transparent;
color: transparent;
font-size: 20px;
line-height: 26px;
position: absolute;
right: -28px;
top: -14px;
}
</style>
Tôi tải lên hình ảnh trên cửa sổ bật lên và tôi muốn cắt hình ảnh đó, cho rằng tôi đã sử dụng JCrop. nhưng nó không hoạt động đối với tôi. Tôi muốn hiển thị hình ảnh đó trong canvas trên cửa sổ bật lên đó.Xin vui lòng giúp tôi .. Tôi gặp phải lỗi này PM Lỗi: NS_ERROR_INVALID_POINTER: Thành phần trả về mã lỗi: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMFileReader. readAsDataURL] Cảm ơn bạn trước!
Khi chạy fiddle: GET http://fiddle.jshell.net/UmJtB/14/show/jquery.Jcrop.min.js 404 (Not Found) fiddle.jshell.net/:7 GET http: //fiddle.jshell.net/UmJtB/14/show/jquery.Jcrop.js 404 (Không tìm thấy) fiddle.jshell.net/:7 Loại vô íchMỗi: Đối tượng [đối tượng đối tượng] không có phương thức 'Jcrop' fiddle.jshell .net /: 140 – urbananimal
Vâng nó đang làm việc lần đầu tiên mặc dù hình ảnh của bạn không phải là liên kết, tôi có thể làm cho nó .. nhưng những gì về lần thứ 2 ?? nó sẽ không tải nó lên. Tại sao?? nó là câu hỏi hay vấn đề thiết kế? –
@DhavalMarthak Tôi đã cập nhật mã của tôi.Vui lòng kiểm tra mã.Bởi vì thiết kế chiều rộng canvas chiều cao đang hiển thị như thế. – Rash