Merge pull request #481 from newfold-labs/logo-background-contrast-bw…

…-images

Logo background contrast bw images

src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/index.js

@@ -16,9 +16,65 @@ const ImageUploaderWithText = ( { image, imageSetter } ) => {
 	const { theme } = useContext( ThemeContext );
 	const [ isUploading, setIsUploading ] = useState( false );
 	const [ onDragActive, setOnDragActive ] = useState( false );
+	const [ pngLogoBgColor, setPngLogoBgColor ] = useState( 'transparent' );
 
 	const { updateSiteGenErrorStatus } = useDispatch( nfdOnboardingStore );
 
+	const getDominantColor = ( imageSrc, callback ) => {
+		// eslint-disable-next-line no-undef
+		const img = new Image();
+		img.crossOrigin = 'Anonymous';
+		/* Registering on load before src to so that event listener is ready capture when image loads */
+		img.onload = () => {
+			const canvas = document.createElement( 'canvas' );
+			const ctx = canvas.getContext( '2d' );
+			canvas.width = img.width;
+			canvas.height = img.height;
+			ctx.drawImage( img, 0, 0 );
+			const imageData = ctx.getImageData(
+				0,
+				0,
+				canvas.width,
+				canvas.height
+			);
+			const data = imageData.data;
+			let r = 0,
+				g = 0,
+				b = 0,
+				count = 0;
+
+			/* skip transparent areas as the 0 alpha value leads to lower rgb values even in white logos */
+			for ( let i = 0; i < data.length; i += 4 ) {
+				const alpha = data[ i + 3 ];
+				if ( alpha > 0 ) {
+					r += data[ i ];
+					g += data[ i + 1 ];
+					b += data[ i + 2 ];
+					count++;
+				}
+			}
+
+			/* Get the average rgb value of the image  */
+			if ( count > 0 ) {
+				// To avoid division by zero
+				r = Math.floor( r / count );
+				g = Math.floor( g / count );
+				b = Math.floor( b / count );
+			}
+
+			// Callback with the avrage dominant color
+			callback( `rgb(${ r }, ${ g }, ${ b })` );
+		};
+		img.src = imageSrc;
+	};
+
+	const getContrastingColor = ( color ) => {
+		/* if the contrast value more than 150 it should have black bg, otherwise white */
+		const [ r, g, b ] = color.match( /\d+/g ).map( Number );
+		const contrastValue = ( 0.2126 * r ) + ( 0.7152 * g ) + ( 0.0722 * b );
+		return contrastValue > 160 ? 'black' : 'white';
+	};
+
 	async function updateItem( fileData ) {
 		if ( fileData ) {
 			setIsUploading( true );
@@ -29,6 +85,15 @@ const ImageUploaderWithText = ( { image, imageSetter } ) => {
 			}
 			const id = res.body?.id;
 			const url = res.body?.source_url;
+
+			if ( fileData && fileData.type === 'image/png' ) {
+				// Process the image to find the dominant color
+				getDominantColor( url, ( dominantColor ) => {
+					const contrastingColor =
+						getContrastingColor( dominantColor );
+					setPngLogoBgColor( contrastingColor );
+				} );
+			}
 			imageSetter( {
 				id,
 				url,
@@ -159,14 +224,19 @@ const ImageUploaderWithText = ( { image, imageSetter } ) => {
 					) }
 					{ isImageUploaded && (
 						<div className="nfd-onboarding-image-uploader--with-text__site_logo__preview">
-							<img
-								className="nfd-onboarding-image-uploader--with-text__site_logo__preview__image"
-								src={ image.url }
-								alt={ __(
-									'Site Logo Preview',
-									'wp-module-onboarding'
-								) }
-							/>
+							<div
+								className="nfd-onboarding-image-uploader--with-text__site_logo__preview__wrapper"
+								style={ { backgroundColor: pngLogoBgColor } }
+							>
+								<img
+									className="nfd-onboarding-image-uploader--with-text__site_logo__preview__image"
+									src={ image.url }
+									alt={ __(
+										'Site Logo Preview',
+										'wp-module-onboarding'
+									) }
+								/>
+							</div>
 							<div className="nfd-onboarding-image-uploader--with-text__site_logo__preview__details">
 								<p className="nfd-onboarding-image-uploader--with-text__site_logo__preview__details__filename">
 									{ image.fileName }

src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss

@@ -93,10 +93,18 @@
 				display: flex;
 				flex-direction: row;
 
+				&__wrapper {
+					background-color: transparent;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					border-radius: 2px;
+				}
+
 				&__image {
 					width: 130px;
 					height: 100px;
-					object-fit: cover;
+					object-fit: contain;
 					border-radius: 4px;
 				}