cropbox php,jQuery用户头像裁剪插件cropbox.js使用详解

几乎每一个网页是必备图片上传，图片裁剪功能，这里通过cropbox.js插件实现该功能。

$(window).load(function() {

var options =

{

thumbBox: '.thumbBox',

spinner: '.spinner',

imgSrc: 'images/avatar.png'

}

var cropper = $('.imageBox').cropbox(options);

$('#file').on('change', function(){

var reader = new FileReader();

reader.onload = function(e) {

options.imgSrc = e.target.result;

cropper = $('.imageBox').cropbox(options);

}

reader.readAsDataURL(this.files[0]);

this.files = [];

})

$('#btnCrop').on('click', function(){

var img = cropper.getDataURL();

$('.cropped').append('');

})

$('#btnZoomIn').on('click', function(){

cropper.zoomIn();

})

$('#btnZoomOut').on('click', function(){

cropper.zoomOut();

})

});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

cropbox php,jQuery用户头像裁剪插件cropbox.js使用详解相关推荐

cropbox php,jQuery用户头像裁剪插件cropbox.js实例分享
本文主要为大家详细介绍了jQuery用户头像裁剪插件cropbox.js的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 几乎每一个网页是必备图片上传,图片裁剪功能,这 ...
弹幕插件easyDanmaku.js使用详解
easyDanmaku.js弹幕插件使用详解(长期更新) 介绍 A Danmaku plugin for the web,一个用于web端的弹幕插件特点支持TypeScript.使用简单.使用cs ...
html用排序列表的方式添加,jQuery html表格排序插件tablesorter使用方法详解
tablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载j ...
html 表格自动排序,jQuery html表格排序插件tablesorter使用方法详解
tablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载j ...
用react模仿知乎的用户头像裁剪组件
用react模仿知乎的用户头像裁剪组件前段时间刷知乎的时候,更换换了下头像,突然发现知乎头像编辑器很简洁酷炫,于是乎就用react尝试模仿做一个组件. 知乎上的这个是用canvas处理的,但是用di ...
轻量级的jQuery表单验证插件 - HAPPY.js
为什么80%的码农都做不了架构师?>>> 日期:2012-9-14 来源:GBin1.com 在线演示本地下载功能强大的表单验证插件很多,以前我们介绍过validati ...
Jquery 弹出对话框插件xcConfirm.js
Jquery 弹出对话框插件xcConfirm.js,感觉很方便使用,使用方法如下: <!DOCTYPE html> <html><head><meta ch ...
头像，背景图片上传详解
头像,背景图片上传详解上传头像和上传背景图片的思路都是一样的,所以这里选讲一下上传头像就行. 上传头像页面样式: 上传头像主要分成两大部分: 上传后,将图片存储在本地项目中,然后将图片的url存储到 ...
JQuery在循环中绑定事件的问题详解
JQuery在循环中绑定事件的问题详解有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...
查看登陆系统用户的信息的三种方法详解
查看登陆系统用户的信息的三种方法详解作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.who这个命令显示可以谁在登陆,但是这个有很多的花式玩法,这个命令超简单语法:who [O ...

cropbox php,jQuery用户头像裁剪插件cropbox.js使用详解

cropbox php,jQuery用户头像裁剪插件cropbox.js使用详解相关推荐

最新文章

热门文章