Save Canvas to Data

Need help
1

I’m trying to save a drawing canvas “HTML” element to my “Data” table using “Javascript to Bubble” plugin and this javascript code:

var myImage = document.getElementById("canvas").toDataURL("image/png");
setTimeout(function() { bubble_fn_image(myImage); },1000);

But I’m getting error:

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

I’ve tried several ways to overcome this error but never succeed. Any advice?

2

are you using images from another domain in your canvas?

3

Yes, I’m using the image uploaded to “Data” which use s3.amazonaws.com.

Is there a way enable cross-domain between bubbleapps.io and s3.amazonaws.com?

4

The first thing that comes in mind is setting up an external proxy that will add the necessary headers.

1 Like
5

That’s a good idea :+1:
Would you share how to do that if I have nginx on other server?

6

I used something like this in the past but it’s not nginx.
You can have a look here for a more detailed explanation of the problem and a solution.
For nginx I’m sure there are many tutorials online.

1 Like
7

I believe Bubble should had enabled CORS between amazonaws.com and bubbleapps.io by default since both are used internally by most Bubble apps

8

It looks like CORS headers are correctly set on the images served from bubble.
So the problem should be that you miss the crossorigin attribute on the image. How are you loading it?
In javascript you should set the crossorigin attribute before loading the image. Something like:

image = new Image();
image.crossOrigin = "Anonymous";
// set your load listener and then add the src
9

It’s loaded in “HTML” element. Here the important snippets of the code:

1  <canvas id="canvas"></canvas>
2  <script type="text/javascript">
3    var drawingApp = (function () {
4  
5      var canvas,
6        context,
7        ...
8        outlineImage = new Image(),
9        ...
10 
11       // Redraws the canvas.
12       redraw = function () {
13         ...
14         // Draw the outline image
15         context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
16       },
17
18       // Calls the redraw function after all neccessary resources are loaded.
19       resourceLoaded = function () {
20         redraw();
21       },
22
23       // Creates a canvas element, loads images, adds events, and draws the canvas for the first time.
24       init = function () {
25         canvas = document.getElementById('canvas');
26         canvas.setAttribute('width', canvasWidth);
27         canvas.setAttribute('height', canvasHeight);
28         context = document.getElementById('canvas').getContext("2d");
29 
30         // Load images
31         outlineImage.onload = resourceLoaded;
32         outlineImage.src = "https:**Search for ImagesTable:each item's Image**";
33       };
34 
35     return {
36       init: init
37     };
38   }());
39 </script>
40 <script type="text/javascript">
41   drawingApp.init();
42 </script>

When I tried to add:

image.crossOrigin = "Anonymous";

before line line #30, I got error:

Access to image at 'https://s3.amazonaws.com/appforest_uf/image.png?auto=compress&fit=max' from origin 'https://my-app.bubbleapps.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
10

This topic was automatically closed after 70 days. New replies are no longer allowed.