我想使用cropper.js(https://github.com/fengyuanchen/cropperjs)创建一个带有angular-cli的Angular2裁剪器.
我的指示是:
import {Directive, ElementRef, Input, OnInit} from '@angular/core';
import Cropper from 'cropperjs';
@Directive({
selector: '[ng2-cropper]'
})
export class Ng2CropperJsDirective implements OnInit {
@Input('options') options: any = {};
private cropper;
constructor(private _element: ElementRef) { }
ngOnInit(): void {
console.log(Cropper);
this.cropper = new Cropper(this._element.nativeElement, this.options);
}
}
错误来自ng serve: Cannot find module 'cropperjs'
但是cropperjs在,node_modules并且我angular-cli.json更新了:
"scripts": [
"../node_modules/cropperjs/dist/cropper.js"
],
我没有任何想法来解决问题..
我正在使用cropper.js（https://github.com/fengyuanchen/cropperjs）来操作图像，但我找不到以编程方式裁剪图像的方法。
我想做的是在初始化裁剪器后立即创建裁剪预览。
var cropper = new Cropper(document.getElementById('img'), {
autoCrop: true,
autoCropArea: 1,
aspectRatio: 500 / 660,
minCropBoxWidth: 500,
minCropBoxHeight: 660,
viewMode: 2
});
我已autoCrop启用，但如果我尝试获取数据，cropper.getCroppedCanvas()它会返回null.
我注意到这cropper.cropped是错误的，所以我可能需要触发初始裁剪，但不知道如何触发。
我正在尝试使用来自Foliotek的图像裁剪器Croppie,但出于某种原因它不适合我 - 而且我使用的是一个非常简单的例子.
我正在使用以下页面中的演示示例:http://foliotek.github.io/Croppie/
但我得到的只是我浏览器中的空白页面 - IE和Chrome.
我的HTML代码如下:
<html>
<head>
<link href="croppie.css" rel="Stylesheet" />
<script src="croppie.js"></script>
</head>
<body>
<div id="demo-basic"></div>
<script>
var basic = $('#demo-basic').croppie({
viewport: {
width: 150,
height: 200
}
});
basic.croppie('bind', {
url: 'cat.jpg',
points: [77, 469, 280, 739]
});
</script>
</body>
</html>
我希望有人能够帮助我让这个图像裁剪工作:-)
谢谢 - 詹姆斯
我正在使用cropper.js v0.8.0
我使用下面的 jQuery 代码来裁剪图像。
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img_view').attr('src', e.target.result)
};
reader.readAsDataURL(input.files[0]);
setTimeout(initCropper, 1000);
}
function initCropper(){
// console.log("Came here")
var image = document.getElementById('img_view');
var cropper = new Cropper(image, {
aspectRatio: 1/1,
cropBoxResizable: false,
crop: function(e) {
// console.log(e.detail.x);
// console.log(e.detail.y);
}
});
// On crop button clicked
document.getElementById('crop_button').addEventListener('click', function(){
var imgurl = cropper.getCroppedCanvas().toDataURL();
var img = document.createElement("img");
img.src = imgurl;
document.getElementById("cropped_result").appendChild(img);
/* ---------------- SEND …我有以下代码：
<link rel="stylesheet" href="style.css">
<script src="/static/js/jquery/2.1.4/jquery.min.js"></script>
<script src="http://fengyuanchen.github.io/cropper/js/cropper.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
<img id="crop" style="width:400px;height:200px;" />
<div id="img2" style="position: relative; overflow: hidden; border: 1px solid #000; background: #fff; width: 100px; height: 100px;"></div>
X: <input type="text" id="crop_x" name="crop_x" /><br />
Y: <input type="text" id="crop_y" name="crop_y" /><br />
Width: <input type="text" id="crop_width" name="crop_width" /><br />
Height: <input type="text" id="crop_height" name="crop_height" /><br />
<input type="file" id="file" name="file" />
<input type="submit" id="submit" name="submit" value="Submit" />
</form>
<script>
var url = null;
$('#file').on('change',function(){
var file …我创建了一个可以调整裁剪框大小的函数。用户输入高度和宽度，单击“设置”即可完成工作。
$('body').on('click', '#cropImageModal .set_box_size', function () {
var width = $(this).parents('.panel-body').find('.width').val();
var height = $(this).parents('.panel-body').find('.height').val();
document.getElementById('imageToCrop').cropper.setCropBoxData({width: parseInt(width), height: parseInt(height)});
});
除非我们遇到一个问题，即由于某种原因执行调整大小时，裁剪框会根据图像的大小按比例缩小。
即我有一个 700x385 的图像，我将框设置为 700x300 并单击“设置”...结果？结果是 510x219
我已经将问题范围缩小到了cropperJS 中的问题，它与第2662-2667 行的代码有关：
if (self.ready && self.cropped) {
data = {
x: cropBoxData.left - canvasData.left,
y: cropBoxData.top - canvasData.top,
width: cropBoxData.width,
height: cropBoxData.height
};
// issue is below
ratio = imageData.width / imageData.naturalWidth;
each(data, function (n, i) {
n /= ratio;
data[i] = rounded ? Math.round(n) : n;
});
}
如果我删除上面的“比率”代码，问题就解决了，但getCroppedCanvas由于裁剪图像添加了黑色背景，现在无法正常工作。 …
我使用的是最新的cropper.js反应包反应，种植者在我当前的项目和我'刚刚失去了。问题是，裁剪区域可以超出图像，这不应该。我已经尝试了我能想到的一切。
这是 _crop 方法，在cropper 中的每次更改时都会调用该方法。
componentDidMount = () => {
sessionStorage.setItem('shouldMove', false)
}
_crop = ( e ) => {
var canvasData = document.getElementsByClassName('cropper-hidden')
[0].cropper.canvasData
var cropBoxData = this.refs.cropper.getCropBoxData();
if ( sessionStorage.getItem('shouldMove') === 'false' ) {
sessionStorage.setItem( 'currentLeft', cropBoxData.left )
sessionStorage.setItem( 'currentTop', cropBoxData.top )
sessionStorage.setItem('shouldMove', true)
}else {
if (
cropBoxData.left <= canvasData.left ||
cropBoxData.top <= canvasData.top ||
cropBoxData.left + cropBoxData.width > canvasData.width +
canvasData.left ||
cropBoxData.top + cropBoxData.height > canvasData.height +
canvasData.top
) {
cropBoxData.left = sessionStorage.getItem( …cropper ×7
jquery ×4
cropperjs ×3
javascript ×3
angular ×1
angular-cli ×1
crop ×1
image ×1
reactjs ×1
typescript ×1