Using gradient or image as "color" for QR code

Using the "swap_foreground_background" parameter for a barcode object, it is possible to apply arbitrary visual content as the "color" for a barcode or matrix code. "swap_foreground_background" essentiallly swaps the foreground (CSS "color" property) and the background (CSS "background" property) color. While in CSS for the foreground color only regular or custom pdfChip color definitions can be used, the possibilities for "background" are much richer. Here it is possible to define gradients or images.

The following is just one example of taking advantage of the "swap_foreground_background" parameter. The HTML source file can be found for download at the bottom of this article.

Regular "black on white" QR Code 

		<object class="barcode_object" 
				type="application/barcode" 
				style = "
					color: black;
					background-color: #ddd; 
				"
		> 
			<param name="type" value="QR-Code">
			<param name="modulewidth" value="1mm">
			<param name="data" value="www.callassoftware.com">
			<param name="quietzoneleft" value="1">
			<param name="quietzoneright" value="1">
			<param name="quietzonetop" value="1">
			<param name="quietzonebottom" value="1">
			<param name="quietzoneunit" value="X">
		</object>

Defining a gradient as the "color" for a QR Code 

	<p>
		<object class="barcode_object" 
				type="application/barcode" 
				style = "
					color: #ddd;
					background: linear-gradient(135deg, firebrick, 
						red, orange, orange, green, blue, indigo, violet);
				"
		> 
			<param name="type" value="QR-Code">
			<param name="modulewidth" value="1mm">
			<param name="data" value="www.callassoftware.com">
			<param name="swap_foreground_background" value="true">			<param name="quietzoneleft" value="1">
			<param name="quietzoneright" value="1">
			<param name="quietzonetop" value="1">
			<param name="quietzonebottom" value="1">
			<param name="quietzoneunit" value="X">
		</object>
	</p>

Defining an image as the "color" for a QR Code 

		<object class="barcode_object" 
				type="application/barcode" 
				style = "
					color: #ddd;
					background: url('img/wood.jpg') ;
					background-size: 96pt 96pt;
				"
		> 
			<param name="type" value="QR-Code">
			<param name="modulewidth" value="1mm">
			<param name="data" value="www.callassoftware.com">
			<param name="swap_foreground_background" value="true">
			<param name="quietzoneleft" value="1">
			<param name="quietzoneright" value="1">
			<param name="quietzonetop" value="1">
			<param name="quietzonebottom" value="1">
			<param name="quietzoneunit" value="X">
		</object>

Defining an image based pattern as the "color" for cells in a QR Code 

		<object class="barcode_object" 
				type="application/barcode" 
				style = "
					color: #ddd;
					background: url('img/icon_pdfchip.svg') ;
					background-size: 6pt 6pt;
					background-repeat: repeat;
				"
		> 
			<param name="type" value="QR-Code">
			<param name="modulewidth" value="6pt">
			<param name="data" value="www.callassoftware.com">
			<param name="swap_foreground_background" value="true">
			<param name="quietzoneleft" value="1">
			<param name="quietzoneright" value="1">
			<param name="quietzonetop" value="1">
			<param name="quietzonebottom" value="1">
			<param name="quietzoneunit" value="X">
		</object>

For the HTML source code please download the ZIP file below:

Using_gradient_or_image_as_"color"_for_QR_co-2.zip