I am trying to convert an image img/tab_25/05/38/37/bl1005194/chapter_1/1-1728176695-o.webp from a webview to base64.

The issue is that the image is protected So I am unable to fetch the image on the serverside.

So I thought about injecting the fetching and converting code to the webview, I thought that as it is from the same orgin I wont get an issue downloading it and converting it to base64.

Here is that code I am using

const getImage = async function (img) {
     let src = img.getAttribute("src")
       return new Promise(
        async (onSuccess, onError) => {
          try {
            const response = await fetch(src, {
              mode: 'no-cors',
              referer:"https://chapmanganato.to/",
              accept: "image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8",
              "accept-encoding":"gzip, deflate, br, zstd",
              "user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"
            });
            const blob = await response.blob();
            const reader = new FileReader();
            reader.onerror = function (e) {
              console.error(e);
              alert(e)
              onSuccess("");
            }
            reader.onload = function () {
              if (reader.result)
                onSuccess("data:image/jpg;base64,"+reader.result.toString().split(",")[1]);
              else onSuccess("");
            };
            reader.readAsDataURL(blob);
          } catch (e) {
            console.error(e);
            alert(e)
            onSuccess("");
          }
        }
      );
    }

    const getImages = async function () {
        try{
        let imgArray = [];
        let imgs = [...document.querySelectorAll("${parser?.selector}")];
        for (let img of imgs) {
            let src = await getImage(img);
            if (src && src.length>10)
            imgArray.push(src)
        }

        var payload = {
            name: "images",
            url: "${currentUrl}",
            data: imgArray
        };
        window.ReactNativeWebView.postMessage(JSON.stringify(payload));
    }catch(e) {alert(e)}
    }

The above code return data:image/jpg;base64, as result will be empty.

I am assuming that the issue is with .webp

Here is the site I am trying to scrap images from https://manganato.com/

And for those that want a repredusable code, it is not possible as this code has to be run from inside a webview so no need to ask.

Here is the whole react-native component

import WebView from "react-native-webview";
import { Html } from "../native";
import * as React from "react";

export default () => {
  const state = buildState({
    loading: context.parser.find(context.player.novel.parserName)?.protectedChapter == true
  }).build();

  const webview = useRef();

  context.useEffect(() => {
    processData();
  }, "player.currentChapter")

  useEffect(() => {
    processData();
  }, []);

  let parser = context.parser.find(
    context.player.book.parserName
  );

  let processData = () => {
    parser = context.parser.find(
      context.player.book.parserName
    );
    if (context.parser.find(context.player.novel.parserName)?.protectedChapter != true)
      return;


    if (parser?.protectedChapter !== true || state.loading)
      return;

    if (context.player.currentChapter?.content?.has()) {
      return;
    }

    state.loading = true;
  }
  let currentUrl = context.player.currentChapter?.url;

  const script = `
       try {
    const getImage = async function (img) {
     let src = img.getAttribute("src")
       return new Promise(
        async (onSuccess, onError) => {
          try {
            const response = await fetch(src, {
              mode: 'no-cors',
              referer:"https://chapmanganato.to/",
              accept: "image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8",
              "accept-encoding":"gzip, deflate, br, zstd",
              "user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"
            });
            const blob = await response.blob();
            const reader = new FileReader();
            reader.onerror = function (e) {
              console.error(e);
              alert(e)
              onSuccess("");
            }
            reader.onload = function () {
              if (reader.result)
                onSuccess("data:image/jpg;base64,"+reader.result);
              else onSuccess("");
            };
            reader.readAsDataURL(blob);
          } catch (e) {
            console.error(e);
            alert(e)
            onSuccess("");
          }
        }
      );
    }

    const getImages = async function () {
        try{
        let imgArray = [];
        let imgs = [...document.querySelectorAll("${parser?.selector}")];
        for (let img of imgs) {
            let src = await getImage(img);
            if (src && src.length>10)
            imgArray.push(src)
        }

        var payload = {
            name: "images",
            url: "${currentUrl}",
            data: imgArray
        };
        window.ReactNativeWebView.postMessage(JSON.stringify(payload));
    }catch(e) {alert(e)}
    }
    
    const getHtml = async function () {
        var payload = {
            name: "html",
            url: "${currentUrl}",
            data: document.querySelector("${parser?.selector}").outerHTML
        };
        window.ReactNativeWebView.postMessage(JSON.stringify(payload));

    }

    const parse = function () {
        if ("${parser.type}" == "Manga")
           getImages();  
        else  getHtml();
    }
    
    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", (event) => {
            parse();
        });
    } else {
        parse()
    }
} catch (e) {
    alert(e)
}true;`;


  let web = (state.loading && context.parser.find(context.player.novel.parserName)?.protectedChapter == true ? (
    <WebView
      ref={(r) => webview.current = r}
      injectedJavaScript={script}
      nestedScrollEnabled={true}
      cacheEnabled={true}
      source={{
        uri: currentUrl,
        baseUrl: ""
      }}
      onMessage={async ({ nativeEvent }) => {
        let data = JSON.parse(nativeEvent.data);

        //console.warn(data.url, currentUrl)
        if (data.name === "images") {
          console.log(data.data[0])
          data.data = data.data.map(x => `<img src="${x}" />`).join("n");

        }
        if (currentUrl === data.url) {
          context.player.currentChapter.content = data.data;
          //console.warn(context.player.novel.type)
          await context.player.getChapterContent("hhvh");

          state.loading = false;
        }
      }}
      contentMode="mobile"
      scalesPageToFit={true}
      originWhitelist={["*"]}
      scrollEnabled={true}
      userAgent="Mozilla/5.0 (Linux; Android 4.1.1; Galaxy Nexus Build/JRO03C) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19"
      setSupportMultipleWindows={false}
      style={[
        {
          flexGrow: 1,
          zIndex: 70,
          flex: 1
        }
      ]}
      allowFileAccess={true}
      allowFileAccessFromFileURLs={true}
      allowUniversalAccessFromFileURLs={
        true
      }
      javaScriptEnabled={true}
    />
  ) : null);

  return { loading: state.loading, web };
}