Jpeg /PNG/BMP out of a div

Is there a way to create an image out of a div which contains text and css attributes?

I know you can create an image out of a canvas element (with base64), but is there a way to do this with a div, or to print with the css elements?

I'm asking this because I'm tr开发者_JS百科ying to do an online card generator, with a background-color that you can pick, in a color picker.

So if there's no way to create a jpeg out of the DIV element, is there a way to print the page with the generated background color?

I don't think you'd want to generate a bitmap image because that wouldn't scale to print resolution. As far as printing backgrounds, it's an option you can switch on in IE and Firefox, but I don't think you can control it from your page.

You can use custom CSS targeted for the printer using the media CSS directives.

Either import a whole stylesheet tageted for print using:

<LINK rel="stylesheet" type="text/css" media="print" href="foo.css">

Or wrap your CSS STYLE declarations in a media directive like this:

@media print {
  div{ background-color:#CCCCCC; }
}