cropper 图片裁剪，固定图片宽高
///
<div class="img-container" ng-style="{'width':minWidth+100,'height':minHeight+100}" style="padding: 0 22px;">
<img />
</div>
$scope.minWidth = 429;
$scope.minHeight = 290;
//图片裁剪工具配置
var URL = window.URL || window.webkitURL;
var $image = $('.img-container > img');
var options = {
//strict: false,//默认值true,在strict模式中，canvas不能小于容器，剪裁容器不能再canvas之外。
// responsive: false,//默认值true是否在窗口尺寸改变的时候重置cropper
// checkImageOrigin: false,//检测图片源
// modal: false,//默认true,是否在剪裁框上显示黑色的模态窗口。
// guides: false,//默认值true是否在剪裁框上显示虚线。
// highlight: false,//默认值true是否在剪裁框上显示白色的模态窗口。
// background: false,//默认值true,是否在容器上显示网格背景。
autoCrop: false,//默认值true,是否在初始化时允许自动剪裁图片。
//autoCropArea: 0.5,//0-1之间的数值,默认值0.8，定义自动剪裁区域的大小。
//dragCrop: false,//默认值true,是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域。
//movable: false,//默认值true是否允许移动剪裁框。
//resizable: false,//默认值true,是否允许改变剪裁框的大小。
rotatable: false,
scalable: false,
zoomable: false,//默认值true是否允许放大缩小图片。
//touchDragZoom: false,//默认值true是否允许通过触摸移动来缩放图片。
//mouseWheelZoom: false,//默认值true是否允许通过鼠标滚轮来缩放图片。
//minCanvasWidth: $scope.minWidth + 100,//默认值0canvas 的最小宽度（image wrapper）
//minCanvasHeight: $scope.minHeight + 100,
//minCropBoxWidth: $scope.minWidth,//类型：Number，默认值0。canvas 的最小宽度（image wrapper）。
//minCropBoxHeight: $scope.minHeight,//类型：Number，默认值0。canvas 的最小高度（image wrapper）。
//minContainerWidth: $scope.minWidth + 100,//类型：Number，默认值200。容器的最小宽度。
//minContainerHeight: $scope.minHeight + 100,//类型：Number，默认值100。容器的最小高度。
// build: null,//build.cropper事件的简写方式
// built: null,//built.cropper事件的简写方式。
// dragstart: null,//dragstart.cropper事件的简写方式。
// dragmove: null,
// dragend: null,
// zoomin: null,//缩放图片，正数（ratio > 0）
// zoomout: null,//缩放图片，正数（ratio < 0）
//aspectRatio: $scope.minWidth / $scope.minHeight,//默认值NaN。设置剪裁容器的比例。2.929 / 1
ready: function () {
$image.cropper('crop');
$image.cropper('setData', {
width: $scope.minWidth,
height: $scope.minHeight
});
}
//preview: '.img-preview',//类型：String(jQuery选择器)，默认值”。添加额外的元素（容器）的预览。
//crop: function (data) {//类型：Function，默认值null。当改变剪裁容器或图片时的事件函数。
// data.height < $scope.width && (data.height = $scope.width);
// data.width < $scope.width && (data.width = $scope.width);
//$dataX.val(Math.round(data.x));
//$dataY.val(Math.round(data.y));
//$dataHeight.val(Math.round(data.height));
//$dataWidth.val(Math.round(data.width));
//$dataRotate.val(Math.round(data.rotate));
//}
};
var startCropper = function (src) {
$image.attr("src", src);
$image.cropper(options);
$image.on('cropmove', function (e) {
var data = $image.cropper('getData');
if (data.width !== $scope.minWidth || data.height !== $scope.minHeight) {
$image.cropper('setData', {
width: $scope.minWidth,
height: $scope.minHeight
});
//e.preventDefault();
}
});
$image.on('cropend', function (e) {
var data = $image.cropper('getData');
if (data.width !== $scope.minWidth || data.height !== $scope.minHeight) {
$image.cropper('setData', {
width: $scope.minWidth,
height: $scope.minHeight
});
}
});
}
var active = false;
$scope.getFile = function () {
//console.log($scope.files.length);
if (!$scope.files || $scope.files.length < 1) return false;
var file = $scope.files[0];
if (file.type.indexOf("image") !== 0) {
layer.msg(file.name + "不是图片文件！");
return false;
}
//$scope.picFiles = file;//图片
Dialog.showDiv("j_hopup_pic");
//blobURL = URL.createObjectURL(file);
var src = objUrlService.getObjectUrl(file);
if (active) {
$image.cropper('replace', src);
} else {
startCropper(src);
active = true;
}
}
$scope.savePic = function () {
var canvas = $image.cropper("getCroppedCanvas", undefined);
var base64 = canvas.toDataURL(); //, 0.5).substr(22);//jpeg
picFile = toBlobServer.dataUrltoBlob(base64);
var src = URL.createObjectURL(picFile);
//blob.fileName = src;
Dialog.close("j_hopup_pic");
$scope.data.ProductPic = src; //file.name;
//$scope.$digest($scope.data.ProductPic);
//if (blob.size <= 204800) { //大于200KB时压缩图片
// $scope.shopPic = { "id": src, "file": blob };
//} else {
// compressService.resizeFile(src).then(function (data) {
// $scope.shopPic = { "id": data.src, "file": data.blob }
// });
//}
}
cropper 图片裁剪，固定图片宽高相关推荐
- html 图片 保持长宽比,实现图片在页面中宽高一直保持16：9比例的方法
实现图片在页面中宽高一直保持16:9比例的方法 发布时间:2020-08-31 14:25:10 来源:亿速云 阅读:133 作者:小新 小编给大家分享一下实现图片在页面中宽高一直保持16:9比例的方 ...
- Java BufferImage图片处理（获取宽高、图片截取、转换灰度图）
Java BufferImage图片处理(获取宽高.截取.转换灰度图) 1. 效果图 2. 源码 参考 这篇博客将介绍如何使用Java读取图片为byte[]数组,或者BufferedImage及互相转 ...
- 图片圆角边框自适应宽高（深夜原创）
最近挺忙,没来得及更新博客!夜深了,给大家分析下几种图片圆角边框自适应宽高在不同情况下代码实现方法.请先看如下代码: <!DOCTYPE html> <head> <me ...
- java生成缩略图，接收图片，按指定宽高或按比例生成缩略图
全栈工程师开发手册 (作者:栾鹏) java教程全解 java生成缩略图,接收图片,按指定宽高或按比例生成缩略图,能有效降低前端访问图片的流量负载. 支持的图片类型 : [BMP, bmp, jpg, ...
- Excel单元格插入图片，并自适应宽高——保姆级教程
Excel单元格插入图片,并自适应宽高--保姆级教程 author:陈镇坤27 日期:2022年3月22日 创作不易,转载请注明来源 摘要:计算图片高宽像素,将Excel单元格高宽单位转化为以像素为单 ...
- javascript 快速获取图片实际大小的宽高
javascript 快速获取图片实际大小的宽高 简陋的获取图片实际宽高的方式 // 图片地址 var img_url = '13643608813441.jpg'// 创建对象 var img = ...
- PHP图片裁剪_图片缩放_PHP生成缩略图
2019独角兽企业重金招聘Python工程师标准>>> 在制作网页过程中,为了排版整齐美观,对网页中的图片处理成固定大小尺寸的图片,或是要截去图片边角中含有水印的图片,对于图片量多, ...
- latex中插入图片以及固定图片位置
如有帮助,请随手点赞. latex中插入图片以及固定图片位置 需要在引言部分加入下面两条命令: \usepackage{graphicx} \usepackage{float} 添加图片时,写下以下命 ...
- 保持宽度不变裁剪图片 html,固定长宽的img标签如何保持里面的图片不缩放
一.将图片作为dom元素 方案1:给图片周围留白 像这样,1:1的图片撑满图片区域,其他比例图片周围留白(粉~):如果图片高度大于宽度,则左右留白,高度小于宽度,上下留白 实现代码: 1 body{ ...
- vue图片裁剪固定尺寸/vue-cropper的使用
需求: 用户上传图片不符合大小,提供工具进行裁剪(类似上传头像一样处理) 解决: 使用vue-cropper插件完成 插件官网: https://github.com/xyxiao001/vue-cr ...
最新文章
- R构建SVM回归模型
- 软件测试中的冲突测试
- 每天60秒读懂世界20211127
- Java中带有JWebSocket的WebServerSocket
- 组合范畴语法 CCG
- top结合jstack处理线上cpu飙升问题
- centos7 ACL
- Linux有问必答：如何查看Linux上程序或进程用到的库
- printf linux 头文件,printf()函数 [转]linux调用动态库so文件(2)
- HNOI2015解题报告
- 苹果App Store 四年历程回顾
- 最好用的9个php开发工具推荐
- 哪一个属于计算机外存储器,下边哪一个属于计算机的外存储器()
- BI案例：BI在连锁零售业应用（ZT）【转】
- 30句感悟人生的格言名言
- KM算法解决二分图最大权分配问题
- HR在线招人，快甩简历啦
- Python 练习实例100例—2
- OMG，学它！java培训讲师面试技巧
- 液晶显示器花屏怎样解决