Fetch external image, or get its buffer?

[sensiblearts]

Greetings,
I'm trying to export all images in a document, including external images (absolute URLs to servers I don't control).

When I paste an external image link, such as ![wikipedia tuliptree](https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Liriodendron_tulipifera.jpg/440px-Liriodendron_tulipifera.jpg), it renders fine in Milkdown.

However, when I use JS to fetch the same image url, I get a CORS violation, even with "Access-Control-Allow-Origin": "*".

Is there code somewhere in Milkdown that is fetching such images; or code in Prosemirror?

Or is fetch done by the browser? in which case, can I tap into Milkdown or Prosemirror to get the Arraybuffer or Blob?

Thanks for any tips.

[Saul-Mirone]

You can't fetch a resource restricted by cors. But you can create a image element and set it's src.

https://stackoverflow.com/questions/43000648/html-img-src-works-but-js-image-loading-cause-cors-error

It's out the scope of milkdown anyway.

[sensiblearts]

Thank you. Based on the link you provided, I was able to get the following working with images from wikipedia, nytimes. (The img.crossOrigin part is case sensitive and needed.)

But it seems that an image from any arbitrary website can still fail due to CORS. I guess export with images is a much bigger deal that I expected; guess I'll have to use that proxy server approach mentioned in the link you provided.

For now I'll use this and if it fails, replace it with missingImg buffer plus maybe a link to missing image.

private loadImgAsBase64 = (url: string, callback: Function) => {
        let canvas : HTMLCanvasElement | null = document.createElement('CANVAS') as HTMLCanvasElement;
        let img = document.createElement<"img">('img');
        img.crossOrigin = "Anonymous";
        img.src = url;
        img.onload = () => {
            if (canvas) {
                canvas.height = img.height;
                canvas.width = img.width;
                let context = canvas.getContext('2d');
                context?.drawImage(img, 0, 0);
                let dataURL = canvas.toDataURL(); // 'image/png' is default
                canvas = null;
                let img_64: string = dataURL.replace('data:', '').replace(/^.+,/, '');
                callback(img_64);
            }
        };
        img.onerror = () => {
            console.log("ERR LOADING EXTERNAL IMG");
            callback(this.missingImgBase64);
        }
      
    }


    private fetchImgPromise = (url: string) => {
        return new Promise<string>((resolve, reject) => {
            this.loadImgAsBase64(url, (base64img: string) => {
                resolve(base64img);
            });          
        })
      }

    private getExternalImgBuffer = async (url: string) : Promise<Buffer> => {
        try { 
            let img_64: string = await this.fetchImgPromise(url);
            return Buffer.from(img_64, 'base64');      
        }
        catch (e: unknown) { 
            if (typeof e === "string") {
                console.log("error in getExternalImgBuffer: ", e);
            } else if (e instanceof Error) {
                console.log("error in getExternalImgBuffer: ", e.message);
            } else {
                console.log("unknown error,  ")
            }
            // The image resolver in Prosemirror-docx export code MUST have a buffer or the docx export fails.
            // Therefore, we always return a legit image Buffer, even if we can't fetch the actual one.
            // Here is a space-filler image:
            return Buffer.from(this.missingImgBase64, 'base64');
        }

     };