GOJS exporting the canvas diagram as an image - javascript

I am using the GOJS javascript framework to work with flowcharts. I have a pretty huge flowchart that isn't fully visible in the viewport. There is a scrollbar to view the hidden content in the canvas.
I am trying to export the canvas as an image. But I am only able to export the visible part in the canvas and not the full flowchart. I have tried using canvas.toDataURL() and the GOJS diagram.makeImageData() APIs, but haven't been successful.
Could the JS experts here please help me out? Thanks so much...

You should not be touching the Canvas element inside the Diagram's DIV element.
Have you read http://gojs.net/latest/intro/makingImages.html ? You need to pass some options to Diagram.makeImageData.

Related

How can I create customized shapes in CSS react.js?

I'm building a Landing Page in react.js and I want to create a custom shape similar to this image {see below}. As of now I have created some simple shapes and now I want to achieve new level in css by creating this shape. Please help me.
Here I am also sharing SVG of this image SVG link
here is png format as well.
For doing such complex shapes I would recommend using some drawing tool like Photoshop or Illustrator, then you export as SVG and use it.

Printing a Exported svg of original size in paper.js

I'm using a paper.js for creating a web based editor like Adobe Illustrator.
Issue which i'm facing is when i import a svg file which is quiet large then my canvas and when i try to print that svg using
newWindow.write("`<html><body>`"+paper.project.exportSVG();+"`</body></html>`")'
newWindow.print();
it covers the only part that is visible to canvas.
i also tried to zoom out the canvas using zoom-factor , but at that time there is a issue of original size of the svg.
though the dimensions are quiet large it can be cover within the a4 size page easily.
thanks in advance!!!
I believe this is a bug in the library, or a case of missing options. Could you open an issue for it on https://github.com/paperjs/paper.js/issues ? That's the better place to discuss this.

How can I create a full-width container for a Sigma.js graph?

I'm trying to create a graph using Sigma.js that fills the entire space of the page. Right now the default layout is a square:
I've read through the docs and I think I have to create a custom renderer. I've looked at the project's existing renderer for Canvas but I'm not sure where I would specify the page's full width and height.
Any tips or help would be much appreciated!
Solved it. I had to set scalingMode to 'outside':
https://github.com/jacomyal/sigma.js/wiki/Settings#rescale-settings

Zooming part of an image

I am creating a web application in which I need to display an image which a grid superimposed on it. So when the user clicks on any one tile of that grid, that tile gets magnified.
I have the image with superimposed grid but cannot find a way to zoom parts of it. I am using jquery and javascript
Can you please help me with it?
Use a plugin like http://www.jacklmoore.com/zoom

Drawing Lines and Rectangle through mouse over an image using jquery

I implemented the copy image from clipboard to web page with the help of following tutorial :
http://joelb.me/blog/2011/code-snippet-accessing-clipboard-images-with-javascript/
Demo : www.pasteshack.net
It working properly.
Now I want to implement drawing shapes like lines, rectangles and circles over that image using jquery. I want it through mouse so that I can drag and drop it anywhere over image. The rectangles and circle must have to be transparent so that I can place it over image for identifying bug or fault in image.
Can it possible using jquery or javascript. Is there any plugin or tutorial available for it.
Thanks in advance.
Check the Following tutorial:
https://github.com/websanova/wPaint
It will definatly help you.

Categories