Help me finish my plugin

[locnguyen1312]

I almost finish my plugin , the last step is save canvas to database as a image link. But I got this error:

Konva error: Unable to get data URL. Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. For more info read https://konvajs.org/docs/posts/Tainted_Canvas.html.

This problem related to CORS issue but I don’t know how to apply to my plugin.

I used Konvajs library - https://konvajs.org
This is my plugin action code:

	var stage = instance.data.stage;

// function from https://konvajs.org/docs/data_and_serialization/High-Quality-Export.html#How-to-export-a-high-quality-image-from-a-stage
	
  var dataURL = stage.toDataURL({ pixelRatio: 3 });
	downloadURI(dataURL, 'stage.png');
    
    
    // function from https://stackoverflow.com/a/15832662/512042
      function downloadURI(uri, name) {
        var link = document.createElement('a');
        link.download = name;
        link.href = uri;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        delete link;
      }

And finally, I still have know ideas how to save it to the next step in workflow.

[jared.gibb]

a tainted image may be due to your image coming off of the S3 server and not the app server.

[locnguyen1312]

I just added a line of code to the images which I added to the canvas

var imageObj = new Image();
imageObj.crossOrigin = 'Anonymous';
imageObj.src = properties.shape_imageobj;

[locnguyen1312]

Now I have a problem with image exported. I don’t know how to save it to database. It’s now data:image/png;base64 format.

Try to find solution on this topic: Save Base64 encoded file to Bubble - #3 by JohnMark
But I have know ideas to apply it into my plugin

[yusaney1]

Hi @locnguyen1312, you need to use context.uploadContent

Example:

function uploadFile(err, url) {

  if (url) {

    console.log(url); // print the uploaded url to console
    instance.publishState('upload_file', url); // publish url to the element exposed states.
    instance.triggerEvent('file_uploaded'); // trigger event to do x workflows.

  } else {

    error(err.toString()); // return error to console

  }

}

context.uploadContent(//FILENAME, //BASE64 string, uploadFile);

You will need to modify //FILENAME and the //BASE64.

If you need to attach the file to a thing:

context.uploadContent(//FILENAME, //BASE64 string, uploadFile, //thing to attach);

Redu.

[locnguyen1312]

Thank you so much yusaney1 You are my hero

[locnguyen1312]

But could you explain why I cannot add a publishState from workflow (which can show in text or input) to the database ? But It’s ok when using withtriggerEvent workflow.

In my case, When I click the Add to cart button, it returns a publishState content Image url , but I can not add it to the database in the Add to cart click event. But it ok when I create triggerEvent and create an file_uploaded event (your guide above)

Thank you

[jeffmccutcheon]

Hi there did you ever solve this? (and what is the plugin? I’m looking for a screen capture plugin that can capture images off my personal AWS s3 but none of them work (perhaps due to crossorigin security and tainted canvas. )