React-cropper - cropBox is out of the image





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







-1















I'm using the latest cropper.js react package react-cropper in my current project and I'am just lost. The problem is, that the crop area can go outside of the image, which should not. I have tried everything I can think of.



Here is the _crop method which is called on every change in cropper.



componentDidMount = () => {
sessionStorage.setItem('shouldMove', false)
}

_crop = ( e ) => {
var canvasData = document.getElementsByClassName('cropper-hidden')
[0].cropper.canvasData
var cropBoxData = this.refs.cropper.getCropBoxData();

if ( sessionStorage.getItem('shouldMove') === 'false' ) {
sessionStorage.setItem( 'currentLeft', cropBoxData.left )
sessionStorage.setItem( 'currentTop', cropBoxData.top )
sessionStorage.setItem('shouldMove', true)
}else {
if (
cropBoxData.left <= canvasData.left ||
cropBoxData.top <= canvasData.top ||
cropBoxData.left + cropBoxData.width > canvasData.width +
canvasData.left ||
cropBoxData.top + cropBoxData.height > canvasData.height +
canvasData.top
) {
cropBoxData.left = sessionStorage.getItem( 'currentLeft' )
cropBoxData.top = sessionStorage.getItem( 'currentTop' )
}
}}

//render

<Cropper
ref='cropper'
src={URL.createObjectURL(this.props.image)}
aspectRatio={this.props.template.aspect_ratio}
guides={true}
zoomTo={ this.state.zoomValue }
dragMode="move"
crop={this._crop}
/>


I know it's a sessionStorage nightmare, but I can't use state because it would reset whole cropper. I'm also getting the canvasData from the image tag, because the cropper.canvasData() function is not working in this react package.



In my code above, react is able to detect that crop area is outside of the image, but I don't know what I should do there. I tried to set the position of the crop area to the first position where it's outside of the image. But the data is not changing.










share|improve this question

























  • Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions.

    – halfer
    Nov 16 '18 at 22:10


















-1















I'm using the latest cropper.js react package react-cropper in my current project and I'am just lost. The problem is, that the crop area can go outside of the image, which should not. I have tried everything I can think of.



Here is the _crop method which is called on every change in cropper.



componentDidMount = () => {
sessionStorage.setItem('shouldMove', false)
}

_crop = ( e ) => {
var canvasData = document.getElementsByClassName('cropper-hidden')
[0].cropper.canvasData
var cropBoxData = this.refs.cropper.getCropBoxData();

if ( sessionStorage.getItem('shouldMove') === 'false' ) {
sessionStorage.setItem( 'currentLeft', cropBoxData.left )
sessionStorage.setItem( 'currentTop', cropBoxData.top )
sessionStorage.setItem('shouldMove', true)
}else {
if (
cropBoxData.left <= canvasData.left ||
cropBoxData.top <= canvasData.top ||
cropBoxData.left + cropBoxData.width > canvasData.width +
canvasData.left ||
cropBoxData.top + cropBoxData.height > canvasData.height +
canvasData.top
) {
cropBoxData.left = sessionStorage.getItem( 'currentLeft' )
cropBoxData.top = sessionStorage.getItem( 'currentTop' )
}
}}

//render

<Cropper
ref='cropper'
src={URL.createObjectURL(this.props.image)}
aspectRatio={this.props.template.aspect_ratio}
guides={true}
zoomTo={ this.state.zoomValue }
dragMode="move"
crop={this._crop}
/>


I know it's a sessionStorage nightmare, but I can't use state because it would reset whole cropper. I'm also getting the canvasData from the image tag, because the cropper.canvasData() function is not working in this react package.



In my code above, react is able to detect that crop area is outside of the image, but I don't know what I should do there. I tried to set the position of the crop area to the first position where it's outside of the image. But the data is not changing.










share|improve this question

























  • Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions.

    – halfer
    Nov 16 '18 at 22:10














-1












-1








-1








I'm using the latest cropper.js react package react-cropper in my current project and I'am just lost. The problem is, that the crop area can go outside of the image, which should not. I have tried everything I can think of.



Here is the _crop method which is called on every change in cropper.



componentDidMount = () => {
sessionStorage.setItem('shouldMove', false)
}

_crop = ( e ) => {
var canvasData = document.getElementsByClassName('cropper-hidden')
[0].cropper.canvasData
var cropBoxData = this.refs.cropper.getCropBoxData();

if ( sessionStorage.getItem('shouldMove') === 'false' ) {
sessionStorage.setItem( 'currentLeft', cropBoxData.left )
sessionStorage.setItem( 'currentTop', cropBoxData.top )
sessionStorage.setItem('shouldMove', true)
}else {
if (
cropBoxData.left <= canvasData.left ||
cropBoxData.top <= canvasData.top ||
cropBoxData.left + cropBoxData.width > canvasData.width +
canvasData.left ||
cropBoxData.top + cropBoxData.height > canvasData.height +
canvasData.top
) {
cropBoxData.left = sessionStorage.getItem( 'currentLeft' )
cropBoxData.top = sessionStorage.getItem( 'currentTop' )
}
}}

//render

<Cropper
ref='cropper'
src={URL.createObjectURL(this.props.image)}
aspectRatio={this.props.template.aspect_ratio}
guides={true}
zoomTo={ this.state.zoomValue }
dragMode="move"
crop={this._crop}
/>


I know it's a sessionStorage nightmare, but I can't use state because it would reset whole cropper. I'm also getting the canvasData from the image tag, because the cropper.canvasData() function is not working in this react package.



In my code above, react is able to detect that crop area is outside of the image, but I don't know what I should do there. I tried to set the position of the crop area to the first position where it's outside of the image. But the data is not changing.










share|improve this question
















I'm using the latest cropper.js react package react-cropper in my current project and I'am just lost. The problem is, that the crop area can go outside of the image, which should not. I have tried everything I can think of.



Here is the _crop method which is called on every change in cropper.



componentDidMount = () => {
sessionStorage.setItem('shouldMove', false)
}

_crop = ( e ) => {
var canvasData = document.getElementsByClassName('cropper-hidden')
[0].cropper.canvasData
var cropBoxData = this.refs.cropper.getCropBoxData();

if ( sessionStorage.getItem('shouldMove') === 'false' ) {
sessionStorage.setItem( 'currentLeft', cropBoxData.left )
sessionStorage.setItem( 'currentTop', cropBoxData.top )
sessionStorage.setItem('shouldMove', true)
}else {
if (
cropBoxData.left <= canvasData.left ||
cropBoxData.top <= canvasData.top ||
cropBoxData.left + cropBoxData.width > canvasData.width +
canvasData.left ||
cropBoxData.top + cropBoxData.height > canvasData.height +
canvasData.top
) {
cropBoxData.left = sessionStorage.getItem( 'currentLeft' )
cropBoxData.top = sessionStorage.getItem( 'currentTop' )
}
}}

//render

<Cropper
ref='cropper'
src={URL.createObjectURL(this.props.image)}
aspectRatio={this.props.template.aspect_ratio}
guides={true}
zoomTo={ this.state.zoomValue }
dragMode="move"
crop={this._crop}
/>


I know it's a sessionStorage nightmare, but I can't use state because it would reset whole cropper. I'm also getting the canvasData from the image tag, because the cropper.canvasData() function is not working in this react package.



In my code above, react is able to detect that crop area is outside of the image, but I don't know what I should do there. I tried to set the position of the crop area to the first position where it's outside of the image. But the data is not changing.







reactjs cropper cropperjs






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 16 '18 at 22:10









halfer

14.8k759118




14.8k759118










asked Nov 16 '18 at 22:01









Johny JiranJohny Jiran

93




93













  • Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions.

    – halfer
    Nov 16 '18 at 22:10



















  • Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions.

    – halfer
    Nov 16 '18 at 22:10

















Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions.

– halfer
Nov 16 '18 at 22:10





Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions.

– halfer
Nov 16 '18 at 22:10












1 Answer
1






active

oldest

votes


















0














Wow. ok, if anybody will struggle with the same issue, the answer is pretty simple but I really couldn't find it anywhere.
Just set the viewMode to "2" like so:



<Cropper
ref='cropper'
src={this.props.image}
aspectRatio={ar}
guides={true}
zoomTo={ this.state.zoomValue }
dragMode="move"
crop={this._crop}
viewMode = {2} <-----
/>


and it will work.






share|improve this answer
























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53346018%2freact-cropper-cropbox-is-out-of-the-image%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    Wow. ok, if anybody will struggle with the same issue, the answer is pretty simple but I really couldn't find it anywhere.
    Just set the viewMode to "2" like so:



    <Cropper
    ref='cropper'
    src={this.props.image}
    aspectRatio={ar}
    guides={true}
    zoomTo={ this.state.zoomValue }
    dragMode="move"
    crop={this._crop}
    viewMode = {2} <-----
    />


    and it will work.






    share|improve this answer




























      0














      Wow. ok, if anybody will struggle with the same issue, the answer is pretty simple but I really couldn't find it anywhere.
      Just set the viewMode to "2" like so:



      <Cropper
      ref='cropper'
      src={this.props.image}
      aspectRatio={ar}
      guides={true}
      zoomTo={ this.state.zoomValue }
      dragMode="move"
      crop={this._crop}
      viewMode = {2} <-----
      />


      and it will work.






      share|improve this answer


























        0












        0








        0







        Wow. ok, if anybody will struggle with the same issue, the answer is pretty simple but I really couldn't find it anywhere.
        Just set the viewMode to "2" like so:



        <Cropper
        ref='cropper'
        src={this.props.image}
        aspectRatio={ar}
        guides={true}
        zoomTo={ this.state.zoomValue }
        dragMode="move"
        crop={this._crop}
        viewMode = {2} <-----
        />


        and it will work.






        share|improve this answer













        Wow. ok, if anybody will struggle with the same issue, the answer is pretty simple but I really couldn't find it anywhere.
        Just set the viewMode to "2" like so:



        <Cropper
        ref='cropper'
        src={this.props.image}
        aspectRatio={ar}
        guides={true}
        zoomTo={ this.state.zoomValue }
        dragMode="move"
        crop={this._crop}
        viewMode = {2} <-----
        />


        and it will work.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 16 '18 at 22:32









        Johny JiranJohny Jiran

        93




        93
































            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53346018%2freact-cropper-cropbox-is-out-of-the-image%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Bressuire

            Vorschmack

            Quarantine