This is a migrated thread and some comments may be shown as answers.

QR Code Color

10 Answers 134 Views
Barcode
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 17 Sep 2013, 02:38 PM
Is it possible to change the color of the generated QR Code?

10 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 18 Sep 2013, 11:02 AM
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.
0
Chris
Top achievements
Rank 1
answered on 18 Sep 2013, 01:20 PM
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
0
Shinu
Top achievements
Rank 1
answered on 19 Sep 2013, 04:30 AM
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.
0
Chris
Top achievements
Rank 1
answered on 19 Sep 2013, 12:18 PM
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.
0
Shinu
Top achievements
Rank 1
answered on 20 Sep 2013, 04:28 AM
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.
0
Accepted
Konstantin Dikov
Telerik team
answered on 23 Sep 2013, 09:15 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Eric Garrison
Top achievements
Rank 1
answered on 23 Sep 2013, 02:52 PM
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
0
allen
Top achievements
Rank 1
answered on 04 Feb 2015, 10:16 AM
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?
0
lee
Top achievements
Rank 1
answered on 03 Aug 2015, 03:30 AM

Hi,

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

 

 

 

Best regards,

Arron

0
Konstantin Dikov
Telerik team
answered on 05 Aug 2015, 03:12 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Barcode
Asked by
Chris
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Chris
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Eric Garrison
Top achievements
Rank 1
allen
Top achievements
Rank 1
lee
Top achievements
Rank 1
Share this question
or