您的位置：首页 > Web前端 > JavaScript

图片裁剪插件Jcrop.js的使用

2017-02-08 13:08 609 查看
中文API文档地址：http://code.ciaoca.com/jquery/jcrop/

简单使用裁剪：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>裁切插件</title>
<!--一定要引入css-->
<link rel="stylesheet" href="./Jcrop/css/Jcrop.min.css">
<style>
/*.box {
width: 600px;
height: 400px;
background: pink;
}*/
</style>
</head>
<body>
<!-- <div class="box"></div> -->
<div class="box">
<img src="aa.jpg" alt="">
</div>
<script src="../jquery/jquery.js"></script>
<!-- Windows 是不区分大小写 -->
<!-- Linux 是区分的 -->
<script src="./Jcrop/js/Jcrop.min.js"></script>
<script>
// 有一个需要
// 宽度比为 2
// 任意大小的图片,默认选区水平铺满,垂直居中
$('img').Jcrop({
// setSelect: [10, 10, 100, 100]//第一种设置模式，值是死的
aspectRatio: 2, //宽高比例
boxWidth: 400,  //控制盒子宽度
// bgColor: 'red',
canResize: false
}, function () {
// 当裁切插件执行成功后回调此方法
console.log('插件执行了...');

// this 指的是当前插件的实例
// console.log(this);
// 此实例上有一些方法可供使用

// 原始图片宽高
// this.ui.stage.width
// this.ui.stage.height
var w = this.ui.stage.width,
h = w / 2,
x = 0,
y = (this.ui.stage.height - h) / 2;

console.log(this);

//开启一个新的选区
this.newSelection();
this.setSelect([x, y, w, h]);//第二种设置模式值是可以设置获取的
});

// 事件监听到父元素
$('.box').on('cropstart cropmove cropend', function(e, s, c) {
// console.log(e.type);
console.log(c);
});
</script>
</body>
</html>


截取时带有预览代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>裁切插件</title>
<link rel="stylesheet" href="./Jcrop/css/Jcrop.min.css">
<style>
/*.box {
width: 600px;
height: 400px;
background: pink;
}*/
.jcrop-thumb {
right: 0;
top: 0;
}

.thumb {
width: 300px;
height: 400px;
position: absolute;
top: 0;
right: 0;
background: pink;
}
</style>
</head>
<body>
<!-- <div class="box"></div> -->
<div class="box">
<img src="bb.jpg" alt="">
</div>
<div class="thumb"></div>
<script src="../jquery/jquery.js"></script>
<!-- Windows 是不区分大小写 -->
<!-- Linux 是区分的 -->
<script src="./Jcrop/js/Jcrop.js"></script>
<script>
// 有一个需要
// 宽度比为 2
// 任意大小的图片,默认选区水平铺满,垂直居中
$('img').Jcrop({
// setSelect: [10, 10, 100, 100]
// 设置选区的宽高比
aspectRatio: 2,
// 设置图片的宽度
boxWidth: 400,
// bgColor: 'red',
// 是否可以调整大小
// canResize: false
}, function () {
// 当裁切插件执行成功后回调此方法
console.log('插件执行了...');

// this 指的是当前插件的实例
// console.log(this);
// 此实例上有一些方法可供使用

// 原始图片宽高
// this.ui.stage.width
// this.ui.stage.height
var w = this.ui.stage.width,
h = w / 2,
x = 0,
y = (this.ui.stage.height - h) / 2;

// 新选区
this.newSelection();
// 设置新选区坐标
this.setSelect([x, y, w, h]);

this.initComponent('Thumbnailer', {
width: 240,
height: 120,

thumb: '.thumb'
});
});

// 事件监听到父元素
$('.box').on('cropstart cropmove cropend', function(e, s, c) {
// console.log(e.type);
// 通过c参数可以获取裁切后的尽寸
console.log(c);
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航