--- title: "IBarcodeItemData | Customer's Canvas On-Premises" canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IBarcodeItemData/" --- # IBarcodeItemData > A structure defining the default parameters of barcodes. ## Interfaces ### IBarcodeItemData #### Example ```json { "widgets": { "Toolbox": { "buttons": [ "QrCode", { "action": "CustomBarcode", "iconClass": "cc-icon-qr-code", "itemConfig": { "barcodeContent": { "barcodeFormat": "QrUrl", "url": "example.com" }, "name": "Custom barcode", "color": "rgb(255,0,0)", "width": "100", "location": { "originX": "left", "originY": "bottom", "x": "0%", "y": "100%" }, "barcodeOptions": { "margin": 0 }, "manipulationPermissions": { "allowMoveHorizontal": false, "allowMoveVertical": false, "resizeGrips": { "edge": false, "corner": [] } } } } ] } } } ``` #### Extends - [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata)\<`TOverlayEffect`\> #### Type Parameters | Type Parameter | | ------ | | `TOverlayEffect` | | `TBarcodeFormat` | | `TBarcodeSubType` | #### Properties ##### addImageAsPlaceholder? ```ts optional addImageAsPlaceholder?: boolean; ``` Allows adding images to the canvas as placeholders. The default value is `false`. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`addImageAsPlaceholder`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#addimageasplaceholder) ##### adjustSize? ```ts optional adjustSize?: boolean; ``` ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`adjustSize`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#adjustsize) ##### angle? ```ts optional angle?: number; ``` An angle, which design elements are rotated to. By default, this value is `0`. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`angle`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#angle) ##### barcodeContent? ```ts optional barcodeContent?: BarcodeContentType; ``` The content of barcodes. ##### barcodeOptions? ```ts optional barcodeOptions?: IBarcodeOptions; ``` Defines encoding options. ##### barcodePermissions? ```ts optional barcodePermissions?: IBarcodePermissionsData; ``` Defines permissions for barcodes. ##### blendMode? ```ts optional blendMode?: BlendMode; ``` A blend mode that applies to design elements being added to the canvas. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`blendMode`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#blendmode) ##### borderColor? ```ts optional borderColor?: string; ``` The border color. The default value is `"rgba(0,0,0,1)"`. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`borderColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#bordercolor) ##### borderWidth? ```ts optional borderWidth?: number; ``` The border width, in points. The default value is `1`. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`borderWidth`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#borderwidth) ##### color? ```ts optional color?: string; ``` Defines the barcode color. The default value is `"rgb(0, 0, 0)"`. ##### effect? ```ts optional effect?: ImageEffect; ``` Defines an effect for images being added to the canvas. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`effect`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#effect) ##### fillColor? ```ts optional fillColor?: string; ``` The fill color. The default value is `"rgba(0, 0, 0, 0)"`. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`fillColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#fillcolor) ##### height? ```ts optional height?: string | number; ``` The height of design elements being added to the canvas, in points or percent. For QR codes, the `width` value is used for both `width` and `height`. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`height`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#height) ##### imagePermissions? ```ts optional imagePermissions?: IImagePermissionsData; ``` Defines permissions for images being added to the canvas. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`imagePermissions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#imagepermissions) ##### imageUrl? ```ts optional imageUrl?: string; ``` A link to the default image. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`imageUrl`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#imageurl) ##### isVariable? ```ts optional isVariable?: boolean; ``` Marks a design element as a variable item. The default value is `false`. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`isVariable`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#isvariable) ##### itemPermissions? ```ts optional itemPermissions?: IItemPermissionsData; ``` A structure defining the Item Menu and the Floating item toolbar for design elements. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`itemPermissions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#itempermissions) ##### location? ```ts optional location?: ILocationData; ``` The coordinates of design elements being added to the canvas. By default, you can add them to the center of your product. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`location`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#location) ##### manipulationPermissions? ```ts optional manipulationPermissions?: IManipulationPermissionsData; ``` A structure defining the manipulation permissions for design elements. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`manipulationPermissions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#manipulationpermissions) ##### maskOpacity? ```ts optional maskOpacity?: number; ``` The mask opacity of an item. The default value is `0.45`. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`maskOpacity`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#maskopacity) ##### name? ```ts optional name?: string; ``` The name of design elements being added to the canvas. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`name`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#name) ##### opacity? ```ts optional opacity?: number; ``` An opacity that applies to design elements. This value can be from `0` to `1`. By default, it is `1`. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`opacity`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#opacity) ##### overlayColor? ```ts optional overlayColor?: string; ``` _Deprecated, use `overlayEffect` instead_. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`overlayColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#overlaycolor) ##### overlayEffect? ```ts optional overlayEffect?: TOverlayEffect; ``` Defines an overlay color for images being added to the canvas. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`overlayEffect`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#overlayeffect) ##### overprintFill? ```ts optional overprintFill?: boolean; ``` ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`overprintFill`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#overprintfill) ##### overprintStroke? ```ts optional overprintStroke?: boolean; ``` ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`overprintStroke`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#overprintstroke) ##### shapePermissions? ```ts optional shapePermissions?: IShapePermissionsData; ``` Defines permissions for shapes. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`shapePermissions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#shapepermissions) ##### textWrappingMode? ```ts optional textWrappingMode?: WrappingMode; ``` A wrapping mode that applies to wrap text around design elements, one of `"none"`, `"square"`, or `"tight"`. By default, it is `"none"`. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`textWrappingMode`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#textwrappingmode) ##### themeBinding? ```ts optional themeBinding?: IThemeBindingData; ``` A style or a color that applies to new design elements. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`themeBinding`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#themebinding) ##### violationSettings? ```ts optional violationSettings?: IViolationSettings; ``` A structure defining the design validation parameters and warnings. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`violationSettings`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#violationsettings) ##### visible? ```ts optional visible?: boolean; ``` Indicates whether the design element is visible on the canvas. The default value is `true`. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`visible`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#visible) ##### visualizationPermissions? ```ts optional visualizationPermissions?: IVisualizationPermissionsData; ``` A structure defining the visualization permissions for design elements. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`visualizationPermissions`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#visualizationpermissions) ##### width? ```ts optional width?: string | number; ``` The width of design elements being added to the canvas, in points or percent. ###### Inherited from [`IImageItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#iimageitemdata).[`width`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IImageItemData.md#width)