Objective.js

ImageSizeInspector

Objective

Responder
- View
  - Inspector
    - SequenceInspector
      - ImageSizeInspector

Click in the image or press the button to load a file from your disk space.

Select a JPG, PNG, GIF or SVG file. NOTE: The maximum size of the file is configured to 1Mb and the maximum width of the display to 320px.

Move the pointer of the mouse over the image to display its dimensions.

Open a folder containing images with the explorer of your file system. Drag and drop a JPG, PNG, GIF or SVG file over the image.

When an image is loaded, the width and the height are automatically adjusted to fit the image with its dimensions and its aspect ratio in the previous frame.

Edit the width or the height of the image. The other value is automatically computed to preserve the aspect ratio of the image. Try a value larger than the width or the height of the image.

Try saving on your disk and loading the logo of Chrome, of Firefox or the acronym in SVG. NOTE: An SVG doesn't have a maximum size and its dimensions depend on the maximum width of the display (320px).

ImageSizeInspector.js

function ImageSizeInspector(imageInspector, sizeInspector) {
SequenceInspector.call(this, { image: imageInspector, size: sizeInspector });
this._imageInspector = imageInspector;
this._sizeInspector = sizeInspector;
}
ImageSizeInspector.prototype = Object.create(SequenceInspector.prototype);
Object.defineProperty(SequenceInspector.prototype, 'constructor', { value: SequenceInspector, enumerable: false, writable: true });
Object.defineProperty(ImageSizeInspector.prototype, 'imageType', {
get: function() {
return this._imageInspector.type;
}
});
Object.defineProperty(ImageSizeInspector.prototype, 'imageSize', {
get: function() {
return this._imageInspector.size;
}
});
Object.defineProperty(ImageSizeInspector.prototype, 'imageWidth', {
get: function() {
return this._imageInspector.width;
}
});
Object.defineProperty(ImageSizeInspector.prototype, 'imageHeight', {
get: function() {
return this._imageInspector.height;
}
});
Object.defineProperty(ImageSizeInspector.prototype, 'size', {
get: function() {
return this._sizeInspector.get();
}
});
ImageSizeInspector.prototype.validate = function(val) {
if (typeof val !== 'object')
return false;
const { image, size } = val;
if (image === null)
return true;
if (! (Array.isArray(image) && Validator.validateImageDataURL(image[0]) && Number.isInteger(image[1]) && Number.isInteger(image[2]) && image[1] >= 0 && image[2] >= 0))
return false;
if (! (Array.isArray(size) && Number.isInteger(size[0]) && Number.isInteger(size[1]) && size[0] >= 0 && size[1] >= 0))
return false;
return true;
}
ImageSizeInspector.prototype.set = function(val) {
if (!this.validate(val))
return false;
this._adjustSizeInspector(val);
SequenceInspector.prototype.set.call(this, val);
return true;
}
ImageSizeInspector.prototype.inspectorValueChanged = function(sender) {
if (sender === this._imageInspector)
this._adjustSizeInspector(this.get());
this.nextRespondTo('inspectorValueChanged', this);
return true;
}
ImageSizeInspector.prototype._adjustSizeInspector = function(val) {
const { image, size } = val;
if (image !== null) {
const [data, maxWidth, maxHeight] = image;
const [width, height] = size;
const svg = /^data:(image\/[-.+0-9a-zA-Z]+);base64,/.exec(data)[1] === 'image/svg+xml';
this._sizeInspector.setOptions(maxWidth, maxHeight, { maxWidth: svg ? undefined : maxWidth, maxHeight: svg ? undefined : maxHeight });
if (width === 0 || height === 0)
this._sizeInspector.set([maxWidth, maxHeight]);
}
else
this._sizeInspector.setOptions(0);
}

Test

testImageSizeInspector.phtml

<?php $filetypes=array('image/jpeg', 'image/png', 'image/gif', 'image/svg+xml'); ?>
<?php $maxsize=1000000; ?>
<?php $imgsrc='/files/images/loadimage.png'; ?>
<?php $imgwidth=320; ?>
<?php $imgheight=180; ?>

<?php $id=uniqid('id'); ?>

.test_display img {
max-width: <?php echo $imgwidth; ?>px;
}

<div id="<?php echo $id; ?>" class="noprint">
<div class="ojs">
<div>
<span><button id="loadimage" type="submit" class="ojs_button narrow"><i class="fas fa-file-image"></i></button></span>
<span>
<input class="ojs_width" type="number" min="0"/> <i class="fas fa-arrows-alt-h small"></i>
<input class="ojs_height" type="number" min="0"/> <i class="fas fa-arrows-alt-v small"></i>
</span>
</div>
</div>
<div class="test_display"><img src="<?php echo $imgsrc; ?>" alt="" width="<?php echo $imgwidth; ?>" height="<?php echo $imgheight; ?>"/></div>
</div>

<?php head('javascript', '/objectivejs/Objective.js'); ?>
<?php head('javascript', '/objectivejs/Responder.js'); ?>
<?php head('javascript', '/objectivejs/View.js'); ?>
<?php head('javascript', '/objectivejs/Validator.js'); ?>
<?php head('javascript', '/objectivejs/Inspector.js'); ?>
<?php head('javascript', '/objectivejs/NumberInspector.js'); ?>
<?php head('javascript', '/objectivejs/DimensionInspector.js'); ?>
<?php head('javascript', '/objectivejs/ImageInspector.js') ?>
<?php head('javascript', '/objectivejs/SequenceInspector.js') ?>
<?php head('javascript', '/objectivejs/ImageSizeInspector.js') ?>

const container = document.querySelector('#<?php echo $id; ?>');
const display = container.querySelector('.test_display');
const filetypes = [<?php echo implode(',', array_map(function($s) { return "'$s'"; }, $filetypes)); ?>];
const imageInspector = new ImageInspector(null, { filetypes: filetypes, maxsize: <?php echo $maxsize; ?> });
imageInspector.setManagedWidget(display.querySelector('img'));
const sizeInspector = new DimensionInspector(0, 0, {minWidth: 0, minHeight: 0});
sizeInspector.setManagedWidget(container.querySelector('.ojs span+span')).resetWidget();
const inspector = new ImageSizeInspector(imageInspector, sizeInspector);

const loadimage = container.querySelector('.ojs span');
loadimage.onclick = () => imageInspector.loadImage();

objectivejs.org

ImageSizeInspector

Test

SEE ALSO

Comments

Your comment: