crop Box .js 介绍
crop Box .js是一款简单轻量级的头像 图片 剪裁 插件 。 用户 可以 上传 自己的 图片 ，还可以将 图片 进行放大和缩小，以及对 图片 进行拖动，最后可以将 图片 剪裁 生成 新的头像 图片 。?
crop Box .js 支持 纯js，或结合jquery来使用，或通过YUI来使用。?
纯js 调用 插件
window.onload = function() {
var options =
{
image Box : '.image Box ',
thumb Box : '.thumb Box ',
spinner: '.spinner',
imgSrc: 'avatar.png'
}
var cropper = new crop Box (options);
document.querySelector('#file').addEventListener('change',function(){
var reader = new FileReader();
reader.onload = function(e) {
options.imgSrc = e.target.result;
cropper = new crop Box (options);
}
reader.readAsDataURL(this.files[0]);
this.files = [];
})
document.querySelector('#btnCrop').addEventListener('click',function(){
var img = cropper.getDataURL()
document.querySelector('.cropped').innerhtml += '<img src="'+img+'">';
})
document.querySelector('#btnZoomIn').addEventListener('click',function(){
cropper.zoomIn();
})
document.querySelector('#btnZoomOut').addEventListener('click',function(){
cropper.zoomOut();
})
};
jquery结合使用
$(window).load(function() {
var options =
{
thumb Box : '.thumb Box ',
imgSrc: 'avatar.png'
}
var cropper = $('.image Box ').crop Box (options);
$('#file').on('change',function(){
var reader = new FileReader();
reader.onload = function(e) {
options.imgSrc = e.target.result;
cropper = $('.image Box ').crop Box (options);
}
reader.readAsDataURL(this.files[0]);
this.files = [];
})
$('#btnCrop').on('click',function(){
var img = cropper.getDataURL()
$('.cropped').append('<img src="'+img+'">');
})
$('#btnZoomIn').on('click',function(){
cropper.zoomIn();
})
$('#btnZoomOut').on('click',function(){
cropper.zoomOut();
})
});
// use with require js
paths: {
jquery: 'js/jquery-1.11.0.min',
crop Box : 'crop Box '
}
});
require( ["jquery","crop Box "],function($) {
var options =
{
thumb Box : '.thumb Box ',function(){
var img = cropper.getDataURL();
$('.cropped').append('<img src="'+img+'">');
})
$('#btnZoomIn').on('click',function(){
cropper.zoomOut();
})
}
);
YUI 插件 使用
YUI().use('node','crop- Box ',function(Y){
var options =
{
image Box : '.image Box ',
imgSrc: 'avatar.png'
}
var cropper = new Y.crop Box (options);
Y.one('#file').on('change',function(){
var reader = new FileReader();
reader.onload = function(e) {
options.imgSrc = e.target.result;
cropper = new Y.crop Box (options);
}
reader.readAsDataURL(this.get('files')._nodes[0]);
this.get('files')._nodes = [];
})
Y.one('#btnCrop').on('click',function(){
var img = cropper.getDataURL()
Y.one('.cropped').append('<img src="'+img+'">');
})
Y.one('#btnZoomIn').on('click',function(){
cropper.zoomIn();
})
Y.one('#btnZoomOut').on('click',function(){
cropper.zoomOut();
})
})
网站地址 : http://hongkhanh.github.io/cropbox/
GitHub: https://github.com/hongkhanh/cropbox
网站描述: 一款简单轻量级的头像 图片 剪裁 插件
cropbox.js官方网站
官方网站： http://hongkhanh.github.io/cropbox/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。