Merge pull request #684 from bz2/browser_optional

Support browser dist without canvas dependency

CHANGELOG.md

@@ -1,7 +1,7 @@
 # Change Log
 
 ## v2.0.0 (beta)
-- **Breaking change**: now dependent on [canvas 2.x](https://github.com/Automattic/node-canvas)
+- **Breaking change**: for use on server, peer dependencies [canvas 2.x](https://github.com/Automattic/node-canvas), [jsdom 13.x](https://github.com/jsdom/jsdom) and [xmldom 0.x](https://github.com/jindw/xmldom) must be installed.
 - Implement focal gradient radius ([#675](https://github.com/canvg/canvg/pull/675))
 - Fixes 0 height rects ([#674](https://github.com/canvg/canvg/pull/674))
 - Fixes masks with alpha ([#672](https://github.com/canvg/canvg/pull/672))

README.md

@@ -43,30 +43,35 @@ Locally, you can run `npm start` and view the examples at [http://localhost:3123
 
 ## Usage on the server
 
-`npm install canvg`
+`npm install canvg@^1.5`
 
 **2.0.0 beta** (see [CHANGELOG](https://github.com/canvg/canvg/blob/master/CHANGELOG.md))
 
-`npm install canvg@2.0.0-beta.0`
+`npm install canvg@2.0.0-beta.0 canvas@^2 jsdom@^13 xmldom@^0`
 
-## Usage on the Browser
+The dependencies required on the server only are peers so must be installed
+alongside the canvg package.
 
-Include the following files in your page:
+## Usage on the browser
+
+For browser applications with a build process, canvg can be installed using `npm` similar to use on the server. Note in this case the peer dependencies are not required so do not need to be installed.
+
+Alternatively, canvg can be included directly into a webpage:
 ```html
 <!-- Required to convert named colors to RGB -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.4/rgbcolor.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/rgbcolor@^1/index.js"></script>
 <!-- Optional if you want blur -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.1/stackblur.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/stackblur-canvas@^1/dist/stackblur.min.js"></script>
 <!-- Main canvg code -->
 <script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
 ```
 
 For the **2.0.0 beta** (see [CHANGELOG](https://github.com/canvg/canvg/blob/master/CHANGELOG.md)), use this:
 ```html
 <!-- Required to convert named colors to RGB -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.4/rgbcolor.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/rgbcolor@^1/index.js"></script>
 <!-- Optional if you want blur -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.1/stackblur.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/stackblur-canvas@^1/dist/stackblur.min.js"></script>
 <!-- Main canvg code -->
 <script src="https://cdn.jsdelivr.net/npm/canvg@2.0.0-beta.0/dist/browser/canvg.min.js"></script>
 ```

dist/browser/canvg.js

@@ -9,14 +9,13 @@
  */
 
 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('rgbcolor'), require('stackblur-canvas'), require('canvas')) :
-	typeof define === 'function' && define.amd ? define(['rgbcolor', 'stackblur-canvas', 'canvas'], factory) :
-	(global.canvg = factory(global.RGBColor,global.StackBlur,global.Canvas));
-}(this, (function (rgbcolor,stackblurCanvas,canvas) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('rgbcolor'), require('stackblur-canvas')) :
+	typeof define === 'function' && define.amd ? define(['rgbcolor', 'stackblur-canvas'], factory) :
+	(global.canvg = factory(global.RGBColor,global.StackBlur));
+}(this, (function (rgbcolor,stackblurCanvas) { 'use strict';
 
 	rgbcolor = rgbcolor && rgbcolor.hasOwnProperty('default') ? rgbcolor['default'] : rgbcolor;
 	stackblurCanvas = stackblurCanvas && stackblurCanvas.hasOwnProperty('default') ? stackblurCanvas['default'] : stackblurCanvas;
-	canvas = canvas && canvas.hasOwnProperty('default') ? canvas['default'] : canvas;
 
 	function createCommonjsModule(fn, module) {
 		return module = { exports: {} }, fn(module, module.exports), module.exports;

dist/node/canvg.js

@@ -11,7 +11,7 @@
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('rgbcolor'), require('stackblur-canvas'), require('canvas'), require('jsdom'), require('xmldom')) :
 	typeof define === 'function' && define.amd ? define(['rgbcolor', 'stackblur-canvas', 'canvas', 'jsdom', 'xmldom'], factory) :
-	(global.canvg = factory(global.RGBColor,global.StackBlur,global.Canvas,global.jsdom,global.xmldom));
+	(global.canvg = factory(global.RGBColor,global.StackBlur,global.canvas,global.jsdom,global.xmldom));
 }(this, (function (rgbcolor,stackblurCanvas,canvas,jsdom,xmldom) { 'use strict';
 
 	rgbcolor = rgbcolor && rgbcolor.hasOwnProperty('default') ? rgbcolor['default'] : rgbcolor;
@@ -32,9 +32,10 @@
 
 	var isNode = (module.exports && typeof window === 'undefined'),
 	  nodeEnv = true;
-	var JSDOM, windowEnv;
+	var Canvas, JSDOM, windowEnv;
 
 	{
+	  Canvas = canvas;
 	  JSDOM = jsdom.JSDOM;
 	  windowEnv = new JSDOM().window;
 	  windowEnv.DOMParser = xmldom.DOMParser;
@@ -47,7 +48,7 @@
 	function createCanvas(width, height) {
 	  var c;
 	  {
-	    c = canvas.createCanvas(width, height);
+	    c = Canvas.createCanvas(width, height);
 	  }
 	  return c;
 	}
@@ -3312,7 +3313,7 @@
 	    svg.Images.push(this);
 	    this.loaded = false;
 	    if (!isSvg) {
-	      this.img = new canvas.Image();
+	      this.img = new Canvas.Image();
 	      if (svg.opts['useCORS'] == true) { this.img.crossOrigin = 'Anonymous'; }
 	      var self = this;
 	      this.img.onload = function () { self.loaded = true; };