Flattening layers of DIVs and SVG into a single image - javascript

I'm working on a ball customizer for a client. It allows the viewer to change the colors of the ball, change the text, etc. The ball itself is just many layers of divs stacked on top of each other with their background image changing to predefined colors. The SVG comes in when they want to change the text of the ball (I use SVG because the text needs to curve).
The problem arises when I try to use toDataURL. I guess the SVG in the canvas basically ruins it from ever being able to pass through toDataURL without the browser throwing a security warning.
What are my other options? The backend is ColdFusion.

you can render svg to image by putting it in blob, you can also render html to svg using xhtml namespace - security error is caused by svg namespace property (xmlns) in tag as www.w3.org/2000/svg is "cross origin" (for me its just Chrome bug). If you really need do get pixel data from client side generated svg - you may be in trouble i'm not sure if it's possible at all to make it works in chrome. I'd rather try to render curved text directly on canvas, not svg

Related

Manipulating the corners of an SVG with a image uri inside of it

I am trying to write a script in JS where I can drag the corners of an SVG with an image URI inside around the screen and have it warp I can't use anything like node or three.js because this is a project I am making a scratch extension for my class to use.
I want to go from this
to this

How can I do a generated image on a website?

I'm trying to figure out how to make a website image, just some little blob of color without actually creating an image and putting an image tag and all of that. Is it possible?
Would I be drawing it with CSS, Javascript, or HTML5? If drawing it on the fly with something like Javascript, is that something that is a good idea? drawing over and over?
Not sure where to start looking? Thanks for any help.
Here is an example of an image I'd like to make: https://dl2.pushbulletusercontent.com/0P1OxQU6AoPT5LnWG3jROJgEmdWoPKUw/image.png
SVG is a good choice. It allows you to use a document structure, much like that of HTML, for vector graphics. The <rect> element makes a rectangle. For more complex shapes like your example, check out paths. More info here: Rounded corner only on one side of svg <rect>
Vector graphics are easy to generate and manipulate programatically. They can also be sized and scaled without pixelation.
If you need complex filtering or want raster graphics instead, a Canvas element and its 2D drawing context are a good choice.

Capture what is under my Canvas as part of the Image

What I'm trying to do is include what is under my canvas object in the page as part of the image when I saved what is inside the canvas.
I have an application that creates a canvas and lets you draw with the mouse on it. This drawing functionality is in place so you could draw on a page as if they were notes, so after I can save the image or page with the "notes" I draw on it.
So far I'm able to save what is drown in the canvas but because the background is not part of the canvas I can't get to save it together. I tried experimenting with html2canvas.js but it doesn't work in my case because it takes the DOM object an redraw them into the canvas, it doesn't take just what is under the canvas to be part if the final image.
I would like to know if there is a way to do this, or somehow capture the pixels in that area and redraw them as part of the canvas when I'm creating it.
Thanks a lot in advance!
Possibly a duplicate, but I'll give you a very short answer; you can't (unless you do something like html2canvas, where it transposes the DOM onto a canvas element)
This is by design. If you could it would be a security flaw. Scripts are not allowed to create images out of arbitrary stuff on a person's screen. If you search for "html canvas security rules" you'll find more information on why this is disallowed.
Unfortunately, HTML2Canvas (or something like it) is the only option, but it's only part of the puzzle. To get the effect you want, you need to create another canvas to composite the output from HTML2Canvas and the drawing canvas. You'll need to offset the output of HTML2Canvas to the position of your drawing canvas, and then draw the imagedata from your drawing canvas on top of it. Then you can use the imagedata from the compositing canvas as your output.

Specifying Custom dimensions for a Shield UI Background image

I have a site where I am providing users some graphical information and I use the Shield UI JavaScript Chart. I am trying to take some more advanced use of the chartAreaBackgroundImage: property. I am actually in need of several things I couldn’t find anything in the manuals.
Is there a way to resize the picture by a certain factor e.g. to specify exact dimensions?
Is it possible to set transparency for the image used?
The images used as the chart background, set by the chartAreaBackgroundImage property have currently no more adjustable properties than the URL of the image itself.
Once rendered, the image fills the entire plot (or data) area of the chart.
In addition there is no transparency factor that can be adjusted as well, however you may adjust the images forehand and also use appropriate dimensions of the chart and data area, so that the desired visual effect is achieved.

How to save several text written using fillText on canvas to Google chrome cache

I have an image on my canvas . the canvas is annotated with text on top of the image. I wrote the text using canvas.fillText(). How do i save this text to the google chrome cache. I can use HTML5 or js.
You have to save the text in variables as you write it on to the canvas. The canvas element does not retain the internal structure of what you've written on to it, once something is drawn it's just pixels, the only way to get it back would be to implement some sort of OCR in JavaScript.
If you want to retain the structure of the elements you're adding to a dynamic picture then use SVG instead.

Categories