Doing something like this:
let temp = {
url: "myimage.jpg",
points: [ 100, 200, 400, 500 ],
orientation: 1,
zoom: 1.0
};
$img.croppie('bind', temp).then(function() {
[...]
});
causes the supplied points to be ignored. This seems to occur because of a scope problem between the main block of _bind() and the promise. The variable "points" isn't carrying through. If you do this:
self.data.bound = false;
self.data.url = url || self.data.url;
self.data.boundZoom = zoom;
console.log(points); // ADDED
return loadImage(url, hasExif).then(function (img) {
console.log(points); // ADDED
_replaceImage.call(self, img);
you'll see that points is empty inside the promise. I have to admit that I'm not all that clear on the intricacies of promises, so I'm not sure why this is the case. However, if the code is modified to instead store the points in self.data first, then it works:
self.data.bound = false;
self.data.url = url || self.data.url;
self.data.boundZoom = zoom;
self.data.points = points;
return loadImage(url, hasExif).then(function (img) {
_replaceImage.call(self, img);
if (!self.data.points.length) {
var natDim = naturalImageDimensions(img);
var rect = self.elements.viewport.getBoundingClientRect();
var aspectRatio = rect.width / rect.height;
var imgAspectRatio = natDim.width / natDim.height;
var width, height;
if (imgAspectRatio > aspectRatio) {
height = natDim.height;
width = height * aspectRatio;
}
else {
width = natDim.width;
height = natDim.height / aspectRatio;
}
var x0 = (natDim.width - width) / 2;
var y0 = (natDim.height - height) / 2;
var x1 = x0 + width;
var y1 = y0 + height;
self.data.points = [x0, y0, x1, y1];
}
else if (self.options.relative) {
self.data.points = [
self.data.points[0] * img.naturalWidth / 100,
self.data.points[1] * img.naturalHeight / 100,
self.data.points[2] * img.naturalWidth / 100,
self.data.points[3] * img.naturalHeight / 100
];
}
self.data.points = self.data.points.map(function (p) {
return parseFloat(p);
});
If you agree with my solution, I can submit a PR.
I'm also facing the same issue, bind with points and zoom is not working.
I tried the above solution but still issue is not fixed.
Please help urgently. Otherwise will need to drop the idea of using this plugin.
I'm also facing the same issue, bind with points is not working.
The zoom is taken into acount for me.
$croppie.croppie(
'bind',
{
url: someImgElement.src,
zoom: 0.8,
points: [208, 47, 583, 347]
}
)
Most helpful comment
I'm also facing the same issue, bind with points and zoom is not working.
I tried the above solution but still issue is not fixed.
Please help urgently. Otherwise will need to drop the idea of using this plugin.