PictureBox is not showing binary image data on Html Report Viewer

[Tursunkhuja]

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.

[Tursunkhuja]

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;
        }
    }

[Tursunkhuja]

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;
        }
    }

[Silviya]

Hi Tursunhuja,

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

• How to use external assemblies with custom user functions in the Report Designer
• Previewing a report definition that uses an external assembly

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

[Tursunkhuja]

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?

 

[Silviya]

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