现在几乎所有的App都有用户登录模块,需要设置用户头像,而关于用户头像部分无疑也是比较头疼的,目前大部分应用的头像部分会有两种方式:一种是利用系统的裁剪功能去获取用户头像,一种就是获取到图片或者照片的地址后自定义头像裁剪界面。而我这里提供了一种利用系统的裁剪功能来获取头像的写法 ...
最近工作真心忙碌,几乎没时间写博客。今天趁周末来仿一个QQ头像裁剪功能插件。效果如下: 所有文件都可在我的Github上下载,从头到尾从简到繁按步骤一共分了 个HTML文件,每个步骤文件里的注释都写的很清楚,故在本博客内不赘述。 原理: 主要是通过css的clip来裁剪图片可视区域,拖动剪裁窗口这里使用了JQ UI的draggable插件 但是缩放没有,贪方便可以使用Resizable插件,但都用 ...
2014-09-14 23:59 13 4074 推荐指数:
现在几乎所有的App都有用户登录模块,需要设置用户头像,而关于用户头像部分无疑也是比较头疼的,目前大部分应用的头像部分会有两种方式:一种是利用系统的裁剪功能去获取用户头像,一种就是获取到图片或者照片的地址后自定义头像裁剪界面。而我这里提供了一种利用系统的裁剪功能来获取头像的写法 ...
上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识;那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其能够显示裁剪后的区域 (3)显示要裁剪区域的坐标 其次,该如何引用该插件 ...
由于最近一段时间比较忙,发现好久没写博客了,给大家分享下最近搞的logo上传截取功能。在实现这个功能之前找了一些jq的插件,最后选定了cropper在github中可以找到。 具体的思路是1:选择上传的图片,在change事件中用 ...
由于最近一段时间比较忙,发现好久没写博客了,给大家分享下最近搞的logo上传截取功能。在实现这个功能之前找了一些jq的插件,最后选定了cropper在github中可以找到。 具体的思路是1:选择上传的图片,在change事件中用form.jquery.js中的formajax异步提交表单,保存 ...
插件介绍 这是一个我在写以前的项目的途中发现的一个国人写的jQuery图像裁剪插件,当时想实现用户资料的头像上传功能,并且能够预览图片,和对图片进行简单的裁剪、旋转,花了不少时间才看到了这个插件,感觉功能挺全面,代码实现起来也挺简单,再加上用的是Bootstrap,对移动端操作也有适配,于是就 ...
(本文原创,引用请注明出处--zhangjieatbky) 环境准备 准备jquery、jcrop的js和css(官网获取)、jquery的文件上传下载组件 html代码 ...
这里使用的是开源是的插件,做的很不错 https://github.com/we-plugin/we-cropper.git git下来之后,如果急着使用效果。可以直接到example目录下 把we-cropper文件夹直接放在自己的小程序项目中,现在我使用的是照片裁剪上传的功能。 所以需要 ...
组件与api地址: npm地址地址:https://www.npmjs.com/package/vue-cropper/v/0.4.7 GitHub地址:https://github. ...