Skip to content
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

limit portrait by height #18

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

limit portrait by height #18

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
51 changes: 34 additions & 17 deletions component/Cropper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,16 +36,18 @@ class Cropper extends Component {
maxTop: 0,
action: null,
imgLoaded: false,
imgIsPortrait: false,
styles: deepExtend({}, defaultStyles, styles),
}
}

// initialize style, component did mount or component updated.
initStyles (){
const container = ReactDOM.findDOMNode(this.refs.container)
this.setState({
imgWidth: container.offsetWidth
}, () => {
this.setState(this.state.imgIsPortrait
? {imgHeight: container.offsetHeight}
: {imgWidth: container.offsetWidth}
, () => {
// calc frame width height
let {originX, originY, disabled} = this.props
if (disabled) return
Expand Down Expand Up @@ -75,7 +77,6 @@ class Cropper extends Component {
originY: toImgTop4Style,
});
})

})
}

Expand Down Expand Up @@ -127,19 +128,32 @@ class Cropper extends Component {
setTimeout(function () {
let img = ReactDOM.findDOMNode(that.refs.img)
if (img && img.naturalWidth) {
const {beforeImgLoad} = that.props

// image scaleing
let _heightRatio = img.offsetWidth / img.naturalWidth
let height = parseInt(img.naturalHeight * _heightRatio)
// resize imgHeight
that.setState({
imgHeight: height,
imgLoaded: true,
}, () => that.initStyles())
const {beforeImgLoad, limitHeight} = that.props
// diside if img is a portrait
if (limitHeight && img.naturalHeight > img.naturalWidth) {
// image scaleing
let _widthRatio = limitHeight / img.naturalHeight
let width = parseInt(img.naturalWidth * _widthRatio)
//resize imgWidth
that.setState({
imgWidth: width,
imgHeight: limitHeight,
imgLoaded: true,
imgIsPortrait: true,
}, () => that.initStyles());
} else {
let _heightRatio = img.offsetWidth / img.naturalWidth
let height = parseInt(img.naturalHeight * _heightRatio)
// resize imgHeight
that.setState({
imgHeight: height,
imgLoaded: true,
imgIsPortrait: false,
}, () => that.initStyles())
}

// before image loaded hook
beforeImgLoad()

} else if (img) {
// catch if image naturalwidth is 0
that.imgGetSizeBeforeLoad()
Expand Down Expand Up @@ -476,10 +490,10 @@ class Cropper extends Component {
styles.container,
{
'position': 'relative',
'height': imgHeight
'height': 'imgHeight',
'width': imgWidth
}) }
ref="container">

{imageNode}
{imgLoaded ?
<div>
Expand Down Expand Up @@ -565,6 +579,8 @@ Cropper.PropTypes = {
ratio: PropTypes.number,
width: PropTypes.number,
height: PropTypes.number,
// 0 for not limiting else max-height in px
limitHeight: PropTypes.number,
fixedRatio: PropTypes.bool,
allowNewSelection: PropTypes.bool,
disabled: PropTypes.bool,
Expand All @@ -582,6 +598,7 @@ Cropper.defaultProps = {
ratio: 1,
originX: 0,
originY: 0,
limitHeight: 0,
styles: {},
onImgLoad: function () { },
beforeImgLoad: function () { }
Expand Down
55 changes: 38 additions & 17 deletions lib/Cropper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ var Cropper = function (_Component) {
maxTop: 0,
action: null,
imgLoaded: false,
imgIsPortrait: false,
styles: deepExtend({}, defaultStyles, styles)
};
return _this;
Expand All @@ -72,9 +73,7 @@ var Cropper = function (_Component) {
var _this2 = this;

var container = ReactDOM.findDOMNode(this.refs.container);
this.setState({
imgWidth: container.offsetWidth
}, function () {
this.setState(this.state.imgIsPortrait ? { imgHeight: container.offsetHeight } : { imgWidth: container.offsetWidth }, function () {
// calc frame width height
var _props = _this2.props,
originX = _props.originX,
Expand Down Expand Up @@ -188,19 +187,37 @@ var Cropper = function (_Component) {
setTimeout(function () {
var img = ReactDOM.findDOMNode(that.refs.img);
if (img && img.naturalWidth) {
var beforeImgLoad = that.props.beforeImgLoad;

// image scaleing

var _heightRatio = img.offsetWidth / img.naturalWidth;
var height = parseInt(img.naturalHeight * _heightRatio);
// resize imgHeight
that.setState({
imgHeight: height,
imgLoaded: true
}, function () {
return that.initStyles();
});
var _that$props = that.props,
beforeImgLoad = _that$props.beforeImgLoad,
limitHeight = _that$props.limitHeight;
// diside if img is a portrait

if (limitHeight && img.naturalHeight > img.naturalWidth) {
// image scaleing
var _widthRatio = limitHeight / img.naturalHeight;
var width = parseInt(img.naturalWidth * _widthRatio);
//resize imgWidth
that.setState({
imgWidth: width,
imgHeight: limitHeight,
imgLoaded: true,
imgIsPortrait: true
}, function () {
return that.initStyles();
});
} else {
var _heightRatio = img.offsetWidth / img.naturalWidth;
var height = parseInt(img.naturalHeight * _heightRatio);
// resize imgHeight
that.setState({
imgHeight: height,
imgLoaded: true,
imgIsPortrait: false
}, function () {
return that.initStyles();
});
}

// before image loaded hook
beforeImgLoad();
} else if (img) {
Expand Down Expand Up @@ -637,7 +654,8 @@ var Cropper = function (_Component) {
{ onMouseDown: this.handleDragStart.bind(this), onTouchStart: this.handleDragStart.bind(this),
style: deepExtend({}, styles.container, {
'position': 'relative',
'height': imgHeight
'height': 'imgHeight',
'width': imgWidth
}),
ref: 'container' },
imageNode,
Expand Down Expand Up @@ -733,6 +751,8 @@ Cropper.PropTypes = {
ratio: PropTypes.number,
width: PropTypes.number,
height: PropTypes.number,
// 0 for not limiting else max-height in px
limitHeight: PropTypes.number,
fixedRatio: PropTypes.bool,
allowNewSelection: PropTypes.bool,
disabled: PropTypes.bool,
Expand All @@ -750,6 +770,7 @@ Cropper.defaultProps = {
ratio: 1,
originX: 0,
originY: 0,
limitHeight: 0,
styles: {},
onImgLoad: function onImgLoad() {},
beforeImgLoad: function beforeImgLoad() {}
Expand Down
Loading