Comment utiliser Layui pour implémenter la fonction de recadrage d'image par glisser-déposer

Comment utiliser Layui pour implémenter la fonction de recadrage d'image par glisser-déposer

Avec le développement rapide de l'Internet mobile, la fonction de recadrage d'image est largement utilisée dans divers produits. Pour implémenter la fonction de recadrage d'image par glisser-déposer, nous pouvons utiliser Layui, un excellent framework de développement front-end, pour simplifier le processus de développement. Cet article expliquera comment utiliser Layui pour implémenter la fonction de recadrage d'image déplaçable et donnera des exemples de code spécifiques.

1. Présentation du framework Layui et des bibliothèques associées

Avant d'implémenter la fonction de recadrage d'image déplaçable, nous devons d'abord présenter le framework Layui et les bibliothèques associées. Tout d'abord, ajoutez le code suivant dans la balise

du fichier HTML :

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>

2. Créer une structure HTML

Ensuite, nous devons créer une structure HTML pour afficher l'image et la zone de recadrage. Ajoutez le code suivant dans la balise

 :

<div class="demo" style="margin:20px;">
  <div class="layui-upload">
    <button type="button" class="layui-btn" id="upload">上传图片</button>
    <button type="button" class="layui-btn" id="cut">裁剪图片</button>
  </div>
  <div class="layui-upload-img" id="image-container"></div>
  <div class="layui-row layui-col-space10" id="crop-container"></div>
</div>

3. Écrivez du code JavaScript

Dans la structure HTML, nous avons ajouté des boutons pour télécharger des images et recadrer des images, ainsi qu'un conteneur pour afficher les images (l'identifiant est image-container ). et le conteneur utilisé pour afficher la zone de recadrage (l'identifiant est crop-container). Ensuite, nous devons écrire du code JavaScript pour implémenter les fonctions de téléchargement, d'affichage et de recadrage des images. Ajoutez le code suivant dans la balise <script> : </script>

layui.use('upload', function(){
  var upload = layui.upload;

  //执行实例
  var uploadInst = upload.render({
    elem: '#upload',
    url: '/upload/',
    done: function(res){
      //上传完毕回调
      if(res.code == 0){
        //显示图片
        $("#image-container").html('<img  src="' + res.data.src + '" class="layui-upload-img" alt="Comment utiliser Layui pour implémenter la fonction de recadrage d'image par glisser-déposer" >');
        //裁剪图片
        initCrop(res.data.src);
      }
    }
  });
});

//初始化裁剪框
function initCrop(src) {
  layui.use(['slider', 'cropper'], function(){
    var slider = layui.slider, cropper = layui.cropper;

    //添加裁剪框
    $("#crop-container").html('<div id="crop"></div>');

    //创建实例
    var cropperInst = cropper.render({
      elem: '#crop',
      imgSrc: src,
      area: ['400px', '400px'],
      done: function(res){
        //裁剪完毕回调
        console.log(res);
      }
    });
  });
}

//裁剪图片
function cropImage() {
  layui.use('cropper', function(){
    var cropper = layui.cropper;
    //获取裁剪结果
    var result = cropper.getData('#crop');
    console.log(result);
  });
}

4. Ajouter des styles

Enfin, nous devons ajouter quelques styles pour embellir la page. Ajoutez le code suivant dans la balise

.demo {
  width: 600px;
}

.layui-upload {
  margin-bottom: 10px;
}

.layui-upload-img {
  margin: 10px 0;
}

#crop {
  margin-top: 10px;
}

À ce stade, nous avons terminé l'écriture du code permettant d'utiliser Layui pour implémenter la fonction de recadrage d'image par glisser-déposer. Ensuite, nous devons configurer le code côté serveur pour recevoir l'image téléchargée et renvoyer l'image recadrée.

Résumé :

Cet article présente comment utiliser le framework Layui pour implémenter la fonction de recadrage d'image par glisser-déposer. Cette fonction peut être rapidement implémentée en introduisant le framework Layui et les bibliothèques associées, en créant une structure HTML, en écrivant du code JavaScript et en ajoutant des styles. J'espère que cet article sera utile à tout le monde. Si vous avez des questions, veuillez laisser un message pour en discuter.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!