Dimensions of viewport/boundry wrt Image quality

[andyverbunt]

Hi,

I'm using ng-croppie to crop an image that is eventually shown on a mobile phone.
My initial boundry was 300x130 and the viewport 600x260. This kinda looks good on an iPhone 6, but on an iPhone 6 Plus the image is scaled (blown up), and you can see that the quality isn't so good.

So now I've changed the boundry to 600x260 and the viewport is 800x320.
My problem now is that I need too much space on screen to do the cropping.

Is there a way to show a small boundry/viewport but do the actual cropping on the original picture with the dimensions above (or even bigger) to ensure quality of the cropped image? Other tricks to ensure the quality of the image?

Thanks, Andy

[TD-Stanley]

You can set the pixel size within the directive, and it will turn out fine as long as the dimensions are the same ratio (1:1 for example) as your viewport.

 c.result({ type: 'canvas', size: { width: 400, height: 400}}).then(function(img){
                       scope.$apply(function(){
                         scope.ngModel = img
                       })
                     })

So, you can set your viewport / boundary to whatever works best for the screen size, and it will always save the actual image as 400 x 400 in my example above.