我正在构建一个图像调整大小/裁剪,我想在他们用模态(bootstrap)编辑它之后显示一个实时预览。我相信这应该可行,但我在console.log中得到0。这需要将原始图像的宽度和高度输入另一个脚本(我将在之后执行,现在只需要它们在console.log /变量中)
function doProfilePictureChangeEdit(e) {
var files = document.getElementById('fileupload').files[0];
var reader = new FileReader();
reader.onload = (function(theFile) {
document.getElementById('imgresizepreview').src = theFile.target.result;
document.getElementById('profilepicturepreview').src = theFile.target.result;
}
);
reader.readAsDataURL(files);
var imagepreview = document.getElementById('imgresizepreview');
console.log(imagepreview.offsetWidth);
$('img#imgresizepreview').imgAreaSelect({
handles: true,
enable: true,
aspectRatio: "1:1",
onSelectEnd: preview
});
$('#resizeprofilepicturemodal').modal('show');
};
您必须等待图像加载。尝试处理.onload
中的元素。
我还简化了将两个元素的源设置为应该如何操作的过程(使用jQuery)。
reader.onload = (function(theFile) {
var image = new Image();
image.src = theFile.target.result;
image.onload = function() {
// access image size here
console.log(this.width);
$('#imgresizepreview, #profilepicturepreview').attr('src', this.src);
};
});
对我来说奥斯汀的解决方案没有用,所以我提出了一个适合我的方案:
var reader = new FileReader;
reader.onload = function() {
var image = new Image();
image.src = reader.result;
image.onload = function() {
alert(image.width);
};
};
reader.readAsDataURL(this.files[0]);
如果你发现image.src = reader.result;
的任务发生在image.onload有线之后,我也是这么认为的。
这是我对AngularJS的方式
fileReader.readAsDataUrl($scope.file, $scope).then(function(result) {
var image = new Image();
image.src = result;
image.onload = function() {
console.log(this.width);
};
$scope.imageSrc = result; //all I wanted was to find the width and height
});
这是一个答案,受到Austin Brunkhorst的启发,如果您想在代码中的其他地方重用该函数,可以使用回调来确定图像大小。
fileControl
被假定为jQuery元素。
function didUploadImage(fileControl) {
// Render image if file exists.
var domFileControl = fileControl[0];
if (domFileControl.files && domFileControl.files[0]) {
// Get first file.
var firstFile = domFileControl.files[0];
// Create reader.
var reader = new FileReader();
// Notify parent when image read.
reader.onload = function(e) {
// Get image URL.
var imageURL = reader.result;
// Get image size for image.
getImageSize(imageURL, function(imageWidth, imageHeight) {
// Do stuff here.
});
};
// Read image from hard disk.
reader.readAsDataURL(firstFile);
// Print status.
console.log("Uploaded image: " + firstFile.name);
}
}
function getImageSize(imageURL, callback) {
// Create image object to ascertain dimensions.
var image = new Image();
// Get image data when loaded.
image.onload = function() {
// No callback? Show error.
if (!callback) {
console.log("Error getting image size: no callback. Image URL: " + imageURL);
// Yes, invoke callback with image size.
} else {
callback(this.naturalWidth, this.naturalHeight);
}
}
// Load image.
image.src = imageURL;
}