Skip to content

Background

Camera frame screen in the current UI design with the background image and background mask highlighted

By default, the opaque background mask is applied and its color is set in accordance with the currently selected OS color theme (light or dark). You can customize the background mask by the parameters described further.

Camera frame screen in the deprecated UI design with the background image and background mask highlighted

By default, the transparent background mask is applied. You can customize it by the parameters described further.

  • You can decide whether to darken the background around the document detection frame.

Show/hide the background mask:

DocReader.shared.customization.showBackgroundMask = true

[RGLDocReader shared].customization.showBackgroundMask = YES;

DocumentReader.Instance().customization().edit().setShowBackgroundMask(true).apply()

DocumentReader.Instance().customization().edit().setShowBackgroundMask(true).apply();

DocumentReader.instance.customization.showBackgroundMask = true;

DocumentReader.setCustomization({
    showBackgroundMask: true,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    showBackgroundMask: true
});

DocumentReader.setCustomization({
    showBackgroundMask: true,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().SetShowBackgroundMask(true).Apply();

// iOS
RGLDocReader.Shared.Customization.ShowBackgroundMask = true;
  • Change the intensity of the background mask:
DocReader.shared.customization.backgroundMaskAlpha = 0.3

[RGLDocReader shared].customization.backgroundMaskAlpha = 0.3;

DocumentReader.Instance().customization().edit().setBackgroundMaskAlpha(0.5F).apply()

DocumentReader.Instance().customization().edit().setBackgroundMaskAlpha(0.5F).apply();

DocumentReader.instance.customization.backgroundMaskAlpha = .5;

DocumentReader.setCustomization({
    backgroundMaskAlpha: 0.5,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    backgroundMaskAlpha: 0.5
});

DocumentReader.setCustomization({
    backgroundMaskAlpha: 0.5,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().SetBackgroundMaskAlpha((Java.Lang.Float)0.5F).Apply();

// iOS
RGLDocReader.Shared.Customization.BackgroundMaskAlpha = 0.5F;
  • Change the color of the background mask:
DocReader.shared.customization.backgroundMaskColor = UIColor.purple

[RGLDocReader shared].customization.backgroundMaskColor = [UIColor purpleColor];

DocumentReader.Instance().customization().edit().setBackgroundMaskColor("#2596be").apply()

DocumentReader.Instance().customization().edit().setBackgroundMaskColor("#2596be").apply();

DocumentReader.instance.customization.backgroundMaskColor = Colors.purple;

DocumentReader.setCustomization({
    backgroundMaskColor: 0xff2596be
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    backgroundMaskColor: 0xff2596be
});

DocumentReader.setCustomization({
    backgroundMaskColor: 0xff2596be
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().setBackgroundMaskColor("#2596be").Apply();

// iOS
RGLDocReader.Shared.Customization.BackgroundMaskColor = UIColor.Purple;

DocReader.shared.customization.borderBackgroundImage = UIImage(named: "icon")

[RGLDocReader shared].customization.borderBackgroundImage = [UIImage imageNamed:@"icon"];

DocumentReader.Instance().customization().edit().setBorderBackgroundImage(getDrawable(R.drawable.icon)).apply()

DocumentReader.Instance().customization().edit().setBorderBackgroundImage(getResources().getDrawable(R.drawable.icon)).apply();

DocumentReader.instance.customization.borderBackgroundImage = await rootBundle.load("icon");

DocumentReader.setCustomization({
    borderBackgroundImage: "Base64String",
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    borderBackgroundImage: "Base64String"
});

DocumentReader.setCustomization({
    borderBackgroundImage: "Base64String",
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().SetBorderBackgroundImage(GetDrawable(Resource.Drawable.icon)).Apply();

// iOS
RGLDocReader.Shared.Customization.BorderBackgroundImage = UIImage.FromBundle("icon.png");
  • To change the scaling of the image within the camera frame, use:
DocReader.shared.customization.borderBackgroundImageContentMode = UIView.ContentMode.scaleAspectFit

[RGLDocReader shared].customization.borderBackgroundImageContentMode = UIViewContentModeScaleAspectFit;

DocumentReader.Instance().customization().edit().setBorderBackgroundImageScaleType(ImageView.ScaleType.MATRIX).apply()
val matrix = Matrix()
DocumentReader.Instance().customization().edit().setBorderBackgroundImageMatrix(matrix).apply()

DocumentReader.Instance().customization().edit().setBorderBackgroundImageScaleType(ImageView.ScaleType.MATRIX).apply();
Matrix matrix = new Matrix();
DocumentReader.Instance().customization().edit().setBorderBackgroundImageMatrix(matrix).apply();

DocumentReader.instance.customization.borderBackgroundImageTransformsIOS = ViewContentMode.SCALE_ASPECT_FIT;
DocumentReader.instance.customization.borderBackgroundImageTransformsAndroid = [];

DocumentReader.setCustomization({
    borderBackgroundImageContentMode: Enum.UIViewContentMode.ScaleAspectFit,
    borderBackgroundImageMatrix: [],
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    borderBackgroundImageContentMode: Enum.UIViewContentMode.ScaleAspectFit,
    borderBackgroundImageMatrix: []
});

DocumentReader.setCustomization({
    borderBackgroundImageContentMode: Enum.UIViewContentMode.ScaleAspectFit,
    borderBackgroundImageMatrix: [],
}, function (m) { }, function (e) { console.log(e); });

// Android
Matrix matrix = new();
DocumentReader.Instance().Customization().Edit().SetBorderBackgroundImageScaleType(ImageView.ScaleType.Matrix).SetBorderBackgroundImageMatrix(matrix).Apply();

// iOS
RGLDocReader.Shared.Customization.BorderBackgroundImageContentMode = UIViewContentMode.ScaleAspectFit;
  • Set the color for the preview background that is outside of the background mask:
DocReader.shared.customization.cameraPreviewBackgroundColor = UIColor.purple

[RGLDocReader shared].customization.cameraPreviewBackgroundColor = [UIColor purpleColor];

DocumentReader.Instance().customization().edit().setCameraPreviewBackgroundColor("#2596be").apply()

DocumentReader.Instance().customization().edit().setCameraPreviewBackgroundColor("#2596be").apply();

DocumentReader.instance.customization.cameraPreviewBackgroundColor = Colors.purple;

DocumentReader.setCustomization({
    cameraPreviewBackgroundColor: 0xff2596be
}, _ => { }, _ => { });

DocumentReader.setCustomization({
    cameraPreviewBackgroundColor: 0xff2596be
});

DocumentReader.setCustomization({
    cameraPreviewBackgroundColor: 0xff2596be
}, function (m) { }, function (e) { });

// Android
DocumentReader.Instance().Customization().Edit().SetCameraPreviewBackgroundColor("#2596be").Apply();

// iOS
RGLDocReader.Shared.Customization.CameraPreviewBackgroundColor = UIColor.Purple;

Next Steps