首页html 使用cropper.js完整代码

html 使用cropper.js完整代码

时间: 2023-11-12 21:06:50 浏览: 148

以下是使用 Cropper.js 进行图片裁剪的完整 HTML 代码示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Cropper.js Demo</title>  <link rel="stylesheet" href="https://cdn.bootcss.com/cropperjs/1.5.11/cropper.min.css"> </head> <body> <div>  <img id="image" src="image.jpg"> </div> <div>  <img id="result"> </div>  <script src="https://cdn.bootcss.com/cropperjs/1.5.11/cropper.min.js"></script> <script> // 获取图片元素 var image = document.getElementById('image'); // 创建 Cropper.js 实例 var cropper = new Cropper(image, { aspectRatio: 1 / 1, // 设置裁剪框的宽高比例为 1:1 viewMode: 1, // 设置裁剪框显示模式为预览模式 preview: '#result' // 设置裁剪结果预览容器的选择器 }); </script> </body> </html> ``` 使用时，将上述代码保存为一个 HTML 文件，将图片路径修改为需要裁剪的图片路径，然后在浏览器中打开该 HTML 文件即可看到裁剪界面。裁剪完成后，可在预览容器中查看裁剪结果。

阅读全文