拿来就用，基于jq的pc+移动端头像上传插件

最新推荐文章于 2019-10-11 08:15:46 发布

Melon丶

最新推荐文章于 2019-10-11 08:15:46 发布

阅读量4.1k

点赞数

分类专栏：插件文章标签：插件 javascript php

本文链接：https://blog.csdn.net/Melon19931226/article/details/71037912

版权

本文介绍了作者开发的一款名为melonImageBox的头像上传插件，该插件基于jQuery，兼容IE10+，具备上传预览、剪切、放大缩小、旋转等功能。插件内含模拟PHP+JSON的存取数据过程，便于在服务器环境下直接查看上传图片。文章详细阐述了插件的设计思想，包括控制层与业务逻辑分离，以及核心功能剪切图片的实现原理。此外，还提到了兼容性问题及后续完善计划。

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

Git地址：https://github.com/luguidong/melonImageCrop.git
请在服务器环境下使用，建议wampserver
头像上传，几乎涉及到会员系统的网站都会用到的功能。在16年做公司商城项目因思维新智能产品商城的时候，我就负责过头像上传这一块的功能，当时是在网上找了一个使用比较广的头像插件，cropbox.js，但是里面的功能较为单一，主要就是放大与缩小功能，当时基于这个插件进行了一定的扩展，然而始终觉得写的插件使用起来不是那么的顺手。于是趁最近有时间，就自己写了一个专门的头像上传插件。
名称：melonImageBox；兼容性：ie10+，基于jq；主要功能：上传预览、剪切、滚轮/按钮/双指触摸放大与缩小、旋转功能，插件本身也可以设置放大缩小的倍率、缩放系数、头像尺寸。另外我以前在使用cropbox.js的过程中，发现很多提问都是有关于这个插件获取的图片如何上传到后台，因此为了方便使用，在本插件中我也写了一个基于php+json模拟存取数据的过程，在wampserver的环境下运行可以直接在上传后查看上传的图片，这里需要注意的是传输的数据是图像的base64，可以直接存入数据库。
使用配置：

 <script>
        $('#mic-img-main').melonImageCrop({
            selectBtn: '#upload-file', //选择图片的按钮
            cropImgBox: '#mic-crop-box', //剪切预览显示图片的容器
            cropImgBtn: '#mic-crop-btn', //剪切预览图片的按钮
            zoomBigBtn: '#mic-zoom-big', //放大按钮
            zoomSmaBtn: '#mic-zoom-sma',
            zoomRatio: 1.3, //缩小放大的倍率
  touchRatio:1,//移动端双指缩放系数,
            rotLeftBtn: '#mic-rot-left',
            rotRightBtn: &#

最低0.47元/天解锁文章