Playwright

Screenshot format

Error

I use follower codes to get a screenshot saved in a base64 string.

    let base64ImgScreenShot = await page.screenshot({
      fullPage: true,
      encoding: 'base64'
    });

But the string is not good.

Solution

Although in documents, the upper code should work correctly and get a base64 string, it didn’t work for me.
So I have to do a format / type checking.

    let base64StringForUri;
    if (typeof base64ImgScreenShot === 'object' && base64ImgScreenShot instanceof Buffer) {
      console.log("Buffer object, to be transfered to Base64 string.");
      base64StringForUri = base64ImgScreenShot.toString('base64');
    } else if (typeof base64ImgScreenShot === 'string') {
      console.log("Base64 String");
      base64StringForUri = base64ImgScreenShot;
    } else {
      console.error("Unknown type: ", typeof base64ImgScreenShot);
     }
    // This code is used for directly display.
    let base64Img = `data:image/png;base64,${base64StringForUri}`;

Retool

Base64 string picture shown

Error

I got a picture in base64 string, but it cannot be shown in an Image Component..

Solution

Image component in Retool has 3 way to define source: URL, Storage, JS.
I thought the string should be set to Storage or JS, but it was wrong.
The base64 string should be set to URL, not Storage or JS.

Related Platforms

(Github Issues) / (Notion) / (Blog)

Advertisement

(A website to optimize your resume and to boost your career: Nonpareil.me)

---

Playwright

截图的格式

问题

我用下面的代码来截屏，并获取图片的base64字符串。

    let base64ImgScreenShot = await page.screenshot({
      fullPage: true,
      encoding: 'base64'
    });

不过字符串不对，有很多不可读的字符。

解决方案

虽然网上的资料和文档里都说，我上面的代码应该是正确的，不过在我这里就是不行。
所以我需要做类型检测和转换。

    let base64StringForUri;
    if (typeof base64ImgScreenShot === 'object' && base64ImgScreenShot instanceof Buffer) {
      console.log("Buffer object, to be transfered to Base64 string.");
      base64StringForUri = base64ImgScreenShot.toString('base64');
    } else if (typeof base64ImgScreenShot === 'string') {
      console.log("Base64 String");
      base64StringForUri = base64ImgScreenShot;
    } else {
      console.error("Unknown type: ", typeof base64ImgScreenShot);
     }
    // 这句代码是为了直接展示方便。
    let base64Img = `data:image/png;base64,${base64StringForUri}`;

Retool

Base64字符串存储的图片显示

问题

我有一个base64字符串形式的图片内容，但是无法在Image组件里显示。

解决方案

Retool的Image组件有三种方式设置图片源：URL，Storage，JS。
我以为应该是Storage或者JS，但是不对。应该设置到URL中。这和网页或者app中的组件是一致的。

相关平台

(Github Issues) / (Notion) / (Blog)

推广

(优化简历，助力职场：Nonpareil.me)