标签：固定 table fill 插件 size shu 平滑 -o dal
官网 http://fengyuanchen.github.io/cropper/
文档 https://github.com/fengyuanchen/cropper/blob/master/README.md
1 <link href="/path/to/cropper.css" rel="stylesheet"> 2 <script src="/path/to/cropper.js"></script> 3 <!-- 建议把单独的img标签放在一个div中 包裹画布--> 4 <div class="box"> 5 <img id="image" src="picture.jpg"> 6 </div>
这里注意，直接设置img的宽高是没有效果的，但是可以在父盒子上（即.box）设置
1 var cropper = new Cropper(image, { 2 aspectRatio: 16 / 9, 3 viewMode:1, 4 crop: function (e) { 5 console.log(e.detail.x); 6 console.log(e.detail.y); 7 console.log(e.detail.width); 8 console.log(e.detail.height); 9 console.log(e.detail.rotate); 10 console.log(e.detail.scaleX); 11 console.log(e.detail.scaleY); 12 } 13 });
如果使用的是本地的cropper.js和cropper.css，可能报版本的错误，用下面的引入代码：
1 $(‘#image‘).cropper({ 2 aspectRatio: 16 / 9, 3 viewMode:1, 4 crop: function (e) { 5 console.log(e); 6 } 7 });
preview:".small",<div class="small"></div>
$("#image").cropper({
autoCrop: false, //关闭自动显示裁剪框
ready: function () {
$(this).cropper(‘crop‘);
}
});
$("#replace").on("click", function () {
$(‘#image‘).cropper(‘replace‘,"./images/111.jpeg",true );
})
$(‘#image‘).cropper(‘scale‘, -1); // 水平、垂直方向翻转
$(‘#image‘).cropper(‘scale‘, -1, 1); // 水平方向翻转
$(‘#image‘).cropper(‘scale‘, 1, -1); // 垂直方向翻转
$("#getData").on("click", function () {
console.log($(‘#image‘).cropper(‘getData‘, true));;
})
$("#getImageData").on("click", function () {
console.log($(‘#image‘).cropper(‘getImageData‘, ));;
})
naturalWidth、naturalHeight的值是一样的HTMLCanvasElement $("#getCroppedCanvas").on("click", function () {
console.log($(‘#image‘).cropper(‘getCroppedCanvas‘));;
var cas=$(‘#image‘).cropper(‘getCroppedCanvas‘);
var base64url=cas.toDataURL(‘image/jpeg‘);
cas.toBlob(function (e) {
console.log(e); //生成Blob的图片格式
})
console.log(base64url); //生成base64图片的格式
$(‘.cavans‘).html(cas) //在body显示出canvas元素
})
$(‘#image‘).cropper(‘getCroppedCanvas‘, {
width: 160,
height: 90,
minWidth: 256,
minHeight: 256,
maxWidth: 4096,
maxHeight: 4096,
fillColor: ‘#fff‘,
imageSmoothingEnabled: false,
imageSmoothingQuality: ‘high‘,
});
// Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`
$(‘#image‘).cropper(‘getCroppedCanvas‘).toBlob(function (blob) {
var formData = new FormData();
formData.append(‘croppedImage‘, blob);
$.ajax(‘/path/to/upload‘, {
method: "POST",
data: formData,
processData: false,
contentType: false,
success: function () {
console.log(‘Upload success‘);
},
error: function () {
console.log(‘Upload error‘);
}
});
});
event.originalEvent 类型event；mousedown、touchstart 和 pointerdown 即触发的事件源event.action 发生事件的行为（移动的方向）：$(‘#image‘).on(‘cropstart‘, function (e) {
console.log(e.type); // cropstart
console.log(e.namespace); // cropper
console.log(e.action); // ...
console.log(e.originalEvent.pageX);
// Prevent to start cropping, moving, etc if necessary
if (e.action === ‘crop‘) {
e.preventDefault();
}
});
标签：固定 table fill 插件 size shu 平滑 -o dal
原文地址：https://www.cnblogs.com/cnlisiyiii-stu/p/11570396.html
