ax::ui::WebView cannot display local image #2080

asnagni · 2024-07-13T07:01:06Z

asnagni
Jul 13, 2024

Hi,
We are using ax::ui::WebView to display some information to the user. in the process we may just display a local png image. By local I mean an image residing on the device. Unfortunately it looks like it is not possible. We tried many things but so far nothing is working. Perhaps we are doing something wrong? Some help will be welcome.

For testing, you can use this image:

This is the code to display a png image in a ax::ui::WebView.

std::string imagePath = "file://" + FileUtils::getInstance()->getWritablePath() + "reportsFolder/output_inline_15367.png";
std::string baseURL  = "file://" + FileUtils::getInstance()->getWritablePath();
std::string htmlContent = "<html><head></head><body><img src=\"" + imagePath + "\" alt=\"image info\" /></body></html>";

auto webView = ax::ui::WebView::create();
webView->loadHTMLString(htmlContent, baseURL);
this->addChild(webView);

This is the result that I get:

axmol version: Current Dev Branch
devices test on: iPhone X, 11, 14
developing environments
- NDK version: N/A
- Xcode version: 15.4
- Visual Studio:
  - VS version: N/A
  - MSVC version: N/A
  - Windows SDK version: N/A
- cmake version:
  Steps to Reproduce:

create a png in your writable
try to load the image in a ax::ui::WebView

Answered by asnagni

Jul 14, 2024

Hi smilediver,
Embedding the image (base64 encoded) in the Html page worked. I will use this patch for now because it is not possible to use a local link to image.

Thank you for the suggestion, I do appreciate.

Stay safe

View full answer

smilediver · 2024-07-13T09:48:01Z

smilediver
Jul 13, 2024

I don't know if that is possible, but as a workaround you should be able to embed image data directly into html like this: <img src="data:image/png;base64,base_64_encoded_png_image_data_goes_here">.

0 replies

asnagni · 2024-07-13T20:50:06Z

asnagni
Jul 13, 2024
Author

Yes, it's possible and it's a good idea. I will try that. I should work. It will keep you posted.

0 replies

asnagni · 2024-07-14T18:38:26Z

asnagni
Jul 14, 2024
Author

Hi smilediver,
Embedding the image (base64 encoded) in the Html page worked. I will use this patch for now because it is not possible to use a local link to image.

Thank you for the suggestion, I do appreciate.

Stay safe

0 replies

aismann · 2024-07-18T04:15:15Z

aismann
Jul 18, 2024
Collaborator

Hi smilediver, Embedding the image (base64 encoded) in the Html page worked. I will use this patch for now because it is not possible to use a local link to image.

Thank you for the suggestion, I do appreciate.

Stay safe

@asnagni
Plz tell us the "running" version of your code snippet too. Thanks.
Maybe a Q/R will added to the wiki.

0 replies

asnagni · 2024-07-18T21:23:26Z

asnagni
Jul 18, 2024
Author

Hi aismann,
Sure I can share with the community the workaround that I have, no problem:

What you need to do is to perform a base64 encoding of the image that you have. I do that using this function:

Step 1: use the function for the base64 encoding

     //////////////////////////////////////// base64 encode string ////////////////////////////////////////
    static const std::string base64_chars =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
        "abcdefghijklmnopqrstuvwxyz"
        "0123456789+/";

    std::string base64_encode(unsigned char const* bytes_to_encode, unsigned int in_len) 
    {
        std::string ret;
        int i = 0;
        int j = 0;
        unsigned char char_array_3[3];
        unsigned char char_array_4[4];

        while (in_len--) 
        {
            char_array_3[i++] = *(bytes_to_encode++);
            if (i == 3) 
            {
                char_array_4[0] = (char_array_3[0] & 0xfc) >> 2;
                char_array_4[1] = ((char_array_3[0] & 0x03) << 4) + ((char_array_3[1] & 0xf0) >> 4);
                char_array_4[2] = ((char_array_3[1] & 0x0f) << 2) + ((char_array_3[2] & 0xc0) >> 6);
                char_array_4[3] = char_array_3[2] & 0x3f;

                for (i = 0; (i < 4); i++)
                    ret += base64_chars[char_array_4[i]];
                i = 0;
            }
        }

        if (i)
        {
            for (j = i; j < 3; j++)
                char_array_3[j] = '\0';

            char_array_4[0] = (char_array_3[0] & 0xfc) >> 2;
            char_array_4[1] = ((char_array_3[0] & 0x03) << 4) + ((char_array_3[1] & 0xf0) >> 4);
            char_array_4[2] = ((char_array_3[1] & 0x0f) << 2) + ((char_array_3[2] & 0xc0) >> 6);

            for (j = 0; (j < i + 1); j++)
                ret += base64_chars[char_array_4[j]];

            while ((i++ < 3))
                ret += '=';
        }

        return ret;
    }

Step 2: get the bytes (the data) from the file (png) and encode it

auto path = FileUtils::getInstance()->getNativeWritableAbsolutePath();
std::string fileFullPath = path + std::string("temp/myImageSnapshotFile.png");

std::ifstream imageFile(fileFullPath, std::ios::binary);

if(imageFile.is_open())
{
    // You need to seek to the end of the file to determine its size
    imageFile.seekg(0, std::ios::end);
    std::streampos fileSize = imageFile.tellg();
    imageFile.seekg(0, std::ios::beg);

    // Resize the string to fit the file content
    readBuffer.resize(fileSize);

    // Now you can read the file content into the string
    imageFile.read(&buffer[0], fileSize);

      
    // Now the final step: Convert readBuffer to Base64
    std::string base64Image = base64_encode(reinterpret_cast<const unsigned char*>(readBuffer.data()), (unsigned int)readBuffer.size());
    std::string strToUseForWebView = "data:image/png;base64," + base64Image;
}

"strToUseForWebView" is the string that you need to use to embed your local image in the ax::ui::WebView object that you have.

I hope that helps.
Stay safe

0 replies

asnagni · 2024-08-08T17:06:15Z

asnagni
Aug 8, 2024
Author

This is a bug. It's more than a discussion. Are we going to plan to fix this issue?
but there is nothing urgent but it would be nice to fix it. If we move all the bugs into discussion it doesn't help making the platform better.
Nothing personal .

Thank you

0 replies

halx99 · 2024-08-08T17:25:27Z

halx99
Aug 8, 2024
Maintainer

do you try [wkWebViewConfig setValue:@TRUE forKey:@"allowUniversalAccessFromFileURLs"];

refer react-native-webview/react-native-webview#1730

3 replies

asnagni Aug 8, 2024
Author

No I didn't ry that. I will give it a try and update you.

Thank you for your answer, I do appreciate.

halx99 Aug 8, 2024
Maintainer

No I didn't ry that. I will give it a try and update you.

Thank you for your answer, I do appreciate.

if works, add API to support config is better

asnagni Aug 8, 2024
Author

Ok, thanks, I will definitely try that today if I can get to it. If not certainly by tomorrow, I will give it a try 👍.

Thank you, I do appreciate.

halx99 · 2024-08-08T17:26:19Z

halx99
Aug 8, 2024
Maintainer

it's security policy, not actually bug of axmol engine itself

0 replies

asnagni · 2024-08-08T17:28:43Z

asnagni
Aug 8, 2024
Author

Ok, sure not a problem 👍. It's not a priority. We also found a way to solve the issue 😉

1 reply

paulocoutinhox Aug 9, 2024
Sponsor

Can you post the solution to help us too :)

asnagni · 2024-08-09T08:27:37Z

asnagni
Aug 9, 2024
Author

Sure I will. I’m a strong advocate of making the platform better. So no worries.

…

On Aug 9, 2024, at 1:10 AM, Paulo Coutinho ***@***.***> wrote: Can you post the solution to help us too :) — Reply to this email directly, view it on GitHub <#2080 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AI54DTCFMEBN5OGCIMATZRLZQRFMTAVCNFSM6AAAAABMG4W7M6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMRYGIZDSNY>. You are receiving this because you were mentioned.

2 replies

halx99 Aug 13, 2024
Maintainer

there a draft branch https://github.com/simdsoft/axmol/tree/webview-file-access-support try to add file access support, I'm not sure does it is ok

halx99 Aug 17, 2024
Maintainer

there a draft branch https://github.com/simdsoft/axmol/tree/webview-file-access-support try to add file access support, I'm not sure does it is ok

@asnagni does it works?

asnagni · 2024-08-15T19:41:28Z

asnagni
Aug 15, 2024
Author

Hi, Sorry for the late reply. I’m so sorry but I just cannot find the time right now to get to it. This weekend I will put some time aside and try all of this and share my results/findings. Sorry about that, Stay safe

…

On Aug 13, 2024, at 10:59 AM, halx99 ***@***.***> wrote: there a draft branch https://github.com/simdsoft/axmol/tree/webview-file-access-support try to add file access support, I'm not sure does it is ok — Reply to this email directly, view it on GitHub <#2080 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AI54DTGOGCMDAOYF3EMVGK3ZRINODAVCNFSM6AAAAABMG4W7M6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMZSG4YTSMI>. You are receiving this because you were mentioned.

0 replies

asnagni · 2024-08-18T00:09:58Z

asnagni
Aug 18, 2024
Author

Hi, I downloaded the branch you shared, unfortunately it didn’t work. I’m having a blank screen. I tried with the image and also with some text but nothing is showing. Thank you for trying I do appreciate. Thank you, Stay safe

…

On Aug 17, 2024, at 11:48 AM, halx99 ***@***.***> wrote: there a draft branch https://github.com/simdsoft/axmol/tree/webview-file-access-support try to add file access support, I'm not sure does it is ok @asnagni <https://github.com/asnagni> does it works? — Reply to this email directly, view it on GitHub <#2080 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AI54DTC4O7SXQMT6NMTTZXLZR5WEVAVCNFSM6AAAAABMG4W7M6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMZWG4ZTGMQ>. You are receiving this because you were mentioned.

2 replies

halx99 Aug 18, 2024
Maintainer

do you invoke ui:WebView::setFileAccess(true) before loadHtmlString ?

halx99 Aug 25, 2024
Maintainer

Any new feedback? I have test on andorid, ios devices and windows, linux, macos, when I enable file access via ui::WebView::setFileAccess(true) , the local image could be display correctly when invoke loadHtmlString

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ax::ui::WebView cannot display local image #2080

{{title}}

Replies: 12 comments 8 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

ax::ui::WebView cannot display local image #2080

asnagni Jul 13, 2024

Replies: 12 comments · 8 replies

smilediver Jul 13, 2024

asnagni Jul 13, 2024 Author

asnagni Jul 14, 2024 Author

aismann Jul 18, 2024 Collaborator

asnagni Jul 18, 2024 Author

asnagni Aug 8, 2024 Author

halx99 Aug 8, 2024 Maintainer

asnagni Aug 8, 2024 Author

halx99 Aug 8, 2024 Maintainer

asnagni Aug 8, 2024 Author

halx99 Aug 8, 2024 Maintainer

asnagni Aug 8, 2024 Author

paulocoutinhox Aug 9, 2024 Sponsor

asnagni Aug 9, 2024 Author

halx99 Aug 13, 2024 Maintainer

halx99 Aug 17, 2024 Maintainer

asnagni Aug 15, 2024 Author

asnagni Aug 18, 2024 Author

halx99 Aug 18, 2024 Maintainer

halx99 Aug 25, 2024 Maintainer

asnagni
Jul 13, 2024

Replies: 12 comments 8 replies

smilediver
Jul 13, 2024

asnagni
Jul 13, 2024
Author

asnagni
Jul 14, 2024
Author

aismann
Jul 18, 2024
Collaborator

asnagni
Jul 18, 2024
Author

asnagni
Aug 8, 2024
Author

halx99
Aug 8, 2024
Maintainer

asnagni Aug 8, 2024
Author

halx99 Aug 8, 2024
Maintainer

asnagni Aug 8, 2024
Author

halx99
Aug 8, 2024
Maintainer

asnagni
Aug 8, 2024
Author

paulocoutinhox Aug 9, 2024
Sponsor

asnagni
Aug 9, 2024
Author

halx99 Aug 13, 2024
Maintainer

halx99 Aug 17, 2024
Maintainer

asnagni
Aug 15, 2024
Author

asnagni
Aug 18, 2024
Author

halx99 Aug 18, 2024
Maintainer

halx99 Aug 25, 2024
Maintainer