First stab at rasterizeHTML.renderHtmlFragment(). See cburgmer#78

cburgmer · cburgmer · commit 75de59fdec5c · 2016-07-03T00:10:16.000+08:00
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "css-mediaquery": "~0.1.2",
     "inlineresources": "~0.3.0",
     "url": "~0.10.1",
-    "xmlserializer": "~0.3.1",
+    "xmlserializer": "~0.4.0",
     "sane-domparser-error": "~0.2.0"
   },
   "devDependencies": {
diff --git a/src/browser.js b/src/browser.js
@@ -185,6 +185,15 @@ var browser = (function (util, proxies, ayepromise, sanedomparsererror, theWindo
         return defer.promise;
     };
 
+    module.parseHtmlFragment = function (htmlFragment) {
+        var doc = theWindow.document.implementation.createHTMLDocument(''),
+            fragmentContainer = doc.createElement('div');
+        fragmentContainer.innerHTML = htmlFragment;
+        doc.documentElement.appendChild(fragmentContainer);
+
+        return fragmentContainer.firstChild;
+    };
+
     var addHTMLTagAttributes = function (doc, html) {
         var attributeMatch = /<html((?:\s+[^>]*)?)>/im.exec(html),
             helperDoc = theWindow.document.implementation.createHTMLDocument(''),
diff --git a/src/index.js b/src/index.js
@@ -37,7 +37,27 @@ var rasterizeHTML = (function (util, browser, rasterize) {
             optionalArguments = Array.prototype.slice.call(arguments, 1),
             params = util.parseOptionalParameters(optionalArguments);
 
-        return rasterize.rasterize(doc.documentElement, params.canvas, constructOptions(params));
+        var element = doc.documentElement ? doc.documentElement : doc;
+
+        return rasterize.rasterize(element, params.canvas, constructOptions(params));
+    };
+
+    var drawHtmlFragment = function (htmlFragment, canvas, options) {
+        var doc = browser.parseHtmlFragment(htmlFragment);
+
+        return module.drawDocument(doc, canvas, options);
+    };
+
+    /**
+     * Draws a HTML fragment string to the canvas.
+     * rasterizeHTML.drawHtmlFragment( htmlFragment [, canvas] [, options] ).then(function (result) { ... });
+     */
+    module.drawHtmlFragment = function () {
+        var htmlFragment = arguments[0],
+            optionalArguments = Array.prototype.slice.call(arguments, 1),
+            params = util.parseOptionalParameters(optionalArguments);
+
+        return drawHtmlFragment(htmlFragment, params.canvas, params.options);
     };
 
     var drawHTML = function (html, canvas, options) {
diff --git a/test/manualIntegrationTestForWebkit.html b/test/manualIntegrationTestForWebkit.html
@@ -130,7 +130,7 @@ <h3>Test cases</h3>
             <canvas id="htmlFragmentTest" width="200" height="100"></canvas>
             <script type="text/javascript">
                 testHelper.readHTMLFixture("testFragment.html").then(function (htmlFragment) {
-                    rasterizeHTML.drawHTML(htmlFragment, htmlFragmentTest, {
+                    rasterizeHTML.drawHtmlFragment(htmlFragment, htmlFragmentTest, {
                         baseUrl: "fixtures/",
                         cache: false,
                         active: '.bgimage',
