Comments (6)
What does "relative to the page" even mean in this context? If it's relative to the "page," why does scaling affect it? In what use case is the current behavior desirable? This feels like an issue that should not have been closed.
from cropperjs.
absoluteCropBoxWidth = cropBoxData.width * (canvasData.width / canvasData.naturalWidth);
from cropperjs.
The minCropBoxWidth
and minCropBoxHeight
are relative to the page, not the image.
from cropperjs.
To make it relative to the image without modifying the plugin, try something like this:
var cropper;
var buildCropper = function() {
cropper = new Cropper(image, {
aspectRatio: 1 / 1,
minCropBoxHeight: 250,
minCropBoxWidth: 250,
movable: false,
scalable:false,
zoomable:false,
crop: function(data) {
image.setAttribute('data-x', data.x);
image.setAttribute('data-width', data.width);
image.setAttribute('data-height', data.height);
image.setAttribute('data-y', data.y);
}
});
var scaledCropBox = {
x: (parseFloat(getComputedStyle(cropper.canvas)['width']) / image.width) * 250,
y: (parseFloat(getComputedStyle(cropper.canvas)['height']) / image.height) * 250
}
cropper.options.minCropBoxWidth = scaledCropBox.x;
cropper.options.minCropBoxHeight = scaledCropBox.y;
cropper.build();
}
buildCropper();
var resizeTimeout;
window.onresize = function(){
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function() {
cropper.destroy();
buildCropper();
}, 100);
};
It's not optimal as it requires building the cropper instance twice, however it seems to be accurate and it works. In this case, I destroy and rebuild the cropper when the window is resized, meaning the cropping process set by the user will reset.
from cropperjs.
@Busata Did you resolve this? Having the same concerns
from cropperjs.
from cropperjs.
Related Issues (20)
- On IOS mobile browsers, when the height of the image is greater than 4531px, the image is corrupted after crop HOT 1
- rotate image will be bigger HOT 1
- Cropper stretches the image HOT 1
- Please provide code for the following example: HOT 1
- How to get selection's original x,y after canvas scale?
- More columns and rows in cropper-crop-box HOT 1
- 在video上方画出裁剪框 HOT 1
- When I crop an image with a transparent background, why does the resulting cropped image change the background color. HOT 2
- [V2] Get higher image quality HOT 1
- Status of v2 release?
- Moving the cropper origin to top:left HOT 2
- Coordinate system scaling
- Cropper lags in Emscripten project HOT 1
- Probleme with image base64 and tranform HOT 1
- 能否自定义监听 resize 的容器或暴露手动触发容器 resize 后的 render 的方法? HOT 1
- [V2] `cropper-selection`: `$reset()` does not actually reset
- holding cropper on touchscreen HOT 1
- 非常棒的工具!但是想请教下在v2版本废弃viewMode是出于怎样的考虑,以及有没有其他办法禁止截取框离开底图区域? HOT 1
- [V2] `cropper-selection`: `$reset()` does not take account of new initials HOT 1
- [V2] Disallow Crop outside image boundaries HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cropperjs.