Hello,
I’m creating an application for a car rental service, and I’ve encountered a problem while trying to screenshot an element of the page. I use the following plugins:
Image Annotation: I use it to mark an element on an image, then a popup appears, I select the type of damage, and then an appropriate letter symbolizing the type of damage appears.
PDF & Screenshot Pro - BEP: for capturing images which I then want to automatically assign to the appropriate attribute in car damages - for example, front end damage, as well as for creating PDFs for printing.
I have created option sets with names of types of damages and images. From the database side, through modifications of attributes in option sets, I uploaded appropriate images (letters symbolizing a certain type of damage). Everything displays exactly as I planned, but the problem appears only after attempting to capture using the PDF & Screenshot Pro - BEP plugin. An error appears in the console:
Access to image at ‘https://6577fea3ebc4defa765eae86a19029a1.cdn.bubble.io/f1710105506191x646257863340176800/P.png’ from origin ‘https://seositefy.bubbleapps.io’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
html2canvas.min.js:20
GET https://6577fea3ebc4defa765eae86a19029a1.cdn.bubble.io/f1710105506191x646257863340176800/P.png net::ERR_FAILED
4 373ms Error loading image https://6577fea3ebc4defa765eae86a19029a1.cdn.bubble.io/f1710105506191x646257863340176800/P.png
I browsed various topics on forums, but couldn’t figure it out on my own. Does anyone have an idea how to manage the CORS policy? Or another way in which I can save an image with other images overlaid (letters symbolizing damages) and assign it to an attribute in the database? The next step is to print the appropriate documents, and I need to place one image of the car’s layout showing its damages there.
If you’ve read this and are willing to offer me some advice, I would be very grateful. I’m running out of ideas on how to manage this.