So implementieren Sie mit Layui die Drag-and-Drop-Funktion zum Zuschneiden von Bildern

So implementieren Sie mit Layui die Drag-and-Drop-Funktion zum Zuschneiden von Bildern

Mit der rasanten Entwicklung des mobilen Internets wird die Funktion zum Zuschneiden von Bildern in verschiedenen Produkten häufig verwendet. Um die Drag-and-Drop-Funktion zum Zuschneiden von Bildern zu implementieren, können wir Layui verwenden, ein hervorragendes Front-End-Entwicklungsframework, um den Entwicklungsprozess zu vereinfachen. In diesem Artikel wird erläutert, wie Sie mit Layui die Funktion zum Zuschneiden von Bildern durch Ziehen implementieren, und es werden spezifische Codebeispiele aufgeführt.

1. Einführung in das Layui-Framework und zugehörige Bibliotheken

Bevor wir die ziehbare Bildzuschneidefunktion implementieren, müssen wir zunächst das Layui-Framework und zugehörige Bibliotheken vorstellen. Fügen Sie zunächst den folgenden Code in das

-Tag der HTML-Datei ein:

<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. HTML-Struktur erstellen

Als nächstes müssen wir eine HTML-Struktur erstellen, um das Bild und den Zuschneiderahmen anzuzeigen. Fügen Sie den folgenden Code im

-Tag hinzu:

<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. JavaScript-Code schreiben

In der HTML-Struktur haben wir Schaltflächen zum Hochladen von Bildern und Zuschneiden von Bildern sowie einen Container zum Anzeigen von Bildern hinzugefügt (ID ist Image-Container). und der Container, der zum Anzeigen des Zuschneidefelds verwendet wird (ID ist Crop-Container). Als nächstes müssen wir JavaScript-Code schreiben, um die Funktionen zum Hochladen, Anzeigen und Zuschneiden von Bildern zu implementieren. Fügen Sie den folgenden Code im <script>-Tag hinzu: </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="So implementieren Sie mit Layui die Drag-and-Drop-Funktion zum Zuschneiden von Bildern" >');
        //裁剪图片
        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. Stile hinzufügen

Zuletzt müssen wir noch einige Stile hinzufügen, um die Seite zu verschönern. Fügen Sie den folgenden Code im

.demo {
  width: 600px;
}

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

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

#crop {
  margin-top: 10px;
}

An diesem Punkt haben wir das Schreiben des Codes für die Verwendung von Layui zum Implementieren der Drag-and-Drop-Funktion zum Zuschneiden von Bildern abgeschlossen. Als nächstes müssen wir den serverseitigen Code konfigurieren, um das hochgeladene Bild zu empfangen und das zugeschnittene Bild zurückzugeben.

Zusammenfassung:

In diesem Artikel wird erläutert, wie Sie mit dem Layui-Framework die Drag-and-Drop-Funktion zum Zuschneiden von Bildern implementieren. Diese Funktion kann schnell implementiert werden, indem das Layui-Framework und zugehörige Bibliotheken eingeführt, eine HTML-Struktur erstellt, JavaScript-Code geschrieben und Stile hinzugefügt werden. Ich hoffe, dieser Artikel ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie bitte eine Nachricht zur Diskussion.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit Layui die Drag-and-Drop-Funktion zum Zuschneiden von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!