Dragging canvas out of the browser (as an image)

p5.js Libraries
1

Hi everyone!
this is my first post and i hope i am in the right section here. Also, i am very new to p5 and coding in general so please bear with me :slight_smile:

i am kind of stuck in a very simple project i’m doing. i want to drag the canvas out of the browser into my desktop and be saved as a specific file (svg in my case, i use the P5js-svg plugin). i haven’t found a solution for this i thought i’d ask here.

i thought i’d note that, when i make my canvas a variable and make it a div element

(canvas.parent('my_canvas')

then it returns the following in my console:

TypeError: Argument 1 ('node') to Node.appendChild must be an instance of Node

if i set my canvas as normal (non-svg) the div element works fine (i hope i’m right about it being called a “div element”). But i still have no idea how to make it a “drag-able” image/file, this should at least be doable since i can drag out any image from another source, say a png image on a website.

shall i post my file or do you need any additional information?

thanks in advance and please apologize if i made any obvious mistakes, i’m learning :slight_smile:

1 Like
2

please link to that and show your minimal sketch.js code you use to
draw something what you want save as a SVG file?
( by DRAG? what usually max gives a png? )

3

Hi kll! Thanks for the reply!

Here’s my code;

'use strict';

let canvas;

function setup() {
  canvas = createCanvas(200, 200, SVG);
  colorMode(HSB, 360, 100, 100);
  noStroke();

  setupShape();
}

function draw() {
  drawShape();
}

function keyReleased() {
  if (key == 's' || key == 'S') save("generated_graphic.svg");
  if (key == 'p' || key == 'P') save("generated_graphic.png");
}

the functions setupShape() and drawShape() are in a seperate File, just in case you’re wondering. The argument “SVG” inside createCanvas() is activating the p5js-svg plugin. Saving as svg or png works perfectly.
I stumbled upon this while trying to find a solution but i can’t really make it work (at least in safari.)
thecssninja.com - drag out files like gmail

here’s a link to the svg plugin:
github - p5.js-svg

1 Like
4

-a- looks like from 2015 ( and i not see with what rev of p5.js it is tested )
does it RUN and DO what it is supposed to do BUT when you try our DRAG you only get a PNG?

-b- your code uses key to save a SVG file, is that working?

-c- again, p5.js makes ?frames of PNG? with my little understanding
now using any SVG renderer means what?

  • that you can draw SVG
  • that the browser gets by p5.js send a SVG to show as image,
    then a DRAG / image save to / would can catch a SVG file, but i doubt that is the case.

please use your browser inspect to DIG into the stuff what is real LOCAL.

sorry, hope the specialists can comment better,
and thanks for adding that information.

5

a) it works perfectly fine with the current version of p5.js. it does what it’s supposed to do. BUT i cannot drag out a PNG neither can i drag out a SVG. (that means if i set up my canvas completely without any plugins, i still can’t drag out anything.) I think this has to do with the way the p5.renderer represents things in the html structure. Also, it seems like no sketch (no matter the plugin) is able to make itself “draggable” without any special instructions.

b) it does, it works fine.

c) svg does make a vector file rather than a bitmap file. i can draw svg’s and i can save them as such. the browser does indeed seem to get a svg to display, when i save the file via my coded command, i do get a .svg file which is working fine.

the browser seems to only be able to copy images on dragout, but the article i linked from cssninja describes a way to make files of any type draggable. I just can’t seem to get it to work. When you try out cssninja’s example page, it doesn’t work for me either. I’m using the latest version of safari on macOS mojave.

1 Like
6

I am not a p5.js expert, but it sounds like you want to create an html element, rather than rendering to the canvas. You do that with p5.dom.

function setup() {
  createCanvas(400, 400);
}
function draw() {
  if(frameCount==1){
    createImg("myimg.png");
  }
}

Now there is an html image below your canvas. Like any html img element, you can drag it.

If you want it to be on top of your canvas area, I believe that gets into attaching it to canvas object and/or positioning. Instance mode might be an option?

Hopefully forum p5.js experts can steer you right here.

7

@jeremydouglass:

thank you for your solution, unfortunately i couldn’t get it to work that way. The svg plugin crashes when i try to make the canvas a div element in the HTML via canvas.parent. When i try with bitmap mode it does work but i still can’t drag anything out of the browser.

let canvas;

function setup() {
  canvas = createCanvas(200, 200);
  canvas.parent('p5_canvas');
  colorMode(HSB, 360, 100, 100);
  noStroke();

  setupShape();
}

function draw() {
  drawShape();

  if(frameCount==1){
    createImg("myimg.png");
  }
}

function keyReleased() {
  if (key == 's' || key == 'S') save("generated_graphic.svg");
  if (key == 'p' || key == 'P') save("generated_graphic.png");
}

the html file looks like this

<html>
  <head>
    <meta charset="UTF-8">
    <title>draggable image test</title>
    <script src="libraries/p5/p5.js" type="text/javascript"></script>
    <script src="libraries/p5/p5.dom.js" type="text/javascript"></script>
	  <script src="libraries/svg/dist/p5.svg.js" type="text/javascript"></script>
    <script src="canvas.js" type="text/javascript"></script>

  </head>
  <body>
    <div id='p5_canvas'></div>
  </script>
  </body>
</html>
8

Ah – somehow I completely misunderstood / misread. I thought you wanted to drag an image file out of the canvas area – not an image the whole canvas.

I’m not sure, but I would guess that you should use createGraphics…? Maybe a p5.js expert can chime in.

https://p5js.org/reference/#/p5/createGraphics