How to save an image from the Surface View In Good Quality

I am trying to build an app where the user can take a picture using the Surface View Component. Right now I save the Surface View image like this:

  • When the user presses a button inside the Surface View it calls the Surface View ‘.take a picture’ event.
  • When ‘Image Created’ set a canvas background image to the image.
  • Open a lightbox (just to test the app will in the future just store the image in tiny_db) with the image using the Canvas ‘save as block’ and the Image Editor’s ‘rotate’ block (rotates the image 90 degrees).

This works but it is not usable because the image quality is extremely bad! I just want to save the image taken by the Surface View but putting the image via a canvas makes the quality bad. You can’t for some reason open the lightbox with the image provided in the ‘When image created’ block because the second time you take a picture just shows the old one.

I would preferably also like the surface view to show a ‘border’ of sort so that the user can align what they are taking a picture of with a rectangle on the surface view and the app would then crop the image to the same size (I would use this in a notebook/document scanner app), but I haven’t gotten this far since the images saved via the canvas are unusable because of there poor quality.

EDIT: I have now noticed that it is the Surface View component that takes low quality pictures. It is not the canvas that is the big problem it is the fact that the Surface View component looks good but when you take a picture the quality is actually bad.