Skip to content

crop max size #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tinsaye wants to merge 1 commit into
base: master
Choose a base branch
from
Open

crop max size #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 16 additions & 5 deletions component/Cropper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -396,21 +396,32 @@ class Cropper extends Component {
}

// crop image
crop(){
crop(maxWidth, maxHeight){
const {frameWidth, frameHeight, originX, originY, imgWidth} = this.state
let canvas = document.createElement('canvas')
let img = ReactDOM.findDOMNode(this.refs.img)
// crop accroding image's natural width
// crop accroding image's natural width
const _scale = img.naturalWidth / imgWidth
const realFrameWidth = frameWidth * _scale
const realFrameHeight = frameHeight * _scale
// limit img by max crop size
const wishedWidth = maxWidth ? Math.min(maxWidth, realFrameWidth) : realFrameWidth
const wishedHeight = maxHeight ? Math.min(maxHeight, realFrameHeight) : realFrameHeight

const squeezeRatio = wishedWidth / realFrameWidth
const flattenRatio = wishedHeight / realFrameHeight
const scaleRatio = Math.min(squeezeRatio, flattenRatio)

const realOriginX = originX * _scale
const realOriginY = originY * _scale

canvas.width = frameWidth
canvas.height = frameHeight
const finalWidth = realFrameWidth * scaleRatio
const finalHeight = realFrameHeight * scaleRatio

canvas.width = finalWidth
canvas.height = finalHeight

canvas.getContext("2d").drawImage(img, realOriginX, realOriginY, realFrameWidth, realFrameHeight, 0, 0, frameWidth, frameHeight)
canvas.getContext("2d").drawImage(img, realOriginX, realOriginY, realFrameWidth, realFrameHeight, 0, 0, finalWidth, finalHeight)
return canvas.toDataURL()
}

Expand Down
1 change: 0 additions & 1 deletion demo/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ class ImageCropDemo extends Component {
}

handleChange(state, values){
console.log(state, values)
this.setState({
[state + 'Values']: values
});
Expand Down
21 changes: 17 additions & 4 deletions lib/Cropper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -521,7 +521,7 @@ var Cropper = function (_Component) {

}, {
key: 'crop',
value: function crop() {
value: function crop(maxWidth, maxHeight) {
var _state8 = this.state,
frameWidth = _state8.frameWidth,
frameHeight = _state8.frameHeight,
Expand All @@ -532,16 +532,29 @@ var Cropper = function (_Component) {
var canvas = document.createElement('canvas');
var img = ReactDOM.findDOMNode(this.refs.img);
// crop accroding image's natural width

var _scale = img.naturalWidth / imgWidth;
console.log(img.naturalWidth);
var realFrameWidth = frameWidth * _scale;
var realFrameHeight = frameHeight * _scale;
console.log(realFrameWidth);
var wishedWidth = maxWidth ? Math.min(maxWidth, realFrameWidth) : realFrameWidth;
var wishedHeight = maxHeight ? Math.min(maxHeight, realFrameHeight) : realFrameHeight;

var squeezeRatio = wishedWidth / realFrameWidth;
var flattenRatio = wishedHeight / realFrameHeight;
var scaleRatio = Math.min(squeezeRatio, flattenRatio);

var realOriginX = originX * _scale;
var realOriginY = originY * _scale;

canvas.width = frameWidth;
canvas.height = frameHeight;
var finalWidth = realFrameWidth * scaleRatio;
var finalHeight = realFrameHeight * scaleRatio;

canvas.width = finalWidth;
canvas.height = finalHeight;

canvas.getContext("2d").drawImage(img, realOriginX, realOriginY, realFrameWidth, realFrameHeight, 0, 0, frameWidth, frameHeight);
canvas.getContext("2d").drawImage(img, realOriginX, realOriginY, realFrameWidth, realFrameHeight, 0, 0, finalWidth, finalHeight);
return canvas.toDataURL();
}

Expand Down