Error: Tainted canvases may not be exported

Plugin builders
1

Hi,
I do this:

  1. load the image and the URL (the image stored in the DB as an image after uploading it using picture uploader):
const img = instance.data.img;
const src = instance.data.src;
img.src = src;
const canvas = instance.data.canvas;
const context = canvas.getContext('2d');
// the image and the canvas are created in the instance function
  1. draw the image into a canvas element:
context.drawImage(img, left, top, newWidth, newHeight);
  1. draw some lines on the canvas.
  2. getting a data URL using this line:
const imageDataURL = canvas.toDataURL('image/png');

And I get this error in the console:
Uncaught (in promise) DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.

2

Also I tried to add:

img.crossOrigin = 'Anonymous';

and I get this error:
Access to image at ‘https://96327975102a004a3143473700db2948.cdn.bubble.io/f1713106497145x275099447252415960/8b44d260-7633-460c-afc4-69a8ef771b00’ from origin ‘https://fordr.bubbleapps.io’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
find-and-retrieve–testing–element_action–canvas-Export-Image-.js:7

   GET https://96327975102a004a3143473700db2948.cdn.bubble.io/f1713106497145x275099447252415960/8b44d260-7633-460c-afc4-69a8ef771b00 net::ERR_FAILED
4

I also tried to convert the image to base64 using this plugin but now this plugin causes this error:

Access to XMLHttpRequest at ‘https://96327975102a004a3143473700db2948.cdn.bubble.io/f1713106497145x275099447252415960/8b44d260-7633-460c-afc4-69a8ef771b00’ from origin ‘https://fordr.bubbleapps.io’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
File-URL-to-Base64-initialize–File-to-Base64-.js:16

   GET https://96327975102a004a3143473700db2948.cdn.bubble.io/f1713106497145x275099447252415960/8b44d260-7633-460c-afc4-69a8ef771b00 net::ERR_FAILED
5

I tried to use the “canvas” library in a backend action but Bubble said that it is too big and he will not deploy it!

Also, I tried fabric.js and the same errors occurred.

6

The solution I ended with is making a backen action that just converts the image to a base64 and provides a data URL which I can use in the frontend without a CORS error.

The code I used for the action:

async function(properties, context) {

    const imageUrl = properties.image;	

    const axios = require('axios');

    // Fetch image from URL using Axios
    const response = await axios.get(imageUrl, {
        responseType: 'arraybuffer' // Ensure response data is treated as binary data
    });

    // Convert the image buffer to a base64 string
    const base64Image = Buffer.from(response.data, 'binary').toString('base64');

    // Determine the MIME type of the image (e.g., 'image/jpeg', 'image/png')
    const contentType = response.headers['content-type'];

    // Construct the data URL
    const dataUrl = `data:${contentType};base64,${base64Image}`;

    // Return data URL
    return {"data_url": dataUrl};
}