Canvas 100px when opened in a modal

[fenos]

Hi, I really enjoy using this plugin but when I use it in a modal the canvas size stay to 100px and I couldn't find a way to fix this issue. Why he doesn't become bigger when I put a big image? Please help to fix this please.

How i Initialise the cropper

<div class="cropArea">
        <img-crop image="image.file.image"
                  result-image="cropper.cropperImage"></img-crop>
    </div>

Css crop area:

.cropArea {
  background: #E4E4E4;
  overflow: hidden;
  width:500px;
  height:350px;
  margin: auto;
}

[alexk111]

@fenos Thank you for the question. Can you provide a demo page so that I could execute it on my side and find what causes the problem.

[CyberFerret]

I am having the same issue when trying to use within a Modal dialog in Ionic/Angular. No matter what the size of the parent

, the canvas size seems to always resort to 100 px by 1nn px which is frustrating.

My HTML code within the Modal:

<ion-content class="scroll-content ionic-scroll  has-header"><div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);">

          <div class="spacer" style="height: 50px;"></div>
          <div class="textcenter cropArea">
            <img-crop image="image.original" result-image="image.cropped" area-type="square"><canvas width="149" height="100" style="margin-top: -50px; margin-left: -74.9318801089918px; cursor: default;"></canvas></img-crop>
          </div>
          <div class="padding center textcenter">
            <img ng-hide="image.cropped == null" class="" ng-src="data:image/png;base64,...base64data...">
          </div>
          <div class="padding">
            <button class="button button-block button-assertive bgdark" ng-disabled="image.cropped == null" ng-click="saveCropImage(image.cropped)">Save Entry</button>
          </div>

        </div><div class="scroll-bar scroll-bar-v"><div class="scroll-bar-indicator scroll-bar-fade-out" style="-webkit-transform: translate3d(0px, 0px, 0px) scaleY(1); height: 502px;"></div></div></ion-content>

CSS for .cropArea is:

.cropArea {
  background: #E4E4E4;
  overflow: hidden;
  width:300px;
  height:400px;
}

This always translates to: (when viewed in Chrome debugger):

<img-crop image="image.original" result-image="image.cropped" area-type="square"><canvas width="149" height="100" style="margin-top: -50px; margin-left: -74.9318801089918px; cursor: default;"></canvas></img-crop>

Something seems to be happening with the height and width calculations for the canvas, and it seems to be defaulting to the smallest size possible. (actual image is 550 x 367).

[dlsso]

I am having the same issue also, but I figured out what is happening. The reason is that hiding the modal uses display: none which sets the size of the element to 0. Then ng-img-crop does this:

      // Update CropHost dimensions when the directive element is resized
      scope.$watch(
        function () {
          return [element[0].clientWidth, element[0].clientHeight];
        },
        function (value) {
          console.log("value", value)
          cropHost.setMaxDimensions(value[0],value[1]);
          updateResultImage(scope);
        },
        true
      );

Which of course would set the size to 0 except there is a line var minCanvasDims=[100,100], that prevents it from going all the way to zero.

I'm not sure what the best solution is, but if you fork ng-img-crop and set the 100, 100 to the the size you want that should quick fix it.

[richyarD]

@dlsso good solution. It helped me. But in my case, this line cropHost.setMaxDimensions(value[0],value[1]); had to be edited. Just change value[0] and value[1] to some big number, and it will allow cropper to rescale canvas to some bigger dimensions, not just 300x300.

[DeividVM]

Another possible solution is insert into CSS the attributes of width and height with display:block which its required to apply the dimensions.

      img-crop {
        display: block;
        width: 100%;
        height: 100%;
        canvas{
          margin: 0!important;
        }
      }

Its work for me.

[dlsso]

I like the idea of solving it with CSS. Assuming that solution works the way I imagine it does - that's probably the way to go.

[fredtma]

if you having issues with positioning and size, try

<style>
.cropArea {
background: #E4E4E4;
overflow: hidden;
width:400px;
height:400px;
display:block;
position: relative;
}
.cropArea canvas{
margin: 0!important;
}
</style>
<div>
    <img-crop image="image.file.image" class="cropArea" result-image="cropper.cropperImage"></img-crop>
</div>

Notice I extended @DeividVM css, the style has display:block and the class cropArea is placed on the directive and not the DIV container. this worked for me.

[rtvisser]

For me this worked, as the parent has a width and a height set, take this width and height to set the max dimensions. To do this change the following code:

// Update CropHost dimensions when the directive element is resized
      scope.$watch(
        function () {
          return [element[0].clientWidth, element[0].clientHeight];
        },
        function (value) {
          console.log("value", value)
          cropHost.setMaxDimensions(value[0],value[1]);
          updateResultImage(scope);
        },
        true
      );

into:

scope.$watch(
                    function () {
                        return [element[0].parentElement.clientWidth, element[0].parentElement.clientHeight];
                    },
                    function (value) {
                            cropHost.setMaxDimensions(value[0],value[1]);
                            updateResultImage(scope);
                    },
                    true
                );

[deckikwok]

@DeividVM @fredtma the css solution rocks. thanks.

[anilkoranne3]

@alexk111 the issue is coming for Canvas 100px when opened in a modal. @fenos have you got any solution for this. I also tried the CSS which are mentioned above are not changing anything for canvas. The CSS written above works but when we resize or move the canvas. Can you please help me. Thanks in advance.

[shehi]

Same thing happening in Bootstrap-3 modals as well. Only extremely large images (3000+ px width) get scaled down to max-width settings. Everything else is scaled down to 100px.

[phamhuyhoang95]

@anilkoranne3 you need to change minCanvasDims=[100,100] to minCanvasDims[x,y] minCavansDims variable can be found in ngImgCrop.js x is the min width y is min height for example minCanvasDims[300,300] don't worry about fix size because when you moving crop-area ngImgCrop will update size of image immediately

[amor2224]

@DeividVM @fredtma the css solution worked like a charm. Thank you!

[ozgunozankilic]

Although I'm using Cropper.js rather than ngImgCrop, I had the very same problem (even the pixel values were the same) and I found this page while searching for a solution. I decided to write my solution anyway, because I think it might be helpful for people coming from Google and even people using ngImgCrop.

The easiest solution I could find is to change when the cropping tool is initialized. Instead of initializing it with a button click that toggles the modal, initializing it when the modal is shown was enough by itself. So, if you're using Bootstrap:

$("#yourModal").on('shown.bs.modal', function() { 
    // initialize the cropper here
});