20

ImageSizeInspector

DimensionInspector  |  Validator

Objective
  • Responder
    • View
      • Inspector
        • SequenceInspector
          • ImageSizeInspector
   

Cliquez dans l'image ou appuyez sur le bouton pour charger un fichier à partir de votre espace disque.

Sélectionnez un fichier JPG, PNG, GIF ou SVG. NOTE : La taille maximum du fichier est configurée à 1MO et la largeur maximum de l'affichage à 320px.

Replacez la souris sur l'image pour afficher ses dimensions.

Ouvrez un dossier contenant des images avec l'explorateur de votre système de fichiers. Faites glisser et déposer un fichier JPG, PNG, GIF ou SVG sur l'image.

Quand une image est chargée, la largeur et la hauteur sont automatiquement ajustées pour faire entrer l'image avec ses dimensions et son rapport d'affichage dans le cadre précédent.

Éditez la largeur ou la hauteur de l'image. L'autre valeur est automatiquement calculée afin de préserver le rapport d'aspect de l'image. Essayez une valeur plus grande que la largeur ou la hauteur de l'image.

Essayez d'enregistrer sur votre disque et de charger le logo de Chrome, de Firefox ou le sigle en SVG. NOTE : Un SVG n'a pas de taille maximum et ses dimensions dépendent de la largeur maximum de l'affichage (320px).

ImageSizeInspector.js
  1. function ImageSizeInspector(imageInspector, sizeInspector) {
  2.     SequenceInspector.call(this, { image: imageInspector, size: sizeInspector });
  3.  
  4.     this._imageInspector = imageInspector;
  5.     this._sizeInspector = sizeInspector;
  6. }
  7.  
  8. ImageSizeInspector.prototype = Object.create(SequenceInspector.prototype);
  9.  
  10. Object.defineProperty(SequenceInspector.prototype, 'constructor', { value: SequenceInspector, enumerable: false, writable: true });
  11.  
  12. Object.defineProperty(ImageSizeInspector.prototype, 'imageType', {
  13.     get:    function() {
  14.                 return this._imageInspector.type;
  15.             }
  16. });
  17.  
  18. Object.defineProperty(ImageSizeInspector.prototype, 'imageSize', {
  19.     get:    function() {
  20.                 return this._imageInspector.size;
  21.             }
  22. });
  23.  
  24. Object.defineProperty(ImageSizeInspector.prototype, 'imageWidth', {
  25.     get:    function() {
  26.                 return this._imageInspector.width;
  27.             }
  28. });
  29.  
  30. Object.defineProperty(ImageSizeInspector.prototype, 'imageHeight', {
  31.     get:    function() {
  32.                 return this._imageInspector.height;
  33.             }
  34. });
  35.  
  36. Object.defineProperty(ImageSizeInspector.prototype, 'size', {
  37.     get:    function() {
  38.                 return this._sizeInspector.get();
  39.             }
  40. });
  41.  
  42. ImageSizeInspector.prototype.validate = function(val) {
  43.     if (typeof val !== 'object')
  44.         return false;
  45.  
  46.     const { image, size } = val;
  47.  
  48.     if (image === null)
  49.         return true;
  50.  
  51.     if (! (Array.isArray(image) && Validator.validateImageDataURL(image[0]) && Number.isInteger(image[1]) && Number.isInteger(image[2]) && image[1] >= 0 && image[2] >= 0))
  52.         return false;
  53.  
  54.     if (! (Array.isArray(size) && Number.isInteger(size[0]) && Number.isInteger(size[1]) && size[0] >= 0 && size[1] >= 0))
  55.         return false;
  56.  
  57.     return true;
  58. }
  59.  
  60. ImageSizeInspector.prototype.set = function(val) {
  61.     if (!this.validate(val))
  62.         return false;
  63.  
  64.     this._adjustSizeInspector(val);
  65.  
  66.     SequenceInspector.prototype.set.call(this, val);
  67.  
  68.     return true;
  69. }
  70.  
  71. ImageSizeInspector.prototype.inspectorValueChanged = function(sender) {
  72.     if (sender === this._imageInspector)
  73.         this._adjustSizeInspector(this.get());
  74.  
  75.     this.nextRespondTo('inspectorValueChanged', this);
  76.  
  77.     return true;
  78. }
  79.  
  80. ImageSizeInspector.prototype._adjustSizeInspector = function(val) {
  81.     const { image, size } = val;
  82.  
  83.     if (image !== null) {
  84.         const [data, maxWidth, maxHeight] = image;
  85.         const [width, height] = size;
  86.  
  87.         const svg = /^data:(image\/[-.+0-9a-zA-Z]+);base64,/.exec(data)[1] === 'image/svg+xml';
  88.  
  89.         this._sizeInspector.setOptions(maxWidth, maxHeight, { maxWidth: svg ? undefined : maxWidth, maxHeight: svg ? undefined : maxHeight });
  90.  
  91.         if (width === 0 || height === 0)
  92.             this._sizeInspector.set([maxWidth, maxHeight]);
  93.     }
  94.     else
  95.         this._sizeInspector.setOptions(0);
  96. }
Test
testImageSizeInspector.phtml
  1. <?php $filetypes=array('image/jpeg', 'image/png', 'image/gif', 'image/svg+xml'); ?>
  2. <?php $maxsize=1000000; ?>
  3. <?php $imgsrc='/files/images/loadimage.png'; ?>
  4. <?php $imgwidth=320; ?>
  5. <?php $imgheight=180; ?>
  1. <?php $id=uniqid('id'); ?>
  1. .test_display img {
  2.     max-width: <?php echo $imgwidth; ?>px;
  3. }
  1. <div id="<?php echo $id; ?>" class="noprint">
  2. <div class="ojs">
  3. <div>
  4. <span><button id="loadimage" type="submit" class="ojs_button narrow"><i class="fas fa-file-image"></i></button></span>
  5. <span>
  6. <input class="ojs_width" type="number" min="0"/>&nbsp;<i class="fas fa-arrows-alt-h small"></i>
  7. <input class="ojs_height" type="number" min="0"/>&nbsp;<i class="fas fa-arrows-alt-v small"></i>
  8. </span>
  9. </div>
  10. </div>
  11. <div class="test_display"><img src="<?php echo $imgsrc; ?>" alt="" width="<?php echo $imgwidth; ?>" height="<?php echo $imgheight; ?>"/></div>
  12. </div>
  1. <?php head('javascript', '/objectivejs/Objective.js'); ?>
  2. <?php head('javascript', '/objectivejs/Responder.js'); ?>
  3. <?php head('javascript', '/objectivejs/View.js'); ?>
  4. <?php head('javascript', '/objectivejs/Validator.js'); ?>
  5. <?php head('javascript', '/objectivejs/Inspector.js'); ?>
  6. <?php head('javascript', '/objectivejs/NumberInspector.js'); ?>
  7. <?php head('javascript', '/objectivejs/DimensionInspector.js'); ?>
  8. <?php head('javascript', '/objectivejs/ImageInspector.js') ?>
  9. <?php head('javascript', '/objectivejs/SequenceInspector.js') ?>
  10. <?php head('javascript', '/objectivejs/ImageSizeInspector.js') ?>
  1. const container = document.querySelector('#<?php echo $id; ?>');
  2.  
  3. const display = container.querySelector('.test_display');
  4.  
  5. const filetypes = [<?php echo implode(',', array_map(function($s) { return "'$s'"; }, $filetypes)); ?>];
  6.  
  7. const imageInspector = new ImageInspector(null, { filetypes: filetypes, maxsize: <?php echo $maxsize; ?> });
  8.  
  9. imageInspector.setManagedWidget(display.querySelector('img'));
  10.  
  11. const sizeInspector = new DimensionInspector(0, 0, {minWidth: 0, minHeight: 0});
  12.  
  13. sizeInspector.setManagedWidget(container.querySelector('.ojs span+span')).resetWidget();
  14.  
  15. const inspector = new ImageSizeInspector(imageInspector, sizeInspector);
  1. const loadimage = container.querySelector('.ojs span');
  2.  
  3. loadimage.onclick = () => imageInspector.loadImage();
VOIR AUSSI

ImageInspector, DimensionInspector, SequenceInspector, Écrire des données sur un serveur

Commentaires

Votre commentaire :
[p] [b] [i] [u] [s] [quote] [pre] [br] [code] [url] [email] strip aide 2000

Entrez un maximum de 2000 caractères.
Améliorez la présentation de votre texte avec les balises de formatage suivantes :
[p]paragraphe[/p], [b]gras[/b], [i]italique[/i], [u]souligné[/u], [s]barré[/s], [quote]citation[/quote], [pre]tel quel[/pre], [br]à la ligne,
[url]http://www.izend.org[/url], [url=http://www.izend.org]site[/url], [email]izend@izend.org[/email], [email=izend@izend.org]izend[/email],
[code]commande[/code], [code=langage]code source en c, java, php, html, javascript, xml, css, sql, bash, dos, make, etc.[/code].