如何解决这个问题AngularJS JCrop指令？ [英] how to fix this AngularJS JCrop directive?
问题描述
我试图用JCrop与AngularJS。我有以下的指令，我需要帮助修复了一下：
.directive（'imgCropped'，函数（）{
返回{
限制：'E'，
更换：真实，
适用范围：{SRC：'@'，选择：'和;' }，
链接：功能（范围，元素，属性）{
VAR myImg;
VAR明确=功能（）{
如果（myImg）{
myImg.next（）remove（）方法。
myImg.remove（）;
myImg =不确定;
}
};
范围。$腕表（'src'中，功能（NV）{
明确（）;
如果（NV）{
element.after（'＆LT; IMG /＆GT;'）;
myImg = element.next（）;
myImg.attr（'src'中，NV）; $（myImg）.Jcrop（{
trackDocument：真实，
ONSELECT：函数（X）{
/ *如果（！范围。$$阶段）{
范围。$应用（函数（）{
scope.selected（{线：X}）;
}）;
} * /
scope.selected（{线：X}）;
}，
的aspectRatio：1，
boxWidth：400，boxHeight：400，
setSelect：[0，0，400，400]
}）;
}
}）; 范围在$（'$摧毁，清除）。
}
};
}）
问题是，JCrop无法正确检测的真实图像尺寸和我需要添加一个trueSize选项，我知道该怎么做的唯一方法是包裹Jcrop调用的回调，看起来pretty讨厌的。
另外，如果我使用的范围。$在ONSELECT回调，我得到了$摘要已经在进行中的错误适用。这是为什么？
编辑：我能成功获得具有以下code真实的图像大小，但必须有一个更好的方式来做到这一点。
.directive（'imgCropped'，函数（）{
返回{
限制：'E'，
更换：真实，
适用范围：{SRC：'@'，选择：'和;' }，
链接：功能（范围，元素，属性）{
VAR myImg;
VAR明确=功能（）{
如果（myImg）{
myImg.next（）remove（）方法。
myImg.remove（）;
myImg =不确定;
}
};
范围。$腕表（'src'中，功能（NV）{
明确（）;
如果（NV）{
element.after（'＆LT; IMG /＆GT;'）;
myImg = element.next（）;
myImg.attr（'src'中，NV）; 变种临时=新的图像（）;
temp.src = NV;
temp.onload =功能（）{
VAR WIDTH = this.width;
VAR HEIGHT = this.height; $（myImg）.Jcrop（{
trackDocument：真实，
ONSELECT：函数（X）{
/ *如果（！范围。$$阶段）{
范围。$应用（函数（）{
scope.selected（{线：X}）;
}）;
} * /
scope.selected（{线：X}）;
}，
的aspectRatio：1，
boxWidth：400，boxHeight：400，
setSelect：[0，0，400，400]，
trueSize：【宽度，高度]
}）;
}
}
}）; 范围在$（'$摧毁，清除）。
}
};
}）
你在做什么可能是罚款。该指令看起来还好。至于获取图像的大小，你可以用直接的JavaScript像这样做：
IMG VAR =新的图像（）;
img.onload =功能（）{
变种W = img.width，
H = img.height;
//你需要在这里做什么。
};
img.src ='somefile.gif';
这将节省您的DOM操作。
I'm trying to use JCrop with AngularJS. I have the following directive that I need help to fix a bit:
.directive('imgCropped', function() {
return {
restrict: 'E',
replace: true,
scope: { src:'@', selected:'&' },
link: function(scope,element, attr) {
var myImg;
var clear = function() {
if (myImg) {
myImg.next().remove();
myImg.remove();
myImg = undefined;
}
};
scope.$watch('src', function(nv) {
clear();
if (nv) {
element.after('<img />');
myImg = element.next();
myImg.attr('src',nv);
$(myImg).Jcrop({
trackDocument: true,
onSelect: function(x) {
/*if (!scope.$$phase) {
scope.$apply(function() {
scope.selected({cords: x});
});
}*/
scope.selected({cords: x});
},
aspectRatio: 1,
boxWidth: 400, boxHeight: 400,
setSelect: [0, 0, 400, 400]
});
}
});
scope.$on('$destroy', clear);
}
};
})
the problem is that JCrop doesn't detect the true image size correctly and I need to add a trueSize option, the only way that I know how to do is to wrap the Jcrop invocation in a callback, looks pretty nasty.
also, if I use scope.$apply in the onSelect callback I get the $digest already in progress error. why is that ?
EDIT: I can successfully get the true image size with the following code, but there must be a better way to do so
.directive('imgCropped', function() {
return {
restrict: 'E',
replace: true,
scope: { src:'@', selected:'&' },
link: function(scope,element, attr) {
var myImg;
var clear = function() {
if (myImg) {
myImg.next().remove();
myImg.remove();
myImg = undefined;
}
};
scope.$watch('src', function(nv) {
clear();
if (nv) {
element.after('<img />');
myImg = element.next();
myImg.attr('src',nv);
var temp = new Image();
temp.src = nv;
temp.onload = function() {
var width = this.width;
var height = this.height;
$(myImg).Jcrop({
trackDocument: true,
onSelect: function(x) {
/*if (!scope.$$phase) {
scope.$apply(function() {
scope.selected({cords: x});
});
}*/
scope.selected({cords: x});
},
aspectRatio: 1,
boxWidth: 400, boxHeight: 400,
setSelect: [0, 0, 400, 400],
trueSize: [width, height]
});
}
}
});
scope.$on('$destroy', clear);
}
};
})
What you're doing is probably fine. The directive looks okay. As far as getting the image size, you can do it with straight JavaScript like so:
var img = new Image();
img.onload = function () {
var w = img.width,
h = img.height;
//do what you need to do here.
};
img.src = 'somefile.gif';
It will save you the DOM manipulation.
这篇关于如何解决这个问题AngularJS JCrop指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
