1. Des produits
  2.   Image
  3.   JavaScript
  4.   Cropper
 
  

API JavaScript pour recadrer les images

Bibliothèque JavaScript Open Source qui prend en charge le recadrage des applications JavaScript.

Le cuivre est une bibliothèque de source ouverte de JavaScript qui permet des images de culture dans votre navigateur. En utilisant les API éléments de culture améliorés, vous pouvez ajouter 27 méthodes différentes, 39 options différentes et 6 événements. À l'aide des API appareils, vous pouvez facilement travailler et produire vos images dans votre navigateur.

Cette bibliothèque fournit un soutien à un large éventail de caractéristiques de culture. Elle appuie les images de croquage par écran de contact, par ébullition, par rotation, par balayage, en utilisant du cuivre multiple, permet d'obtenir des images sur toile.

Previous Next

Premiers pas avec Cropper

La méthode recommandée pour installer le cropper via NPM. Veuillez utiliser la commande suivante pour l'installer.

Installer le recadrage via NPM

 npm install cropperjs

Recadrer les images dans les applications JavaScript

La bibliothèque du cuivre permet aux programmateurs de produire leurs images en utilisant JavaScript. Pour cultiver une image, vous devez charger l'image et veiller à ce que la taille de l'image soit parfaitement conforme au contenant. Après avoir l'image prête, vous pouvez utiliser un ensemble de caractéristiques de culture sur les coordonnées x et y données, y compris le rotatage, le bouchage, l'écartement et la largeur.

Image des cultures Sauvegarder l'image via JavaScript API

 // vars
let result = document.querySelector('.result'),
img_result = document.querySelector('.img-result'),
img_w = document.querySelector('.img-w'),
img_h = document.querySelector('.img-h'),
options = document.querySelector('.options'),
save = document.querySelector('.save'),
cropped = document.querySelector('.cropped'),
dwn = document.querySelector('.download'),
upload = document.querySelector('#file-input'),
cropper = '';
// on change show image with crop options
upload.addEventListener('change', e => {
  if (e.target.files.length) {
    // start file reader
    const reader = new FileReader();
    reader.onload = e => {
      if (e.target.result) {
        // create new image
        let img = document.createElement('img');
        img.id = 'image';
        img.src = e.target.result;
        // clean result before
        result.innerHTML = '';
        // append new image
        result.appendChild(img);
        // show save btn and options
        save.classList.remove('hide');
        options.classList.remove('hide');
        // init cropper
        cropper = new Cropper(img);
      }
    };
    reader.readAsDataURL(e.target.files[0]);
  }
});
// save on click
save.addEventListener('click', e => {
  e.preventDefault();
  let imgSrc = cropper.getCroppedCanvas({
    width: img_w.value // input value
  }).toDataURL();
  cropped.classList.remove('hide');
  img_result.classList.remove('hide');
  cropped.src = imgSrc;
  dwn.classList.remove('hide');
  dwn.download = 'imagename.png';
  dwn.setAttribute('href', imgSrc);
});

Recadrer des images dans le navigateur à l'aide de JavaScript

Vous pouvez ajouter la fonctionnalité de culture de l'image dans vos pommes et les utilisateurs peuvent produire des images directement du navigateur. Les utilisateurs peuvent télécharger ou draguer des images dans le navigateur et appliquer des caractéristiques de culture. Les API fournissent une compatibilité croisée. Les API travaux se terminent par la dernière version de Chrome, Firefox, Safari, Opera, Edge et Internet Explorer.

Images de cultures en ligne via JavaScript

 //instantiate Cropper
var cropper = canvas.cropper({
  aspectRatio: 16 / 9
});
//Crop Image
$('#btnCrop').click(function() {
  // Get a string base 64 data url
  var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png");
  $result.append( $('').attr('src', croppedImageDataURL) );
});

Utilisation des méthodes de recadrage en JavaScript

Afin d'assurer la souplesse, les API méthodes de culture des images sont utilisées. Ces méthodes aident le promoteur à ajouter facilement des caractéristiques de culture d'image à l'application. Les API fournissent la méthode utilisée pour la culture de l'image. De plus, vous pouvez utiliser le réaménagement (), le remplacement(), le permis(), la destruction(), le déplacement(), le zoom(), le rotate(), l'échelle(), getData(), setData), et plus de capcanvasData.

oom Canvas/ Ratio absolu via JavaScript

 cropper.zoomTo(1); // 1:1 (canvasData.width === canvasData.naturalWidth)
const containerData = cropper.getContainerData();
// Zoom to 50% from the center of the container.
cropper.zoomTo(.5, {
  x: containerData.width / 2,
  y: containerData.height / 2,
});
 Français