It seems fairly common to ignore the type attribute (normally set to 'text/css'), like so:

<link rel="stylesheet" href="reset.css"/>

These should no be ignored.

So far only .woff is inlined but ttf and otf should be supported too.

Benefit would be knowing the base where to load relative included resources from.

Report parse errors on CSS.

As a User I want to specify where to draw the HTML on the canvas.

Following https://developer.mozilla.org/en-US/docs/DOM/stylesheet it should be possible to parse all CSS files using the browser's own CSS object model.

The integration test does not correctly test the resulting image, as setting executeJs to false in integrationTestPage.html still passed the test, although half of the page is not rendered.

This is probably connected to HumbleSoftware/js-imagediff#11.

Rendering a page with an encoding different to the current document will yield "mojibake" when the server does not indicate the page's encoding in the response header.

Solution could be to use the
xhr.responseType = "document";
xhr2 feature, see https://developer.mozilla.org/en-US/docs/HTML_in_XMLHttpRequest when requesting urls through drawURL().

The characterisation test against the twitter page hangs in SlimerJS and is thus disabled in the build.

The problem should be investigated, fixed and the test re-enabled.

The CSS looks like this:

.c2_col {
    display: block;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

Blocked on #32

Changes introduced for #44 resorts to XHR2 feature req.responseType = 'document' that isn't supported yet with PhantomJS. Therefore the automated integration test is currently crippled to work around the missing feature. This should be changed once support exists in a future version of PhantomJS.

The cache: false option forces a full load of repeated occurrences of a URL. For loads in short succession that is probably not needed and could be optimised to ease the load. In addition, inlining elements can take some time on complex pages and caching those results could massively speed up the process.

Wouldn't it make more sense to call the successCallback before calling cleanUp() in module.renderSvg(), so that the callback can make use of the blob URL if needed?

When inlining background-images multiple urls as allowed in CSS3 should be supported.

A font-face definition like

@font-face {
  font-family: "font";
  src: local("font"), url(font.ttf) format("truetype");
}

gets changed to

@font-face {
  font-family: "font";
  src: local("font") url(font.ttf) format("truetype");
}

Observe the missing comma. This possibly stems from the CSSParser.

Support element style definitions like <div style="background-image: url("something.png");">

  seems not to be valid XHTML, something the htmlparser.js should provide.

Allow custom size of canvas

As a workaround for implementations delaying some rendering after DOM ready, we should offer an option to delay rendering for a given time until that code is executed.

A smoke test should prevent things like #35 happening.

Firefox 18 has stopped rendering a "data:image/svg+xml" URI including a inside an element. The resulting img element gets assigned a zero width & height.

Removing the foreignObject results in showing the the with the SVG's correct height & width.

Chrome freezes when using rasterizeHTML.drawDocument() on a large page. It appears that rasterizeHTML is iterating through a loop too many times. The following error appears 27 times in the console:

Blocked script execution in 'http://redacted' because the document's frame is sandboxed and the 'allow-scripts' permission is not set. rasterizeHTML.allinone.js:11

The error does not appear in Firefox. Also, I can confirm that my code is not calling rasterizeHTML.drawDocument in a loop.

Here is my code.

  if ($('#postage_stamp').length == 0){

     $('body').append('<canvas id="postage_stamp" width="' + postageWidth + '" height="' + postageHeight + '"></canvas>')

     var postageTopMargin = $('#redacted').offset().top;
     var newPostageWidth = postageWidth * 0.08

     $('#postage_stamp').css({'width':newPostageWidth, "top":postageTopMargin, "right":0, "z-index":10, "position":"fixed"})
     $('body').append('<div id="stamp_bar" style="position:fixed; top:140px; right:0px; width:' + newPostageWidth * .95 + 'px; height:10px; opacity:0.5; background-color:lightblue; z-index:11"></div>')

     $('#stamp_bar').hide();

  };

  var canvas = document.getElementById('postage_stamp');
  var ctx = canvas.getContext('2d');

  //Clear the Canvas
  // Store the current transformation matrix
  ctx.save();


  // Use the identity matrix while clearing the canvas
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  //Restore the transform
  ctx.restore();

  //Set Canvas height (different from css height) of
  //canvas
  $('#postage_stamp').attr('height', postageHeight);

  //Draw the document into the canvas
  setTimeout(function(){
     rasterizeHTML.drawDocument(window.document,canvas,stampInit());
  }, 500);

};


Thanks! I love the library, BTW. Other than this issue, I haven't had any trouble with it, and the results look amazing!

I get this error when running example.html, or when trying to use rasterizeHTML.js in any way, both in Chrome and Safari:

Uncaught TypeError: Cannot call method 'parseOptionalParameters' of undefined

CSSParser removes the comma between multiple values for background-position, e.g:

background-position: 0 center right center;

instead of

background-position: 0 center, right center;

If IE supports rendering HTML inside an SVG we should support that. Possibly by solving #20 first, as the current CSS parser does not support IE9.

Will use phantomjs and with that Webkit. So we would need to disable failing tests due to said Webkit bug with same origin policy.

'BlobBuilder is deprecated. Use "Blob" constructor instead.'

Add examples to the API page.

Hi,

As we are using SVG I am sure there must be an option to scale the image size multiple times without loosing quality before adding it to canvas.

I am trying to do it but on increasing the image size the quality gets worst - pixelated.

trying this: http://jsfiddle.net/cburgmer/NfE3c/8/ - context.drawImage(image, 0, 0, image.width, image.height, 0, 0, 500, 1250);

Please let me know if there is a way.

Thank you
Satya

Using @import and one can reference a CSS document multiple times. Do not load such documents more than once. Especially work around circular references.

If a stylesheet references a resource more than once we currently load each occurrence once which is an unnecessary overhead and a performance issue.

jQuery.ajax is used for loading referenced CSS. We don't want to pull in jQuery just for that.

The new experimental executeJs feature for drawURL needs more:

• error handling
• caching
• removal of temporary element
• documentation

As a user I want to only render certain parts of a page.

Idea:

1. Load the page to a big enough iframe. Disable running JS if not requested: element.setAttribute("sandbox", "allow-same-origin");
2. Run element.getBoundingClientRect() to capture its offset
3. Generate an SVG with a foreign object that is big enough to capture the selected element, shift inversely to the element's offset: <foreignObject x="-XOFFSET" y="-YOFFSET" width="XOFFSET+WIDTH" height="YOFFSET+HEIGHT">

Issues:

• What size to use for the iframe? Using the size of the target element will force line-breaks and overlaps on certain documents.
• Element offsets might change when rendered in the SVG

Parsing of url() is already implemented, so is loading of external CSS. Just needs a bit of bringing together.

Including SVGs in the HTML leads to a parsing error. Is it possible to add SVG support?

Example SVG:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg> 

Publish to NPM and possibly document use via browserify.

Document the public API in the wiki

The manual integration test page for the Webkit browsers doesn't show up the web font in Chrome anymore. Is that a broken test or a broken web font integration for Chrome?

CSS rules' importance derives at the latest step from their order in the referencing document. We should thus keep the order.

See http://www.joezimjs.com/javascript/the-lazy-mans-url-parsing/ for a simple URL parser native to the browser.

It might fail were we allow the user to specify an optional base URL.

The workaround making sure that background images are properly rendered in a canvas influences the overall page's CSS.

Currently for each drawHTML/drawURL… a SVG object is added to the DOM. CSS embedded in those SVGs influence the DOM's CSS.

Probably the quickest solution is to remove the SVG once the canvas has been rendered.

When inlining URLs broken urls should not fail the script.

While for all the other supported resources an error is reported back with the given URL that failed to load, this is not yet implemented for loading web fonts.

A font-face rule following other rules (array index > 0) triggers the following error in Chrome:

RangeError: INDEX_SIZE_ERR
    at CSSStyleSheet.CSSOM.CSSStyleSheet.insertRule (http://localhost:8000/lib/CSSOM.js:629:9)
    at window.rasterizeHTMLInline.changeFontFaceRuleSrc (http://localhost:8000/src/inlineCss.js:138:20)
    at http://localhost:8000/src/inlineCss.js:481:17
    at funcFinishCallback (http://localhost:8000/src/inlineUtil.js:60:21)
    at http://localhost:8000/src/inlineCss.js:472:17
    at http://localhost:8000/src/inlineUtil.js:123:13
    at XMLHttpRequest.<anonymous> (http://localhost:8000/src/inlineUtil.js:94:17)

The issue is caused by CSSOM not correctly setting the parentStyleSheet on inserted rules.

I tried the latest version on a trivial markup, and while it does exactly what I expected on Firefox, it renders the text as extremely small in Chrome 30.0.1599.69 m.

I can see that it renders SOMETHING though in the picture, but it appears to only be 1 pixel high.

<!DOCTYPE html>
<html>
<head>
    <title>rasterizeHTML.js example</title>
    <script type="text/javascript" src="rasterizeHTML.allinone.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="200"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");

        rasterizeHTML.drawHTML('Some <span style="color: red">HTML</span>', canvas);
    </script>
</body>
</html>

Any ideas what I'm doing wrong?

<input type="image" src="an_image.png"/> can be handled similar to IMG tags. Currently they are not inlined.

Both lines are valid, however we only support the first:
@import url("the.css");
and
@import "the.css";