I got some graphic design that was made using JavaScript / Html5 Canvas.
Take a look here:
http://yeda.us/js/logos.js
now, i need to give this graphic element to a graphic designer in some format he can work with: in either photoshop or Illustrator friendly formats.
Now, of course i can take a screenshot and start working my way from there, but i do need this graphic in a vector format i could use later more robustly.
Is there a way to convert the above mentioned code into graphics? perhaps convert it to SVG somehow?
Check out SVGCanvas which defines an API compatible with HTML5 canvas that creates SVG output from the drawing commands. It probably doesn't handle everything, but your simple example should hopefully work just fine.
Just paste the relevant bits of your code into one of the left textareas and click "do it", then copy the svg output from the textarea on the right.
Like others commented, there's no tool that would help you make a Canvas -> SVG conversion. However, the code isn't too different. Since the sample you gave is rather small, you could use Raphael.js to generate SVG and convert the code you posted to Raphael.js:
http://raphaeljs.com/
UPDATE
A little more detail
include Raphael.js
go through your script line by line and try to find equivalents in Raphael.js. For example, the rgb color stuff you're doing would use this: http://raphaeljs.com/reference.html#Raphael.rgb
run the resulting js
save the generated SVG
Related
I have images hosted on the server, and I would like develop some functionality to let the user have possibility to draw over the picture.
They need to write some text too, and, finally save the result as picture.
Finally, its a simple editor, but I don't find JavaScript library who permit it...
You can see an example of final result I need here : https://nsa40.casimages.com/img/2019/08/29/190829023122267348.jpg
You can achieve this with the Canvas API pretty easily.
Your images can be pulled into the canvas by creating a new Image object. The canvas API itself has a lot of methods for doing the things shown on the image (drawing shapes like ellipses and rasterising text).
Finally a canvas can be saved into a png using the toDataURL method.
I am sure if you dig around the internet, you will find there are already some libraries for these sorts of things. Possibly some keywords to try would be "image editing library JS" or something of that sort. Developing the functionality on your own should be ok if you follow some examples online for how to do each individual bit. Hope this helps :)
I found this page https://www.bridgersteel.com/metal-colors/roof-visualizer where there is an interactive way to change the color of a demo house and see how it looks like.
As far as I know, they used a pretty straightforward and simple way of doing this.
However, what I don't understand is how did they produced the exact super-precise polygon points. Is there a non-manual way of doing this?
Otherwise, even basic, this job requires ton of days to be made...
Do you have any hints?
I'm going to guess they used vector graphics software, like Adobe Illustrator, to create the svg. Depending on the software, you can even see the code it generates. You can also convert an svg image to code using javascript on the website itself.
I visited the page and came up with the following in the link below.
https://drive.google.com/open?id=1PQimeXKGyCJd1lNZHHHuOkOhLc3oq97v
I'm wondering how to go about marking up and coding hover effects for a map similar to this image.
When each district (or section) is moused over/touched/clicked I need to change the colour of it without affecting any other section. The boundaries on each section must be representative of the image and shouldn't be squares. The solution can't use canvas since the site I'm working on has to be usable in older browsers (I'm gutted, personally.)
Ideally I want to do this with CSS without using too much JavaScript or loads of images. Has anyone done this before?
Edit: I know people are suggesting the <area> tag, but AFAIK, it doesn't accept the :hover pseudo class.
Edit 2: I might use this: http://www.netzgesta.de/mapper/
Another self answer...
A few months ago I came across a library called Raphael JS - http://raphaeljs.com/. For those of you unfamiliar with it, it's an SVG DOM library first and foremost. If you know a thing or two about SVG, you'll know that IE doesn't support it, but it does support VML. Raphael caters for this as well. Awesome, right?
Anyway, I ended up saving the AI file for the map as an SVG file and importing the paths into a JSON block, basically doing the same thing as this code: http://raphaeljs.com/australia.html
The only issue I came across:
I wanted the map background to be transparent. Setting fill to transparent whilst allowing the section to accept mouseover worked in Firefox, but in IE, it failed. I instead opted for filling the path with white, then setting the opacity to 0.01. After that I duplicated the path and didn't fill it to create the border.
You can use HTML <area> Tag
If you use jQuery you can use the maphilight plugin. documented at http://davidlynch.org/projects/maphilight/docs/ and available from github at https://github.com/kemayo/maphilight
I see what the problem here is: making let's say a world map the usual way is quite a load. If I get it right, what you want is to have a territory map image and put hover effects making hover area match country borders exactly. SVG can be used for the map (the drawing part is already done) but the problem is how to generate HTML area map using SVG map coordinates. There's a solution (I've tried it, looks good at least with the demo provided) which translates SVG into Raphael (generates the coords) using PHP. But again you need raphael.js for that... well if you change your mind: https://github.com/atirip/svg2raphael. And if you're not familiar with Raphael it will take a time to get used to it, documentation is not so good -for me-.
Edit: I can confirm that translation from SVG->rapahel.js works but SVG files needs some tweaks. For what I see in the example SVG provided in svg2raphael the files were made with Adobe Illustrator. I've tried with SVG (plain) from Inkscape and it didn't work properly, but I could manage to fix the issues, for example:
svg2raphael won't translate Inkscape generated <path style="fill:#ff0000" ...></path> (will set fill="none"!!! so the result is invisible, but will translate correctly <path fill="#ff0000" ...></path> Seems like it will ignore everything inside style="".
svg2raphael misreads the alignments from Inkscape SVG, so you need to either move the illustration inside Inkscape or edit the SVG file with text editor and change the M value to M0,0.
svg2raphael can translate multiple svg elements, but looks at the main tag which Inkscape generates to align groups of illustrations, sometimes the whole illustration moves away from the render area and you see nothing. Hope this helps!
Edit 2: You can use Inkscape's style="" for creating CSS rules to apply to the SVG, that works great ang keeps style outside SVG/Raphael!
I'm trying out some dynamic web page background generation using lines and text.
Take a look at my demo at http://74er.net/labs/lines.html (just focus on the yellow line).
It's a lame and inefficient method by literally creating a <span> element with 1 X 1 size and a yellow background with the X,Y position based on an ellispe formula.
My requirements is for the line creation are fairly simple (or rather straightforward):
must be created at client-side and not a dynamic image generated by server scripts
can be created based on a simple formula (circle, ellispe or just a straight line)
can be contained in a DOM element (e.g. DIV so that I can layer it as a background)
No HTML5 canvas technique (simply because it should be rendered on non-HTML5 compliant browsers)
Not too taxing on the browser like my current implementation
There's not need for:
really smooth curves (though that will be welcomed)
dotted/dashed (I'll like that as well if feasible)
Based on the above, I am almost certain SVG (with Raphaël) is the way to go BUT I am put off by lack of native SVG support in some browsers.
I have looked at Walter Zorns library, and it is has some excellent performance tuning algorithms built-in. So it'll be my choice if I can't find a more creative implementation.
Let me know if you need further clarification.
Morning,
i have enjoyed to work with the drawing features from the Dojo Toolkit. You can see it in action here:
Dojo drawing example
To Download Dojo visit:
Dojo Toolkit
This question is for a web application.
And maybe it's a stupid question but I was wondering if there is a way to
generate a polygon with 4 points, so that the user can himself drag
each point to create it's own (As an example, let's say that we want to remove a window from an image that it is not at a normal angle) .Is it possible?. I can't seem to
find anything after a few hours of search.
Look into the SVG and Canvas APIs. These will allow you to do vector drawings that can be updated via Javascript. For your stated purpose, updating the DOM of SVG documents might be easier. Canvas is more like a 2D bitmap, so you'd need to work out a lot of the drawing code yourself.
SVG Specs: http://www.w3.org/Graphics/SVG/
Canvas Specs: http://www.whatwg.org/specs/web-apps/current-work/
Note that SVG only works in IE with a plugin. Canvas works in IE only with Google exCanvas support.
Sounds like a job for the <canvas> tag or a Flash interface.