![](/img/trans.png)
[英]How do I get the width and height of an image stored inside a javascript object?
[英]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) 行输出如下:
所以它有高度和宽度。
遍历文件 output 的属性:
有人知道如何在这里访问高度和宽度吗?
谢谢。
编辑
感谢@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');
}
效果很好! 谢谢您的帮助!
最终解决方案
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);
两者都会给出相同的结果。 当您确定属性中存在某些值时使用点,而当您不确定它是否未定义或是否存在某些值时可以使用其他方式
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.