Can Run JS Code of workflow convert image from url to base64 content?

App Building
,
1

I want to convert image from url to Base64, But the Run JS Code of App Editor runs on my browser, the image request will be blocked by CORS policy

Can I archive this in Run JS Code of workflow?

2

image
image918×1586 144 KB

retool will convert image content to base64, this is the result I want

but https://wenxin.baidu.com/younger/file/ERNIE-ViLG/be53a8bc02fe3e81d8471856cb05455a30 response Content-Type: text/plain; charset=utf-8

image
image986×1048 93 KB

not base64Binary, How can I solve this issue?

3

Hey @jk2K!

I'm having some trouble decoding the message from the image you linked when making a simple GET request, both through Retool and Postman. It looks as though it's returning invalid utf-8 characters (note the �):

1664×1002 187 KB

Making a direct xhr request seems to be working without throwing any CORS errors however:

image
image1448×1766 149 KB

Is there a different set of images you'll ultimately be working with that are exhibiting different behavior? Would it be possible for you to share the link to one of those?

4

WX20221117-093620@2x
WX20221117-093620@2x1920×1328 120 KB

chrome browser is ok

5

Yep! I was seeing the same thing in my browser. You mentioned

the image request will be blocked by CORS policy

I'm not seeing that part :thinking: The following code seems to work fine in a JS query (as pictured above):

function toDataUrl(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
            callback(reader.result);
        }
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}

const url = "https://wenxin.baidu.com/younger/file/ERNIE-ViLG/be53a8bc02fe3e81d8471856cb05455a30";

return new Promise(resolve => toDataUrl(url, resolve));

Are you seeing something different?

1 Like
6

here are two issues

issue 1, cors errors

function toDataUrl(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
            callback(reader.result);
        }
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}

const url = "https://wenxin.baidu.com/younger/file/ERNIE-ViLG/be53a8bc02fe3e81d8471856cb05455a30";

return new Promise(resolve => toDataUrl(url, resolve));

this code is ok for https://wenxin.baidu.com/younger/file/ERNIE-ViLG/be53a8bc02fe3e81d8471856cb05455a30

WX20221117-101404@2x
WX20221117-101404@2x1750×1674 417 KB

but not work for https://oaidalleapiprodscus.blob.core.windows.net/private/org-pn4P1V5LNqQKTWRalUdpSMLR/user-m1K8uzAXdHFu8DDUR7MIYFPE/img-eZwMjhcS1m7MbSxPG9AlKlZ1.png?st=2022-11-17T00%3A55%3A21Z&se=2022-11-17T02%3A55%3A21Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2022-11-16T03%3A16%3A08Z&ske=2022-11-17T03%3A16%3A08Z&sks=b&skv=2021-08-06&sig=FE07MFNWuu8n8e5ASDjAJfNuqW3xa7DtfCqN2kkKsEE%3D

WX20221117-100205@2x
WX20221117-100205@2x1920×950 170 KB

issue 2, no cors errors, but http body cannot convert to base64Binary

because of the cors error, I use REST query instead of XMLHttpRequest

https://oaidalleapiprodscus.blob.core.windows.net/private/org-pn4P1V5LNqQKTWRalUdpSMLR/user-m1K8uzAXdHFu8DDUR7MIYFPE/img-eZwMjhcS1m7MbSxPG9AlKlZ1.png?st=2022-11-17T00%3A55%3A21Z&se=2022-11-17T02%3A55%3A21Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2022-11-16T03%3A16%3A08Z&ske=2022-11-17T03%3A16%3A08Z&sks=b&skv=2021-08-06&sig=FE07MFNWuu8n8e5ASDjAJfNuqW3xa7DtfCqN2kkKsEE%3D is ok, I can get base64 content

WX20221117-101224@2x
WX20221117-101224@2x1926×1436 337 KB

https://wenxin.baidu.com/younger/file/ERNIE-ViLG/be53a8bc02fe3e81d8471856cb05455a30 not work,

image
image940×1000 93.5 KB

7

Hey @jk2K, did some checking in with the team and unfortunately, I think the request to https://wenxin.baidu.com/younger/file/ERNIE-ViLG/be53a8bc02fe3e81d8471856cb05455a30 will have to be done in a JS block. You might be able to use a Branch block to implement logic about which method gets used to trigger fetch the image data. Defining the separate requests as Function blocks could help as well.

Would you mind describing the use case as a whole a bit more? What are you anticipating the source of your images will be?

It looks as though the data from https://wenxin.baidu.com/younger/file/ERNIE-ViLG/be53a8bc02fe3e81d8471856cb05455a30 might not actually be able to be rendered as utf-8 text but because of the header the libraries being used with the REST request are attempting to parse it as such.

8

thanks, I know I can use JS block to get Base64binary of https://wenxin.baidu.com/younger/file/ERNIE-ViLG/be53a8bc02fe3e81d8471856cb05455a30

my use case:

  1. I send a HTTP request to an API, which will return me the image url, such as

https://wenxin.baidu.com/younger/file/ERNIE-ViLG/be53a8bc02fe3e81d8471856cb05455a30

https://oaidalleapiprodscus.blob.core.windows.net/private/org-pn4P1V5LNqQKTWRalUdpSMLR/user-m1K8uzAXdHFu8DDUR7MIYFPE/img-eZwMjhcS1m7MbSxPG9AlKlZ1.png?st=2022-11-17T00%3A55%3A21Z&se=2022-11-17T02%3A55%3A21Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2022-11-16T03%3A16%3A08Z&ske=2022-11-17T03%3A16%3A08Z&sks=b&skv=2021-08-06&sig=FE07MFNWuu8n8e5ASDjAJfNuqW3xa7DtfCqN2kkKsEE%3D

  1. I'm afraid these images will become inaccessible after a period of time, I decided to convert these images to base64 and stored in my MySQL

note, I can also download and upload theses images to amazon S3, but for the sake of simplicity, I don't want to do this. I don't have many images

  1. I was surprised to find that I can use REST API to get base64binary by image url, which is great

  2. the next question is, How can I use REST API to get base64binary of https://wenxin.baidu.com/younger/file/ERNIE-ViLG/be53a8bc02fe3e81d8471856cb05455a30

I know this problem cannot be solved at present. Is it possible to improve REST API query in the future to allow me get base64binary of https://wenxin.baidu.com/younger/file/ERNIE-ViLG/be53a8bc02fe3e81d8471856cb05455a30 ?

9

https://wenxin.baidu.com/younger/file/ERNIE-ViLG/be53a8bc02fe3e81d8471856cb05455a30

image
image1920×1448 145 KB

https://img6.bdstatic.com/img/image/pcindex/sunjunpchuazhoutu.JPG

image
image1496×1880 130 KB

the response headers of https://wenxin.baidu.com/younger/file/ERNIE-ViLG/be53a8bc02fe3e81d8471856cb05455a30 is wrong

I have sent feedback to wenxin.baidu.com, waiting for their solution