PictureBox is not showing binary image data on Html Report Viewer

6 posts, 0 answers
  1. Tursunhuja
    Tursunhuja avatar
    21 posts
    Member since:
    May 2018

    Posted 17 Sep Link to this post

    Hi, 

    Here is the scenario for my report: I'm printing list of products. Every product can have image and I want to show product with images.

    I need to show pictures on my report from odata data source.I have binary data(type of base64) of those pictures. PictureBox doesn't show image from binary data. So, that's why I extend and configured Report Designer by making user function to convert binary data to Image object. For this purpose this thread did help me: https://www.telerik.com/forums/html-binary-image-in-html-textbox

    Now, the report is showing picture when I run it from Telerik Report Designer tool. But, when I use&run it from my project, it's not showing the image. It shows just blank. My project contains Telerik Reporting Rest service endpoint to generate report in server side, and HTML5ReportViewer control to show report in client side.

    Ho do I configure my project to be able show image?

    See attached files for what I have done.

  2. Tursunhuja
    Tursunhuja avatar
    21 posts
    Member since:
    May 2018

    Posted 17 Sep in reply to Tursunhuja Link to this post

    I couldn't attache my sample project, because it 

    Here is the image binary data:

    iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAUpSURBVHhe7Zw5SyRbGIaPO8OoiYGikcKACiIiIgaDYqqICJppJBhr6IomajAgCoOCO+gIJqYmCvoLTAQXcN/3fZ9776evTN+26tT5TlVr21NP0u8naJ1+uur0WaoM+uc/hIsSwXh1UcCVxcCVxcCVxcCVxcCVxcCRocPExISYm5tD5X9ERkaKmpoaERQUhJ/ooS3r/v5etLa2ovo8JCYmioqKClQ8tGQ1NzcjfV6qq6tFdHQ0KjXYsgJB1CsJCQmisrISlTUsWYEk6pW4uDhRVVWFSo7yt2EgiiJ2d3fFyckJKjlKsnp6epACk87OTiQ5SrLIfqDT3d2NZI6lrKGhIaTAZm9vD8kcS1mrq6tIgc/DwwOSMcod/N9AR0cHkjGuLA+ur6+RjJHKWlxcRHIhpLK2traQXAj3MmTgymLgymLgymLgymLgymLgymIgXfybnp4WMzMzqP5QVFQkMjIyUAkxNjYmFhYWUPkfISEhor6+HtULZutzTU1NSG9hy5L9MX/bxEhKShLl5eWo3mIkTPb+HL0Mw8PDnw+Wn5+Pn3wc1A6ZKEImxgiWrLKyMiQ5379/ZzfEKQoLC312bJaslJQUJDXeWxgdLzMzExWfy8tLJGOkso6OjpBe2NzcRFKH3oDdnWAVnPhgTk9PkYyRyvL+5f7+fiQejY2NSL7BqTPY0ZVSxhbjG3x1STY0NCDxmZ+fR1KDJcsuTgsrKSkRwcH6b2F8fBxJiPX1dSRzLI90cXGB9MLU1BSSHnbOBG/S0tKQ7PP09IRkjqWsw8NDpBdmZ2eR9KAzISwsDJU+ds9S1Y1VT6Syfv/+jfR/lpeXkfSora1F0sN76qKD55a99wlhhlRWaGjo8+v5+fnz6ysjIyNI+pSWliLxobmeHbynOd5djRlKvaP3eItob29H0iM1NRWJh6+HITKUZBlxe3sr7u7uUOmRm5uLpI7dAa73WbW9vY1kjbIso238trY2JD3y8vKQ1LA7QTdaZeB84MqyzAakZutCvoAm6Lr8+PEDSR/WZWg2cLMjzM6gUpWfP38aTpJXVlaQ1GC1VDZw0xWWnZ2N5Buoqzg4OEBlD/bHenx8jPQWHWFWN2PYgdpj1ietra0hqcOWdXZ2hmQMNXB0dBSVNb542ID6V6sPzmzALUOrw7C6YXVpaem5sVbrQ1yGh4eRzKHjtrS0oDJmY2MDiYd0w4LWr4x2dwh6UkGV9PR0UVxcjOoFupy7urpQqUM3+tMN/57QLY4q94S+IuvYBwcHkd6iLSsiIkLEx8ej+jxYfQPKZGl/b9sdvX9GtGUR3HHKR2O3vVJZKutOj4+PSP7N/v4+kj5SWcnJyUjm6H6zvDdXV1dI+khlZWVlIcnx98vRqfbZ6rM8sdqg/ChkMw5vvn37hmSMY7Kcmn85jdWMw5O6ujokYyxlqT6LR/jb5eh0eyxl5eTkIKnhL8K47fCeFRihdBly19t1ZvROovNwFk3JrFCSFRsby9pRoRn9zs4OqveFFiglMzhDZFMcT5Q7+L6+PiQ1aEPDibENB9r/U9lZ9kRVFKEsi6A/zFkGplHzzc0NKt9Cy0aq+3+vcEQRQbJVBzNo1M65Z4GecP/y5Qsq56HhAWc8RdtpAwMDqNTRkvXK5OSk+PXrFyo5MTEx7H86oQKN71QHxLTD3tvbi4qPLVne0HIyNd5scv3161cRFRWFyj50NtEd0vQWjDZf6VgFBQXP/+zCCRyVFeiwOvi/HVcWA1cWA1cWA1cWA1eWMkL8C70wB9SjiyyYAAAAAElFTkSuQmCC

     

    This is my custom function to convert binary image to image object:

    public static class ImageHelper
        {
            [Function(Category = "My Functions", Namespace = "My", Description = "Say Hi")]
            public static Image GetImageFromBase64String(string base64String)
            {
                byte[] imageBytes = Convert.FromBase64String(base64String);
                Image image;
                using (System.IO.MemoryStream ms = new System.IO.MemoryStream(imageBytes))
                {
                    image = Image.FromStream(ms);
                }
                return image;
            }
        }

  3. Tursunhuja
    Tursunhuja avatar
    21 posts
    Member since:
    May 2018

    Posted 17 Sep in reply to Tursunhuja Link to this post

    I couldn't attache my sample project, because it exceed the maximum attachment size (2 MB).

    Here is the image binary data:

    iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAUpSURBVHhe7Zw5SyRbGIaPO8OoiYGikcKACiIiIgaDYqqICJppJBhr6IomajAgCoOCO+gIJqYmCvoLTAQXcN/3fZ9776evTN+26tT5TlVr21NP0u8naJ1+uur0WaoM+uc/hIsSwXh1UcCVxcCVxcCVxcCVxcCVxcCRocPExISYm5tD5X9ERkaKmpoaERQUhJ/ooS3r/v5etLa2ovo8JCYmioqKClQ8tGQ1NzcjfV6qq6tFdHQ0KjXYsgJB1CsJCQmisrISlTUsWYEk6pW4uDhRVVWFSo7yt2EgiiJ2d3fFyckJKjlKsnp6epACk87OTiQ5SrLIfqDT3d2NZI6lrKGhIaTAZm9vD8kcS1mrq6tIgc/DwwOSMcod/N9AR0cHkjGuLA+ur6+RjJHKWlxcRHIhpLK2traQXAj3MmTgymLgymLgymLgymLgymLgymIgXfybnp4WMzMzqP5QVFQkMjIyUAkxNjYmFhYWUPkfISEhor6+HtULZutzTU1NSG9hy5L9MX/bxEhKShLl5eWo3mIkTPb+HL0Mw8PDnw+Wn5+Pn3wc1A6ZKEImxgiWrLKyMiQ5379/ZzfEKQoLC312bJaslJQUJDXeWxgdLzMzExWfy8tLJGOkso6OjpBe2NzcRFKH3oDdnWAVnPhgTk9PkYyRyvL+5f7+fiQejY2NSL7BqTPY0ZVSxhbjG3x1STY0NCDxmZ+fR1KDJcsuTgsrKSkRwcH6b2F8fBxJiPX1dSRzLI90cXGB9MLU1BSSHnbOBG/S0tKQ7PP09IRkjqWsw8NDpBdmZ2eR9KAzISwsDJU+ds9S1Y1VT6Syfv/+jfR/lpeXkfSora1F0sN76qKD55a99wlhhlRWaGjo8+v5+fnz6ysjIyNI+pSWliLxobmeHbynOd5djRlKvaP3eItob29H0iM1NRWJh6+HITKUZBlxe3sr7u7uUOmRm5uLpI7dAa73WbW9vY1kjbIso238trY2JD3y8vKQ1LA7QTdaZeB84MqyzAakZutCvoAm6Lr8+PEDSR/WZWg2cLMjzM6gUpWfP38aTpJXVlaQ1GC1VDZw0xWWnZ2N5Buoqzg4OEBlD/bHenx8jPQWHWFWN2PYgdpj1ietra0hqcOWdXZ2hmQMNXB0dBSVNb542ID6V6sPzmzALUOrw7C6YXVpaem5sVbrQ1yGh4eRzKHjtrS0oDJmY2MDiYd0w4LWr4x2dwh6UkGV9PR0UVxcjOoFupy7urpQqUM3+tMN/57QLY4q94S+IuvYBwcHkd6iLSsiIkLEx8ej+jxYfQPKZGl/b9sdvX9GtGUR3HHKR2O3vVJZKutOj4+PSP7N/v4+kj5SWcnJyUjm6H6zvDdXV1dI+khlZWVlIcnx98vRqfbZ6rM8sdqg/ChkMw5vvn37hmSMY7Kcmn85jdWMw5O6ujokYyxlqT6LR/jb5eh0eyxl5eTkIKnhL8K47fCeFRihdBly19t1ZvROovNwFk3JrFCSFRsby9pRoRn9zs4OqveFFiglMzhDZFMcT5Q7+L6+PiQ1aEPDibENB9r/U9lZ9kRVFKEsi6A/zFkGplHzzc0NKt9Cy0aq+3+vcEQRQbJVBzNo1M65Z4GecP/y5Qsq56HhAWc8RdtpAwMDqNTRkvXK5OSk+PXrFyo5MTEx7H86oQKN71QHxLTD3tvbi4qPLVne0HIyNd5scv3161cRFRWFyj50NtEd0vQWjDZf6VgFBQXP/+zCCRyVFeiwOvi/HVcWA1cWA1cWA1cWA1eWMkL8C70wB9SjiyyYAAAAAElFTkSuQmCC

     

    This is my custom function to convert binary image to image object:

        public static class ImageHelper
        {
            [Function(Category = "My Functions", Namespace = "My", Description = "Say Hi")]
            public static Image GetImageFromBase64String(string base64String)
            {
                byte[] imageBytes = Convert.FromBase64String(base64String);
                Image image;
                using (System.IO.MemoryStream ms = new System.IO.MemoryStream(imageBytes))
                {
                    image = Image.FromStream(ms);
                }
                return image;
            }
        }

  4. Silviya
    Admin
    Silviya avatar
    413 posts

    Posted 20 Sep Link to this post

    Hi Tursunhuja,

    The settings you need in the Standalone Report Designer and the project holding the Reporting REST Service (ReportsControllerBase implementation) are the same:

    The idea is that the reporting engine uses reflection to load types from external assembly, where assemblies must be listed in a declared Telerik.Reporting section to be recognizable.

    Best Regards,
    Silviya
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Tursunhuja
    Tursunhuja avatar
    21 posts
    Member since:
    May 2018

    Posted 25 Sep in reply to Silviya Link to this post

    Thanks Silviya,

    I did it and it's working. But, I don't want to add external assembly in my project and modify app.config file. Can do it somehow with customizing ReportsController file or is there any other way?

     

  6. Silviya
    Admin
    Silviya avatar
    413 posts

    Posted 30 Sep Link to this post

    Hi Tursunhuja,

    We have a feature request on our feedback portal: Ability to add user functions to reports instead of needing to use external assemblies. You can follow the feature request to check when the status is changed to 'In Development' and also our release history page for release notes.

    At this time, to be accessible in Standalone Designer for design purposes, the corresponding assembly of the function should be copied next to the designer's exe and registered in the designer's config file.

    Best Regards,


    Silviya
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top