Cropperjs固定裁剪区域高度/宽度到裁剪图像
Cropperjs固定裁剪区域高度/宽度到裁剪图像
提问于 2019-09-26 06:00:29
我在MVC5Razor页面上使用cropper.js，我不想让用户用鼠标选择裁剪区域，我想初始化裁剪对象的预定义裁剪(选定)区域，用户无法调整大小，但用户可以移动裁剪区域的图片裁剪的一部分。
我没有找到任何选项来禁用剪辑，我检查了他们的Git page，它看起来没有能力，而且我在Git page上发布了我的请求，但没有得到任何回应。我需要帮助，我怎样才能解决这个问题。
window.onload = function() {
var Cropper = window.Cropper;
var URL = window.URL || window.webkitURL;
var container = document.querySelector('.img-container');
var image = container.getElementsByTagName('img').item(0);
var download = '';
var actions = document.getElementById('actions');
var dataX = 128;
var dataY = 72;
var dataHeight = 1024;
var dataWidth = 576;
var dataRotate = 0;
var dataScaleX = -1;
var dataScaleY = 1;
var options = {
aspectRatio: 16 / 9,
preview: '.img-preview',
ready: function (e) {
console.log(e.type);
},
cropstart: function (e) {
console.log(e.type, e.detail.action);
},
cropmove: function (e) {
console.log(e.type, e.detail.action);
},
cropend: function (e) {
console.log(e.type, e.detail.action);
},
crop: function (e) {
var data = e.detail;
console.log(e.type);
dataX.value = Math.round(data.x);
dataY.value = Math.round(data.y);
dataHeight.value = Math.round(data.height);
dataWidth.value = Math.round(data.width);
dataRotate.value = typeof data.rotate !== 'undefined' ? data.rotate : '';
dataScaleX.value = typeof data.scaleX !== 'undefined' ? data.scaleX : '';
dataScaleY.value = typeof data.scaleY !== 'undefined' ? data.scaleY : '';
},
zoom: function (e) {
console.log(e.type, e.detail.ratio);
}
};
var cropper = new Cropper(image, options);
} .img-container {
min-height: 497px;
max-width: 497px;
margin-bottom: 1rem;
background-color: white;
text-align: center;
width: 100%;
}
.img-container > img {
max-width: 100%;
}
img {
vertical-align: middle;
border-style: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.5/cropper.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.5/cropper.css" rel="stylesheet"/>
<div class="img-container">
<img src="https://images.pexels.com/photos/266011/pexels-photo-266011.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" id="croppr" />
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-10-01 23:11:16
参考@Chris W.的帮助，我能够使用固定的裁剪区域进行设置。
var image = document.getElementById('croppr');
var cropper = new Cropper(image, {
dragMode: 'move',
aspectRatio: 16 / 9,
autoCropArea: 0.65,
restore: false,
guides: false,
center: false,
highlight: false,
cropBoxMovable: true,
cropBoxResizable: false,
toggleDragModeOnDblclick: false,
}); .img-container {
min-height: 497px;
max-width: 497px;
margin-bottom: 1rem;
background-color: white;
text-align: center;
width: 100%;
}
.img-container > img {
max-width: 100%;
}
img {
vertical-align: middle;
border-style: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.5/cropper.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.5/cropper.css" rel="stylesheet"/>
<div class="img-container">
<img src="https://images.pexels.com/photos/266011/pexels-photo-266011.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" id="croppr" />
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58107093
复制相关文章
相似问题
腾讯云开发者
