是否有JavaScript或jQuery API或方法来获取页面上图像的尺寸?
当前回答
在我的例子中,我有一个File类型(保证是一个图像),我想要图像的尺寸,而不是将其加载到DOM上。
一般策略:将文件转换为ArrayBuffer→将ArrayBuffer转换为base64字符串→使用此作为image类的图像源→使用naturalHeight和naturalWidth来获取维度。
const fr = new FileReader();
fr.readAsArrayBuffer(image); // Image the 'File' object
fr.onload = () => {
const arrayBuffer: ArrayBuffer = fr.result as ArrayBuffer;
// Convert to base64. String.fromCharCode can hit a stack overflow error if you pass
// the entire arrayBuffer in, and iteration gets around this
let binary = '';
const bytes = new Uint8Array(arrayBuffer);
bytes.forEach(b => binary += String.fromCharCode(b));
const base64Data = window.btoa(binary);
// Create an image object. Note, a default width/height MUST be given to the constructor (per
// the documentation) or naturalWidth/Height will always return 0.
const imageObj = new Image(100, 100);
imageObj.src = `data:${image.type};base64,${base64Data}`;
imageObj.onload = () => {
console.log(imageObj.naturalWidth, imageObj.naturalHeight);
}
}
这允许您从文件中获得图像尺寸和纵横比,而无需渲染它。它可以使用fromEvent轻松地将onload函数转换为RxJS Observables,以获得更好的异步体验:
// fr is the file reader, and this is the same as fr.onload = () => { ... }
fromEvent(fr, 'load')
其他回答
我认为这可能对2019年使用JavaScript和/或TypeScript的人有所帮助。
我发现以下内容是不正确的,就像一些人认为的那样:
let img = new Image();
img.onload = function() {
console.log(this.width, this.height) // Error: undefined is not an object
};
img.src = "http://example.com/myimage.jpg";
这是正确的:
let img = new Image();
img.onload = function() {
console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg";
结论:
在onload函数中使用img,而不是this。
让我们将在这里学到的所有内容组合成一个简单的函数(imageDimensions())。它使用承诺。
// helper to get dimensions of an image const imageDimensions = file => new Promise((resolve, reject) => { const img = new Image() // the following handler will fire after a successful loading of the image img.onload = () => { const { naturalWidth: width, naturalHeight: height } = img resolve({ width, height }) } // and this handler will fire if there was an error with the image (like if it's not really an image or a corrupted one) img.onerror = () => { reject('There was some problem with the image.') } img.src = URL.createObjectURL(file) }) // here's how to use the helper const getInfo = async ({ target: { files } }) => { const [file] = files try { const dimensions = await imageDimensions(file) console.info(dimensions) } catch(error) { console.error(error) } } <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script> Select an image: <input type="file" onchange="getInfo(event)" /> <br /> <small>It works offline.</small>
jQuery的答案:
$height = $('#image_id').height();
$width = $('#image_id').width();
尼基·德·梅耶要了一张背景照片;我只是从CSS内容中获取它,并替换“url()””:
var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '$1');
var img = new Image();
img.src = url;
console.log('img:', img.width + 'x' + img.height); // Zero, image not yet loaded
console.log('div:', div.width() + 'x' + div.height());
img.onload = function() {
console.log('img:', img.width + 'x' + img.height, (img.width/div.width()));
}
简单地说,您可以像这样进行测试。
<script>
(function($) {
$(document).ready(function() {
console.log("ready....");
var i = 0;
var img;
for(i=1; i<13; i++) {
img = new Image();
img.src = 'img/' + i + '.jpg';
console.log("name : " + img.src);
img.onload = function() {
if(this.height > this.width) {
console.log(this.src + " : portrait");
}
else if(this.width > this.height) {
console.log(this.src + " : landscape");
}
else {
console.log(this.src + " : square");
}
}
}
});
}(jQuery));
</script>