[英]how do I get the width and height values from this object in javascript
I am using dropzone and cropper to upload a file.我正在使用 dropzone 和cropper 上传文件。 I can't figure out how to reference the chosen images width and height.
我不知道如何引用所选图像的宽度和高度。
This is the relevant code:这是相关代码:
Dropzone.options.myDropzone = {
url: '{{ route('user.upload') }}',
transformFile: function(file, done) {
console.log(file);
//console.log(file[height]);
for (var property in file) {
output = property + ': ' + file[property]+'; ';
console.log(output);
}
The console.log(file) line outputs this: console.log(file) 行输出如下:
So it has the height and width.所以它有高度和宽度。
The looping through the properties of file output this:遍历文件 output 的属性:
Anyone know how to access height and width here?有人知道如何在这里访问高度和宽度吗?
Thanks.谢谢。
EDIT编辑
Thanks to @kmoser this is the code that is working now.感谢@kmoser,这是现在正在运行的代码。
transformFile: function(file, done) {
console.log(file['height']);
var width = 0;
var height = 0;
var reader = new FileReader();
reader.onload = (function(file) {
var image = new Image();
image.src = file.target.result;
image.onload = function() {
height = this.height;
width = this.width;
console.log('1 '+width);
console.log('1 '+height);
};
});
reader.readAsDataURL(file)
console.log('2 '+width);
console.log('2 '+height);
if (width > height)
{
console.log('wider');
}
else
{
console.log('tall');
}
The only issue is that the console.log('2 '+width);唯一的问题是 console.log('2 '+width); outputs before the console.log('1 '+width);
在 console.log('1 '+width); 之前输出
Can I make it wait?我可以让它等待吗?
EDIT 2编辑 2
Figured this out as well.这也想通了。
async function readFileAsDataURL(file) {
let result_base64 = await new Promise((resolve) => {
let reader = new FileReader();
reader.onload = (function(file) {
var image = new Image();
image.src = file.target.result;
image.onload = function(file) {
height = this.height;
width = this.width;
console.log('1 '+width);
console.log('1 '+height);
resolve(reader.result);
};
});
reader.readAsDataURL(file)
});
return result_base64;
}
Dropzone.options.myDropzone = {
url: '{{ route('user.upload') }}',
transformFile: async function(file, done) {
let result = await readFileAsDataURL(file);
console.log('2 '+width);
console.log('2 '+height);
if (width > height)
{
console.log('wider');
}
else
{
console.log('tall');
}
Works great!效果很好! Thanks for the help!
谢谢您的帮助!
Final Solution最终解决方案
async function readFileAsDataURL(file) {
let result_base64 = await new Promise((resolve) => {
let reader = new FileReader();
reader.onload = (function(file) {
var image = new Image();
image.src = file.target.result;
image.onload = function(file) {
height = this.height;
width = this.width;
console.log('1 '+width);
console.log('1 '+height);
resolve(reader.result);
};
});
reader.readAsDataURL(file)
});
return result_base64;
}
Dropzone.options.myDropzone = {
url: '{{ route('user.upload') }}',
transformFile: async function(file, done) {
let result = await readFileAsDataURL(file);
console.log('2 '+width);
console.log('2 '+height);
if (width > height)
{
console.log('wider');
}
else
{
console.log('tall');
}
To call the attributes use dot调用属性使用点
console.log(file.height);
To access Height and Width, you can use either of them.要访问高度和宽度,您可以使用它们中的任何一个。
console.log(file['height']);
OR或者
console.log(file.height);
Both will give same result.两者都会给出相同的结果。 Dot is used when you are sure of some value present in the attribute, while other way you can use when you are not sure whether it will be undefined or some value will be there
当您确定属性中存在某些值时使用点,而当您不确定它是否未定义或是否存在某些值时可以使用其他方式
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.