如何利用Layui實作圖片裁切與旋轉功能
一、背景介紹
在Web開發中，常常會遇到需要對圖片進行裁切與旋轉的場景，例如頭像上傳、圖片編輯等。 Layui是一款輕量級的前端框架，提供了豐富的UI元件和友善的API，特別適合快速建立網頁應用。本文將介紹如何利用Layui實作圖片裁切和旋轉功能，並提供具體的程式碼範例。
二、環境準備
在開始之前，需要確認以下環境已經準備就緒：
三、實作步驟
引入所需的文件
建立一個HTML文件，並在
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片裁剪和旋转功能</title> <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="cropper.js"></script> <link rel="stylesheet" href="cropper.css"> </head> <body> ... </body> </html>
建立一個
<body> <div id="image-container" style="width: 500px;height: 500px;"></div> </body>
#初始化圖片裁剪外掛程式
在
