Background

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

Show/hide the background mask:

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

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:

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

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:

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

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;

Set an image within the camera frame:

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

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:

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

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:

SwiftObjective-C Kotlin Java Flutter React Native Ionic Cordova.NET MAUI

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;

Background

Next Steps