jquery.crop.js android6,jQuery图像裁剪插件cropbox.js

最新推荐文章于 2024-08-15 09:27:36 发布

GanHuoSir

最新推荐文章于 2024-08-15 09:27:36 发布

阅读量239

点赞数

文章标签： jquery.crop.js android6

本文介绍了cropbox.js，一个轻量级的jQuery和JavaScript图像剪裁库。它允许用户通过纯JavaScript或jQuery进行图片裁剪，并提供了缩放、裁剪等操作。示例代码展示了如何在用户选择文件后读取图片，应用到cropbox插件中，以及如何获取裁剪后的图片数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插件描述：cropbox.js一个轻量级图像在线剪裁的jQuery和JavaScript 库。

用法

Pure javascriptwindow.onload = function() {

var options =

{

imageBox: '.imageBox',

thumbBox: '.thumbBox',

spinner: '.spinner',

imgSrc: 'avatar.png'

}

var cropper = new cropbox(options);

document.querySelector('#file').addEventListener('change', function(){

var reader = new FileReader();

reader.onload = function(e) {

options.imgSrc = e.target.result;

cropper = new cropbox(options);

}

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

this.files = [];

})

document.querySelector('#btnCrop').addEventListener('click', function(){

var img = cropper.getDataURL()

document.querySelector('.cropped').innerHTML += '';

})

document.querySelector('#btnZoomIn').addEventListener('click', function(){

cropper.zoomIn();

})

document.querySelector('#btnZoomOut').addEventListener('click', function(){

cropper.zoomOut();

})

};

Jquery plugin$(window).load(function() {

var options =

{

thumbBox: '.thumbBox',

spinner: '.spinner',

imgSrc: '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();

})

});

// use with require js (new feature added on 9 Oct 2014)

require.config({

baseUrl: "../",

paths: {

jquery: 'jquery-1.11.1.min',

cropbox: 'cropbox'

}

});

require( ["jquery", "cropbox"], function($) {

var options =

{

thumbBox: '.thumbBox',

spinner: '.spinner',

imgSrc: '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();

})

}

);

YUI pluginYUI().use('node', 'crop-box', function(Y){

var options =

{

imageBox: '.imageBox',

thumbBox: '.thumbBox',

spinner: '.spinner',

imgSrc: 'avatar.png'

}

var cropper = new Y.cropbox(options);

Y.one('#file').on('change', function(){

var reader = new FileReader();

reader.onload = function(e) {

options.imgSrc = e.target.result;

cropper = new Y.cropbox(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('');

})

Y.one('#btnZoomIn').on('click', function(){

cropper.zoomIn();

})

Y.one('#btnZoomOut').on('click', function(){

cropper.zoomOut();

})