Dear Forum-Members,
i am relativly new to bubble.io 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.
-
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. -
with JS i am processing the image and return it as a base64-string.
-
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’);
resolve(editedPngDataUrl);
};
image.onerror = function() {
reject(new Error(“Error loading pic”));
};
image.src = imgUrl;
});
}
let fixedImageUrl =https:${properties.param1};
console.log(properties.param1);
changeColor(fixedImageUrl, color).then(editedPngDataUrl => {
// make something with return…
}).catch(error => {
console.error(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!
Daniel
P.S: Two minutes after posting a have no CORS-Error. How does it come? One time no access, one time yes?