cropper4版本头像裁切上传插件精简版资源-CSDN文库

共5个文件

js：3个

html：1个

css：1个

需积分: 10 166 浏览量 2018-12-27 17:17:33 上传评论 1 收藏 46KB ZIP 举报

《cropper4版本头像裁切上传插件精简版详解》在现代网页应用中，用户头像的个性化设置已经成为一种不可或缺的功能。为了满足这一需求，开发人员常常会使用到头像裁切上传插件。本文将详细介绍一个基于cropper4版本的头像裁切上传插件精简版，该插件适用于快速实现头像裁剪和上传功能，并且易于移植和定制。 cropper4是一款强大的JavaScript图片裁剪库，它提供了丰富的API和事件，能够精确地控制图片裁剪的过程。此精简版则针对常见的头像裁剪场景进行了优化，去除了不常用的功能，提高了性能和易用性。我们来看这个插件的核心特性： 1. **实时预览**：用户可以在裁剪框内自由移动和缩放图片，实时查看裁剪效果，提供良好的用户体验。 2. **比例控制**：可以设定固定的裁剪比例，例如1:1，适合头像这类需要保持特定比例的应用。 3. **旋转与翻转**：支持图片的顺时针和逆时针旋转，以及水平和垂直翻转，满足不同角度的需求。 4. **裁剪区域选择**：用户可自由选择裁剪区域，插件会自动保存选定的坐标和大小。 5. **Ajax上传**：通过修改Ajax部分，可以轻松集成到后端服务器，实现图片的上传功能。在压缩包中，包含的主要文件有`index.html`和`assets`目录。`index.html`是示例页面，展示了如何在网页中使用该插件，而`assets`目录则包含了必要的CSS样式表、JavaScript文件和可能的图片资源。开发者可以根据自身项目的需求，将这些文件复制到相应的位置，并进行适当的配置。对于`index.html`，你需要关注以下几点： 1. **引入依赖**：确保正确引入cropper4的JavaScript和CSS文件，以及可能需要的其他库如jQuery。 2. **HTML结构**：创建一个`<img>`元素用于显示图片，一个`<div>`元素作为裁剪区域。 3. **初始化插件**：在JavaScript中调用`$.fn.cropper`方法，设置参数如data-source（图片源）、options（裁剪选项）等。 4. **事件处理**：绑定裁剪、旋转、上传等操作的事件处理函数，实现相应的功能。在实际应用中，你可能需要根据项目需求调整`ajax`部分的代码，例如更改图片上传的URL、设置请求头、处理返回数据等。这部分代码通常位于`index.html`中的某个事件处理函数内，例如`onCropComplete`或自定义的上传按钮点击事件。总结，cropper4版本的头像裁切上传插件精简版为开发者提供了一种高效、简洁的解决方案，帮助快速实现头像裁剪和上传功能。通过理解其核心特性、了解主要文件的结构和作用，以及对Ajax部分的定制，你可以将这个插件无缝融入到你的项目中，为用户提供流畅的头像编辑体验。

资源推荐

资源详情

资源评论

收起资源包目录

compser -高版本.zip （5个子文件）

assets

css

cropper.css 7KB

jquery-2.1.1.js 82KB

cropper.min.js 35KB

reset.js 2KB

index.html 6KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Cropper.js</title> <link rel="stylesheet" href="assets/css/cropper.css"> </head> <body> <div id="replaceImg">点我</div> <img src="" id="finalImg" alt=""> <div class="tan-box"> <div class="tan-box-shadow"></div> <div class="tan-content"> <div class="tan-content-title"> 修改头像 <div class="tan-content-close"> <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg t="1545874629367" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2971" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14"> <defs><style type="text/css"></style></defs> <path d="M198.842721 851.001901c-6.255471 0-12.479219-2.381234-17.241686-7.144724-9.525957-9.525957-9.525957-24.957415 0-34.483372l628.693746-628.725468c9.525957-9.525957 24.957415-9.525957 34.483372 0 9.525957 9.525957 9.525957 24.957415 0 34.483372L216.084407 843.857177C211.32194 848.619644 205.098191 851.001901 198.842721 851.001901z" p-id="2972" fill="#8a8a8a"> </path><path d="M824.679395 848.62169c-6.255471 0-12.479219-2.381234-17.241686-7.144724L179.221848 213.230406c-9.525957-9.525957-9.525957-24.957415 0-34.483372 9.525957-9.525957 24.957415-9.525957 34.483372 0l628.215862 628.247584c9.525957 9.525957 9.525957 24.957415 0 34.483372C837.157591 846.240457 830.933843 848.62169 824.679395 848.62169z" p-id="2973" fill="#8a8a8a"> </path> </svg> </div> </div> <div class="tan-up-btncont"> <button class="tan-up-btn" id="choose"> <div class="tan-up-img"> <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg t="1545876575017" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5665" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"> <defs><style type="text/css"></style></defs> <path d="M912 645.4c0 44.2-15.6 81.8-46.9 113.1-31.3 31.3-69 46.8-113.1 46.8H298.7c-51.3 0-95.3-18.2-131.9-54.8C130.3 714 112 670.1 112 618.6c0-36.1 9.7-69.4 29.2-100s45.6-53.5 78.3-68.8c-0.5-8.3-0.9-14.3-0.9-17.9 0-58.9 20.9-109.2 62.5-150.8s91.9-62.5 150.8-62.5c43.3 0 83 12.1 118.9 36.3s62.1 56.3 78.5 96.2c19.7-17.3 42.8-25.8 69.1-25.8 29.4 0 54.6 10.4 75.4 31.3 20.9 20.9 31.3 46 31.3 75.4 0 21.1-5.7 40.3-17.1 57.5 36.1 8.6 65.7 27.4 88.9 56.4 23.4 29.1 35.1 62.2 35.1 99.5zM645.4 525.3c0-3.9-1.2-7.1-3.8-9.6L494.9 369.1c-2.5-2.5-5.7-3.8-9.6-3.8s-7.1 1.2-9.6 3.8L329.5 515.3c-2.8 3.3-4.2 6.7-4.2 10 0 3.9 1.2 7.1 3.8 9.6 2.5 2.5 5.7 3.8 9.6 3.8H432v146.7c0 3.6 1.3 6.7 3.9 9.4 2.6 2.6 5.8 3.9 9.4 3.9h80c3.6 0 6.7-1.3 9.4-3.9 2.6-2.6 3.9-5.8 3.9-9.4V538.6h93.3c3.6 0 6.7-1.3 9.4-3.9 2.7-2.6 4.1-5.8 4.1-9.4z" p-id="5666" fill="#2c2c2c"></path></svg> </div> 选择要上传的文件 </button> </div> <div class="tan-show-option"> <div class="container"> <img src="" alt="" id="image"> </div> <div class="preview previewImg"> <img src="" id="imga" alt="" width="100%"> </div> <button class="upload" id="CutImgEvent">上传图片</button> <input type="file" id="imgfile" accept="image/jpg,image/jpeg,image/png"> </div> </div> </div> <script src="assets/js/jquery-2.1.1.js"></script> <script src="assets/js/cropper.min.js"></script> <script> $("#choose").click(function(){ $("#imgfile").click(); }) var image = document.getElementById('image'); var cropper, canvas; $('#imgfile').change(function(e){ var file; var files = e.target.files; if (files && files.length > 0) { file = URL.createObjectURL(files[0]); $('#image').attr({'src': file}) } if(cropper!=undefined){ cropper.destroy() } cropper = new Cropper(image, { aspectRatio: 1, background: true, //是否显示网格背景 zoomable: true, //是否允许放大图像 guides: true, //是否显示裁剪框虚线 crop: function (event) { //剪裁框发生变化执行的函数。 canvas = cropper.getCroppedCanvas({ //使用canvas绘制一个宽和高200的图片 width: 200, height: 200, }); $('#imga').attr("src", canvas.toDataURL("image/png", 0.3)) //使用canvas toDataURL方法把图片转换为base64格式 } }); }) $("#CutImgEvent").click(function(){ console.log($("#imga").attr("src")) }) </script> </body> </html>

评论收藏

内容反馈