angular-img-cropper无法在方形图片的方形裁剪上设置裁剪尺寸工具

Question

We are using https://github.com/AllanBishop/angular-img-cropper and so far, its has been great, but today we stumble into a bug, basically, when you load a squared image like this one:

The cropper tool becomes tiny and almost impossible to use, and if you click the yellow cross, its goes insanely big.

We just posted the bug on the dev's git https://github.com/AllanBishop/angular-img-cropper/issues/93

The bug is easily replicated using devs bin https://github.com/AllanBishop/angular-img-cropper just go there, modify the html to have this parameters in the canvas crop-width="720" crop-height="720" and load the first iamge on the post image.

Answer 1

The best solution was to add a white image for a .5 seconds while the cropper tool gets initialized, then set the image that the user actually selected using a timeout.

vm.setCropperImage =  function(imgBase64) {
            var imgPlaceholder = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAAqCAIAAACY8VRUAAAAA3NCSVQICAjb4U/gAAAASUlEQVRYhe3OsQ3AIBAAsZD9d35WoDgJCnsCr5n5nvffDhyx7Fh2LDuWHcuOZceyY9mx7Fh2LDuWHcuOZceyY9mx7Fh2LDuWnQ30YQNRzV7JZAAAAABJRU5ErkJggg==';  
            vm.cropper.sourceImage = imgPlaceholder;

            $timeout(function() {
                vm.cropper.sourceImage = imgBase64;
                $scope.ngModel = imgBase64;
            }, 50);
        };