基于jQuery和cropper点击头像上传并预览裁剪图片

最新推荐文章于 2024-08-15 10:11:38 发布

老朱-yubing

最新推荐文章于 2024-08-15 10:11:38 发布

阅读量1.4k

点赞数

分类专栏：程序设计文章标签： javascript jquery 头像上传裁剪预览

本文链接：https://blog.csdn.net/robinhunan/article/details/77852200

版权

本文介绍如何使用jQuery结合cropper插件实现头像上传前的图片预览和裁剪功能。用户可以在本地完成裁剪并旋转图片，裁剪后的图像以base64编码方式上传，通过PHP或Java接收并保存。示例提供了完整的操作流程和代码示例。

摘要由CSDN通过智能技术生成

使用jquery上传前，预览图片，裁剪，示例使用php接收上传的文件，并且保存为裁剪后的图片。不需要上传后再裁剪图片，只需要本地裁剪好即可，裁剪的时候也可以旋转图片。裁剪控件使用了，cropper。

html代码

<!DOCTYPE html>

<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="Author" content="40930845@qq.com">
 <meta name="Keywords" content="">
 <meta name="Description" content="">

 <title>Document</title>
 <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 <link href="//cdn.bootcss.com/cropper/3.0.0/cropper.min.css" rel="stylesheet" type="text/css">
 <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js" type="text/javascript"></s