QR Code Color

[Chris]

Is it possible to change the color of the generated QR Code?

[Shinu]

Hi Chris,

Please have a look at the following CSS I tried which works fine at my end.

CSS:

<style type="text/css">
    path
    {
        stroke: Blue;
    }
</style>

Thanks,
Shinu.

[Chris]

Oops, I need to add some additional clarification. I am creating the RadBarCode in the code behind, grabbing its generated image, and embedding the QRCode image into another image. So I don't think I can go the css route in this situation. Thanks for posting the css workaround though.

Dim barcode As RadBarcode = New RadBarcode()
 barcode.Text = "text to embed"

 'set the barcode properties
 barcode.Type = BarcodeType.QRCode
 barcode.QRCodeSettings.ECI = Modes.ECIMode.None
 barcode.QRCodeSettings.ErrorCorrectionLevel = Modes.ErrorCorrectionLevel.M
 barcode.QRCodeSettings.Mode = Modes.CodeMode.Alphanumeric
 barcode.QRCodeSettings.Version = 7 ' 1-40
 barcode.OutputType = BarcodeOutputType.EmbeddedPNG

 Using image As Image = barcode.GetImage()
    ' work with the image
 End Using

[Shinu]

Hi Chris,

The CSS works irrespective of the RadBarCode is created from code behind or declared in the mark-up and this is applicable to SVG_VML output types. If the output type is EmbeddedPNG then the QR Code is rendered as <img> element and hence the workaround is not applicable since there is no attributes such as stroke, fill etc for the <img>.

Thanks,
Shinu.

[Chris]

Sorry, I wan't clear. 

The code is never rendering the barcode control to the user. I am simply using the RadBarCode control in the code behind to generate a QRCode image that I embed into another image that I save to the filesystem. At a later point I display that composite image back to a user. There would be no chance for the css to come into play.

I appreciate the help.

[Shinu]

Hi Chris,

Straight to the point, If you are generating a RadBarCode with BarcodeOutputType as EmbeddedPNG, its not possible to set the QR code color using CSS. The CSS work around I provided will work only for RadBarCode with SVG_VML OutputType (Does not depends on whether the RadBarCode is created dynamically from C# or in ASPX).

Hope this makes clear,
Shinu.

[Konstantin Dikov]

Hi Chris,

Such functionality is not available out of the box for the RadBarcode.

For your scenario you could retrieve the generated image with the GetImage() and change the colors of that image. Here is the code that you need:

Dim barcode As New RadBarcode()
barcode.Text = "some text"
barcode.Type = BarcodeType.QRCode
Dim bm As New Bitmap(barcode.GetImage())

'The new color replacing all black pixels
Dim blackReplaceColor As Color = Color.FromArgb(255, 20, 50, 220)
'The new color replacing all white pixels
Dim whiteReplaceColor As Color = Color.FromArgb(255, 200, 250, 250)

For i As Integer = 0 To bm.Height - 1
    For y As Integer = 0 To bm.Width - 1
        If bm.GetPixel(y, i).Name = "ff000000" Then
            bm.SetPixel(y, i, blackReplaceColor)
        Else
            bm.SetPixel(y, i, whiteReplaceColor)
        End If
    Next
Next

bm.Save(MapPath("testImage.png"), System.Drawing.Imaging.ImageFormat.Png)

Furthermore, for changing the displayed image, one could use an <img> element in your markup (instead of RadBarcode), then use RadBarcode control in the code-behing and retrieve the generated image by using the GetImage() method of the control, then go through every pixel of the image and conditionally change its color and then assign that image as "src" to the "img" element:

<img id="BarcodeImage" runat="server" border="0" src="defaultImage.png" alt=""/>

And the code behind:

protected void Page_Load(object sender, EventArgs e)
{
    RadBarcode barcode = new RadBarcode();
    barcode.Text = "some text";
    barcode.Type = BarcodeType.QRCode;
    Bitmap bm = new Bitmap(barcode.GetImage());

    //The new color replacing all black pixels
    Color blackReplaceColor = Color.FromArgb(255, 20, 50, 220);
    //The new color replacing all white pixels
    Color whiteReplaceColor = Color.FromArgb(255, 200, 250, 250);

    for (int i = 0; i < bm.Height; i++)
    {
        for (int y = 0; y < bm.Width; y++)
        {
            if (bm.GetPixel(y, i).Name == "ff000000")
            {
                bm.SetPixel(y, i, blackReplaceColor);
            }
            else
            {
                bm.SetPixel(y, i, whiteReplaceColor);
            }
        }
    }

    MemoryStream stream = new MemoryStream();
    bm.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
    BarcodeImage.Src = @"data:image/gif;base64," + Convert.ToBase64String(stream.ToArray());
}

Hope that helps.

 

Regards,
Konstantin Dikov
Telerik

[Eric Garrison]

Thank you!!
Here is a stripped down version of my code in case someone else runs into this.

Protected shared function getImage()

               Dim barcode As RadBarcode = New RadBarcode()

                barcode.Text = "textToDisplay embed"

 

                applyBarcodeSettings(barcode, BarcodeType.QRCode, 110, 110)

                return applyBarcodeColor(barcode, "#FF0000")

end function

 

 

Protected Shared Sub applyBarcodeSettings(ByRef barcode As RadBarcode, ByVal barCodeType As BarcodeType, ByVal Width As Int32, ByVal Height As Int32)

        barcode.Type = barCodeType

        barcode.QRCodeSettings.ECI = Modes.ECIMode.None

        barcode.QRCodeSettings.ErrorCorrectionLevel = Modes.ErrorCorrectionLevel.M

        barcode.QRCodeSettings.Mode = Modes.CodeMode.Alphanumeric

        barcode.QRCodeSettings.Version = 7 ' 1-40

        barcode.OutputType = BarcodeOutputType.EmbeddedPNG

 

        barcode.ForeColor = Color.Blue

        barcode.Width = Width

        barcode.Height = Height

 

        'the more dots the more detail, just going to set it high here and assume the image will be compressed when resized

        barcode.QRCodeSettings.DotSize = 10

    End Sub

 

    Protected Shared Function applyBarcodeColor(ByRef barcode As RadBarcode, ByVal hexColor As String) As Image

        Dim img As Image = Nothing

 

        If (hexColor <> "#000000") Then

            ''change QR Code color

            Dim bm As New Bitmap(barcode.GetImage())

 

            'The new color replacing all black pixels

            Dim blackReplaceColor As Color = HexColorString2Color(hexColor)

            'The new color replacing all white pixels

            'Dim whiteReplaceColor As Color = HexColorString2Color(bgColor)

 

            For imgRow As Integer = 0 To bm.Height - 1

                For imgCol As Integer = 0 To bm.Width - 1

                    If bm.GetPixel(imgCol, imgRow).Name = "ff000000" Then

                        bm.SetPixel(imgCol, imgRow, blackReplaceColor)

                    Else

                        'not replacing white

                        'bm.SetPixel(imgCol, imgRow, whiteReplaceColor)

                    End If

                Next

            Next

 

            Dim stream As MemoryStream = New MemoryStream()

            bm.Save(stream, System.Drawing.Imaging.ImageFormat.Png)

            img = Image.FromStream(stream)

        Else

            img = barcode.GetImage()

        End If

 

        Return img

    End Function

 

    Public Shared Function HexColorString2Color(ByVal HexColor As String) As Color

        Dim Red As Integer

        Dim Green As Integer

        Dim Blue As Integer

 

        Dim ret As Color = Color.Black

 

        HexColor = Replace(HexColor, "#", "")

        'Here HexColor = "00FF1F"

 

        Red = Val("&H" & Mid(HexColor, 1, 2))

        'The red value is now the long version of "00"

 

        Green = Val("&H" & Mid(HexColor, 3, 2))

        'The red value is now the long version of "FF"

 

        Blue = Val("&H" & Mid(HexColor, 5, 2))

        'The red value is now the long version of "1F"

 

        ret = Color.FromArgb(255, Red, Green, Blue)

 

        Return ret

    End Function

[allen]

I met the same problem.
I am trying to generate a different colored QR Code using phpqrcode library.
My code sample is below:
<?php
include('./phpqrcode/qrlib.php');
$uri=$_GET['uri'];
$backColor = 0xFFFFFF;
$foreColor = 0x000066;
header("Content-Type: image/png");
QRcode::png($uri, false, QR_ECLEVEL_L, 6, 1, false, $backColor, $foreColor);
?>
However, the colors just seem to get ignored and the QR code always comes out as black on white.

I am pretty sure I am using the latest version of the library (v1.1.4):

http://sourceforge.net/projects/phpqrcode/files/releases/

Anyone managed to get this working?

[lee]

Hi,

How about the QR code reader? Any suggestion will be appreciated.Thanks in advance.

 

 

 

Best regards,

Arron

[Konstantin Dikov]

Hi lee,

I see that the Scan method of the QR Barcode Reader that you are referring to accepts Bitmap image, so you can use the same method of the RadBarcode control that is demonstrated in the previous posts : GetImage.

Hope this helps.


Regards,
Konstantin Dikov
Telerik