├── .gitignore ├── image ├── Screen-Shot-2015-04-30-at-6.16.41-PM-1024x581.png └── Screen-Shot-2015-04-30-at-6.48.15-PM-1024x567.png ├── index.html ├── src ├── canvg.js ├── canvg_v2 │ └── canvg.js ├── insert.code.js └── run.js └── svg ├── qunee_h5.svg └── svg-logo.svg /.gitignore: -------------------------------------------------------------------------------- 1 | *.lock 2 | **/node_modules/ 3 | **/.*/ 4 | **/.* 5 | **/*.rar 6 | !.gitignore -------------------------------------------------------------------------------- /image/Screen-Shot-2015-04-30-at-6.16.41-PM-1024x581.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samsha/svg2canvas/f1ac57639b344ca589fcaef79ce5c9fa5e82f739/image/Screen-Shot-2015-04-30-at-6.16.41-PM-1024x581.png -------------------------------------------------------------------------------- /image/Screen-Shot-2015-04-30-at-6.48.15-PM-1024x567.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samsha/svg2canvas/f1ac57639b344ca589fcaef79ce5c9fa5e82f739/image/Screen-Shot-2015-04-30-at-6.48.15-PM-1024x567.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SVG to HTML5 Canvas Converter 6 | 7 | 8 | 10 | 11 | 102 | 103 | 104 |

105 |

106 |

107 |

108 | Drop SVG files here. 109 |

110 |

111 |

112 | 113 | 114 | 140 | 141 | 142 | 145 | 146 |

115 |

SVG to Canvas Converter

116 | 117 |

118 |

< SVG Files

119 |

Canvas Code >

120 |

121 |

122 | 123 | 127 | 130 |

131 |

132 | svg2canvas based on canvg.js 134 |

135 | Supports the following browsers: Chrome, Safari 136 |

137 | Can be used for the node image in Qunee for HTML5 as follows: 138 |

139 |

143 |

144 |

147 | 148 |

149 |

150 | 151 |

152 |

153 | 341 | 342 | 343 | 344 | 394 | 395 | 396 | -------------------------------------------------------------------------------- /src/insert.code.js: -------------------------------------------------------------------------------- 1 | var code; 2 | var images; 3 | var caches; 4 | var index = 0; 5 | 6 | function appendCode(str, ctx) { 7 | code += str; 8 | } 9 | 10 | function createCtxName() { 11 | if (index == 0) { 12 | return 'ctx'; 13 | } 14 | return 'ctx' + index; 15 | } 16 | 17 | function customCanvas(ctx, tempCtx) { 18 | if (ctx.name) { 19 | if(!index){ 20 | index++; 21 | } 22 | return; 23 | } 24 | ctx.name = createCtxName(); 25 | index++; 26 | if (tempCtx) { 27 | appendCode('var canvas = document.createElement("canvas");\n' + 28 | 'canvas.width = ' + ctx.canvas.width + ';\n' + 29 | 'canvas.height = ' + ctx.canvas.height + ';\nvar ' + ctx.name + ' = canvas.getContext("2d");\n', ctx); 30 | } 31 | 32 | function valueToString(v) { 33 | if (typeof v == 'string') { 34 | //if(!caches){ 35 | // caches = {}; 36 | //} 37 | //if(!caches[v]){ 38 | // var name = 'str' + index++; 39 | // appendCode('var ' + name + ' = "' + v.replace(/\"/g, "'") + '";\n'); 40 | // caches[v] = name; 41 | //} 42 | //return caches[v]; 43 | return '"' + v.replace(/\"/g, "'") + '"'; 44 | } else if (v instanceof CanvasGradient) { 45 | return 'g'; 46 | } else if (v instanceof CanvasPattern) { 47 | return 'p'; 48 | } else if (v instanceof HTMLCanvasElement) { 49 | return v.getContext('2d').name + '.canvas'; 50 | } else if (v instanceof HTMLImageElement) { 51 | if(!images){ 52 | images = {}; 53 | } 54 | if(!images[v.src]){ 55 | images[v.src] = v; 56 | v.name = 'img' + index++; 57 | appendCode('var ' + v.name + '= new Image();\n' + v.name + '.src = ' + valueToString(v.src) + ';\n', ctx); 58 | } 59 | return v.name; 60 | } 61 | return v; 62 | } 63 | 64 | function createFunction(name) { 65 | return function () { 66 | //ctx.setTranslate(10, 10) 67 | var param = ''; 68 | if (arguments.length) { 69 | var i = 0; 70 | while (i < arguments.length) { 71 | param += valueToString(arguments[i]); 72 | i++; 73 | if (i < arguments.length) { 74 | param += ','; 75 | } 76 | } 77 | } 78 | var ctxName = this.name; 79 | if (name == 'createLinearGradient' || name == 'createRadialGradient') { 80 | appendCode('var g = ' + ctxName + '.' + name + '(' + param + ');\n', this); 81 | var gradient = this[name].apply(this, arguments); 82 | 83 | var ctx = this; 84 | var oldFunction = gradient.addColorStop; 85 | gradient.addColorStop = function (offset, color) { 86 | appendCode('g.addColorStop(' + valueToString(offset) + ',' + valueToString(color) + ');\n', ctx); 87 | return oldFunction.apply(this, arguments); 88 | } 89 | return gradient; 90 | } else if (name == 'createPattern') { 91 | var result = this[name].apply(this, arguments); 92 | appendCode('var p = ' + ctxName + '.' + name + '(' + param + ');\n', this); 93 | return result; 94 | } else if (name == 'translate' && !arguments[0] && !arguments[1]) { 95 | //.translate(0,0) 96 | } else if (name == 'scale' && arguments[0] == 1 && arguments[1] == 1) { 97 | //.translate(0,0) 98 | } else if (name == 'setLineDash') { 99 | appendCode('' + ctxName + '.' + name + '([' + param + ']);\n', this); 100 | //} else if (name == 'drawImage') { 101 | // appendCode('' + ctxName + '.' + name + '([' + param + ']);\n', this); 102 | } else { 103 | appendCode('' + ctxName + '.' + name + '(' + param + ');\n', this); 104 | } 105 | return this[name].apply(this, arguments); 106 | } 107 | } 108 | 109 | function createGetSet(name) { 110 | return { 111 | get: function () { 112 | return this[name]; 113 | }, 114 | set: function (v) { 115 | var old = this[name]; 116 | if(old === v){ 117 | return; 118 | } 119 | this[name] = v; 120 | var ctxName = this.name; 121 | appendCode(ctxName + '.' + name + '=' + valueToString(v) + ';\n', this); 122 | } 123 | } 124 | } 125 | 126 | //var prototype = CanvasRenderingContext2D.prototype; 127 | // 128 | //var properties = {}; 129 | //Object.getOwnPropertyNames(ctx).forEach(function (name) { 130 | // try{ 131 | // properties[name] = ctx[name] instanceof Function; 132 | // }catch(error){} 133 | //}) 134 | // 135 | //Object.getOwnPropertyNames(prototype).forEach(function (name) { 136 | // try{ 137 | // properties[name] = prototype[name] instanceof Function; 138 | // }catch(error){} 139 | //}) 140 | //delete properties.canvas; 141 | //delete properties.drawSvg; 142 | //delete properties.constructor; 143 | //delete properties.prototype; 144 | //console.log(JSON.stringify(properties)); 145 | 146 | 147 | var properties = {"webkitLineDash":false,"strokeStyle":false,"fillStyle":false,"name":false,"globalAlpha":false,"globalCompositeOperation":false,"lineWidth":false,"lineCap":false,"lineJoin":false,"miterLimit":false,"shadowOffsetX":false,"shadowOffsetY":false,"shadowBlur":false,"shadowColor":false,"lineDashOffset":false,"webkitLineDashOffset":false,"font":false,"textAlign":false,"textBaseline":false,"webkitBackingStorePixelRatio":false,"webkitImageSmoothingEnabled":false,"save":true,"restore":true,"scale":true,"rotate":true,"translate":true,"transform":true,"setTransform":true,"createLinearGradient":true,"createRadialGradient":true,"setLineDash":true,"getLineDash":true,"clearRect":true,"fillRect":true,"beginPath":true,"closePath":true,"moveTo":true,"lineTo":true,"quadraticCurveTo":true,"bezierCurveTo":true,"arcTo":true,"rect":true,"arc":true,"fill":true,"stroke":true,"clip":true,"isPointInPath":true,"isPointInStroke":true,"measureText":true,"setAlpha":true,"setCompositeOperation":true,"setLineWidth":true,"setLineCap":true,"setLineJoin":true,"setMiterLimit":true,"clearShadow":true,"fillText":true,"strokeText":true,"setStrokeColor":true,"setFillColor":true,"strokeRect":true,"drawImage":true,"drawImageFromRect":true,"setShadow":true,"putImageData":true,"webkitPutImageDataHD":true,"createPattern":true,"createImageData":true,"getImageData":true,"webkitGetImageDataHD":true,"drawFocusIfNeeded":true}; 148 | 149 | 150 | for (var name in properties) { 151 | if (properties[name]) { 152 | ctx[name + '2'] = createFunction(name); 153 | } else { 154 | try { 155 | Object.defineProperty(ctx, name + '2', createGetSet(name)) 156 | } catch (error) { 157 | console.log(error); 158 | } 159 | } 160 | } 161 | //console.log(JSON.stringify(properties)) 162 | } 163 | 164 | 165 | var oldCanvg = canvg; 166 | canvg = function (target, s, opts) { 167 | if (!(typeof s == 'string')) { 168 | return; 169 | } 170 | images = null; 171 | caches = null; 172 | index = 0; 173 | var ctx = target.getContext('2d'); 174 | 175 | oldCanvg.apply(this, arguments); 176 | } 177 | 178 | var oldGetContext = HTMLCanvasElement.prototype.getContext; 179 | HTMLCanvasElement.prototype.getContext = function (name) { 180 | var result = oldGetContext.apply(this, arguments); 181 | if (name == '2d') { 182 | customCanvas(result, index > 0); 183 | } 184 | return result; 185 | } 186 | -------------------------------------------------------------------------------- /src/run.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | 3 | //var result = "foo baz".splice( 4, 0, "bar " ); 4 | // 5 | //alert(result); // "foo bar baz" 6 | 7 | var inFile = 'canvg_v2/canvg.js'; 8 | var insertFlag = "if (typeof CanvasRenderingContext2D != \'undefined\')";//version 2 9 | 10 | var outFile = 'canvg.js'; 11 | 12 | var js = fs.readFileSync(inFile, 'utf8'); 13 | 14 | 15 | function insertAfter(match, str) { 16 | var index = match.length + js.indexOf(match); 17 | var str1 = js.substring(0, index + 1); 18 | var str2 = js.substring(index + 1); 19 | 20 | js = str1 + str + '\n' + str2; 21 | } 22 | 23 | function insertBefor(match, str) { 24 | var index = js.indexOf(match); 25 | var str1 = js.substring(0, index); 26 | var str2 = js.substring(index); 27 | 28 | js = str1 + '\n' + str + '\n' + str2; 29 | 30 | } 31 | 32 | function replaceAll(str1, str2) { 33 | var pattern = new RegExp(str1.replace(".", "\\.").replace("(", "\\(").replace(")", "\\)").replace("\n", "\\\n").replace("\"", "\\\""), "g"); 34 | js = js.replace(pattern, str2); 35 | } 36 | 37 | insertBefor(insertFlag, fs.readFileSync('insert.code.js', 'utf8')); 38 | 39 | var properties = { 40 | "textBaseline": false, 41 | "textAlign": false, 42 | "font": false, 43 | "lineDashOffset": false, 44 | "miterLimit": false, 45 | "lineJoin": false, 46 | "lineCap": false, 47 | "lineWidth": false, 48 | "shadowColor": false, 49 | "shadowBlur": false, 50 | "shadowOffsetY": false, 51 | "shadowOffsetX": false, 52 | "fillStyle": false, 53 | "strokeStyle": false, 54 | "imageSmoothingEnabled": false, 55 | //"webkitImageSmoothingEnabled": false, 56 | "globalCompositeOperation": false, 57 | "globalAlpha": false, 58 | //"canvas": false, 59 | //"_changed": false, 60 | "save": true, 61 | "restore": true, 62 | "scale": true, 63 | "rotate": true, 64 | "translate": true, 65 | "transform": true, 66 | "setTransform": true, 67 | "resetTransform": true, 68 | "createLinearGradient": true, 69 | "createRadialGradient": true, 70 | "createPattern": true, 71 | "clearRect": true, 72 | "fillRect": true, 73 | "strokeRect": true, 74 | "beginPath": true, 75 | "fill": true, 76 | "stroke": true, 77 | "drawFocusIfNeeded": true, 78 | "clip": true, 79 | "isPointInPath": true, 80 | "isPointInStroke": true, 81 | "fillText": true, 82 | "strokeText": true, 83 | //"measureText": true, 84 | "drawImage": true, 85 | //"createImageData": true, 86 | //"getImageData": true, 87 | "putImageData": true, 88 | //"getContextAttributes": true, 89 | "setLineDash": true, 90 | "getLineDash": true, 91 | "closePath": true, 92 | "moveTo": true, 93 | "lineTo": true, 94 | "quadraticCurveTo": true, 95 | "bezierCurveTo": true, 96 | "arcTo": true, 97 | "rect": true, 98 | "arc": true, 99 | "ellipse": true, 100 | //"constructor": true, 101 | //"drawSvg": true 102 | }; 103 | 104 | 105 | for (var name in properties) { 106 | if (properties[name]) { 107 | replaceAll('ctx.' + name + '(', 'ctx.' + name + '2('); 108 | replaceAll('tempCtx.' + name + '(', 'tempCtx.' + name + '2('); 109 | } else { 110 | replaceAll('ctx.' + name, 'ctx.' + name + '2'); 111 | replaceAll('tempCtx.' + name, 'tempCtx.' + name + '2'); 112 | } 113 | } 114 | 115 | replaceAll('draw();', "code = '';\ndraw();\nif(window.onSVGDraw){\nonSVGDraw(\"{\\n draw: function(ctx){\\n\" + code + \"}\\n\\n}\", ctx.canvas);\n}"); 116 | replaceAll('global.canvgv2', 'global.canvg') 117 | 118 | /** 119 | * modified by sam@qunee.com 120 | * http://demo.qunee.com/svg2canvas 121 | */ 122 | js = "/**\n\ 123 | * modified by sam@qunee.com\n\ 124 | * http://demo.qunee.com/svg2canvas\n\ 125 | */" + js; 126 | fs.writeFileSync(outFile, js); 127 | -------------------------------------------------------------------------------- /svg/qunee_h5.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /svg/svg-logo.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------