如何从 javascript 中的此对象获取宽度和高度值
how do I get the width and height values from this object in javascript
我正在使用 dropzone 和 cropper 上传文件。我不知道如何引用所选图像的宽度和高度。
这是相关代码:
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);
}
console.log(file) 行输出:
所以它有高度和宽度。
循环遍历文件输出的属性:
有人知道如何在这里访问高度和宽度吗?
谢谢。
编辑
感谢@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');
}
唯一的问题是 console.log('2'+width);在 console.log('1 '+width);
之前输出
我可以等一下吗?
编辑 2
也想通了。
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');
}
效果很好!感谢您的帮助!
调用属性使用点
console.log(file.height);
要访问“高度”和“宽度”,您可以使用它们中的任何一个。
console.log(file['height']);
或
console.log(file.height);
两者都会给出相同的结果。
当您确定属性中存在某些值时使用点,而当您不确定它是否未定义或是否存在某些值时可以使用其他方式
最终解决方案
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');
}
我正在使用 dropzone 和 cropper 上传文件。我不知道如何引用所选图像的宽度和高度。
这是相关代码:
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);
}
console.log(file) 行输出:
所以它有高度和宽度。
循环遍历文件输出的属性:
有人知道如何在这里访问高度和宽度吗?
谢谢。
编辑
感谢@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');
}
唯一的问题是 console.log('2'+width);在 console.log('1 '+width);
之前输出我可以等一下吗?
编辑 2
也想通了。
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');
}
效果很好!感谢您的帮助!
调用属性使用点
console.log(file.height);
要访问“高度”和“宽度”,您可以使用它们中的任何一个。
console.log(file['height']);
或
console.log(file.height);
两者都会给出相同的结果。 当您确定属性中存在某些值时使用点,而当您不确定它是否未定义或是否存在某些值时可以使用其他方式
最终解决方案
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');
}