Forum Academy Marketplace Showcase Pricing Features

Paste Image from clipboard

Hi,

Is there any option to paste an image from clipboard, to an Image or ImageUploader on the page?

3 Likes

I’m actually quite curious about this as well. Have you found a solution already @mashkash ?

I used this. https://jsfiddle.net/ourcodeworld/hzvfq82b/

1 Like

Hey pal. Cool – thanks for that. How did you implement that in bubble?

1 Like

How did you implement this code? Thank you for sharing.

1 Like

I don’t think he did or he would have told you.

I don’t think he did or he would have told you.

I just tried a very quick and simple test of this and it works as far as getting the screenshot to show up in the canvas. Haven’t figured out how to then get it into a Bubble object, but will continue investigating.

All I did was drop an HTML element on the page with this code

I also included the Javascript from the jsfiddle AmateConLocura shared in the same HTML element, but wrapped it in .

That’s it: take a screenshot, then paste and it appears within the canvas element on the page.

To get the data saved as an image in Bubble, I’m not sure of next steps. It would be great if others could add to the thread with ideas.

The standard way to save the data uses the canvas.toDataURL javascript function.

I found some info on using that and have managed to get it to save the file locally (not to Bubble).

To do that, I added a button to the page, then in the workflow for the button click, I used “Run Javascript” from the Toolbox plugin to run the following code:

var image = mycanvas.toDataURL(“image/png”).replace(“image/png”, “image/octet-stream”); // here is the most important part because if you dont replace you will get a DOM 18 exception.

downloadImage(image, ‘canvas.png’);

// Save | Download image
function downloadImage(data, filename = ‘untitled.jpeg’) {
var a = document.createElement(‘a’);
a.href = data;
a.download = filename;
document.body.appendChild(a);
a.click();
}

So now, after you’ve pasted the screenshot, you can save the file to your computer.

Next steps
The important next step would be to get it saved as a Bubble image. I have no clue how to do that, but hopefully the steps above will help someone figure out how to do it.

This plugin “Save Group as Image” (Save Group As Image Plugin | Bubble) seems to have tackled some of this, and might make it work. It has some poor reviews so I’m not sure if it’ll work, but it gives me hope that it’s possible.

2 Likes