QR Code Color

11 posts, 1 answers
  1. Chris
    Chris avatar
    24 posts
    Member since:
    Jun 2010

    Posted 17 Sep 2013 Link to this post

    Is it possible to change the color of the generated QR Code?
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Sep 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Chris
    Chris avatar
    24 posts
    Member since:
    Jun 2010

    Posted 18 Sep 2013 Link to this post

    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
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Sep 2013 Link to this post

    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.
  6. Chris
    Chris avatar
    24 posts
    Member since:
    Jun 2010

    Posted 19 Sep 2013 Link to this post

    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.
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 19 Sep 2013 Link to this post

    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.
  8. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1798 posts

    Posted 23 Sep 2013 Link to this post

    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.
  9. Eric Garrison
    Eric Garrison avatar
    4 posts
    Member since:
    Aug 2007

    Posted 23 Sep 2013 Link to this post

    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
  10. allen
    allen avatar
    3 posts
    Member since:
    Jan 2015

    Posted 04 Feb 2015 Link to this post

    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?
  11. lee
    lee avatar
    4 posts
    Member since:
    Aug 2015

    Posted 02 Aug 2015 in reply to allen Link to this post

    Hi,

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

     

     

     

    Best regards,

    Arron

  12. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1798 posts

    Posted 05 Aug 2015 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017