Forum Academy Marketplace Showcase Pricing Features

Javascript/Toolbox, CORS and images

Dear Forum-Members,
i am relativly new to but the last weeks were great and i have had fun, developing my first projects with bubble.

Now i am encountering a problem with dynamic image processing in bubble.

  1. I am trying to access an image-URL from a database and use this as a parameter
    in toolbox. I want to load this image. In most cases i am encountering a CORS-Error.
    I know, it sounds strange, but yesterday i could access it.

  2. with JS i am processing the image and return it as a base64-string.

  3. waiting for an event from Toolbox and then show it in bubble from base64 encoding

function changeColor(imgUrl, newColor) {
return new Promise((resolve, reject) => {
var image = new Image();
image.crossOrigin = “anonymous”;
image.onload = function() {
let canvas = document.createElement(‘canvas’);
canvas.width = image.width;
canvas.height = image.height;
let ctx = canvas.getContext(‘2d’, {
willReadFrequently: true
// do some stuff…
const editedPngDataUrl = canvas.toDataURL(‘image/png’);
image.onerror = function() {
reject(new Error(“Error loading pic”));
image.src = imgUrl;
let fixedImageUrl = https:${properties.param1};
changeColor(fixedImageUrl, color).then(editedPngDataUrl => {
// make something with return…
}).catch(error => {

My question now:

is there a smooth way to access database-images with javascript?

In general i want to change colors in some images. There is a black marker-area, which
i want to be changed in a different color from a hex-code.
After this i want to dynamically insert text-fields on this image (with color- and font-selection).
The textfields have to be fit into the marked area. If there is a plugin/are plugins doing this, i can test them as well.

Thank you very much in advance!


P.S: Two minutes after posting a have no CORS-Error. How does it come? One time no access, one time yes?