Merge pull request #1145 from ecomfe/fix/svg/encodeBase64-compatibility

fix(svg): enhance SVG encodeBase64 compatibility

Author: Ovilia

src/svg/helper.ts

@@ -2,15 +2,14 @@
 
 import { MatrixArray } from '../core/matrix';
 import Transformable, { TransformProp } from '../core/Transformable';
-import { RADIAN_TO_DEGREE, retrieve2, logError, isFunction } from '../core/util';
+import { RADIAN_TO_DEGREE, retrieve2, logError } from '../core/util';
 import Displayable from '../graphic/Displayable';
 import { GradientObject } from '../graphic/Gradient';
 import { LinearGradientObject } from '../graphic/LinearGradient';
 import Path from '../graphic/Path';
 import { ImagePatternObject, PatternObject, SVGPatternObject } from '../graphic/Pattern';
 import { RadialGradientObject } from '../graphic/RadialGradient';
 import { parse } from '../tool/color';
-import env from '../core/env';
 
 const mathRound = Math.round;
 
@@ -173,14 +172,14 @@ export function getSRTTransformString(
 }
 
 export const encodeBase64 = (function () {
-    if (env.hasGlobalWindow && isFunction(window.btoa)) {
+    if (typeof Buffer !== 'undefined' && typeof Buffer.from === 'function') {
         return function (str: string) {
-            return window.btoa(unescape(encodeURIComponent(str)));
+            return Buffer.from(str).toString('base64');
         };
     }
-    if (typeof Buffer !== 'undefined') {
+    if (typeof btoa === 'function' && typeof unescape === 'function' && typeof encodeURIComponent === 'function') {
         return function (str: string) {
-            return Buffer.from(str).toString('base64');
+            return btoa(unescape(encodeURIComponent(str)));
         };
     }
     return function (str: string): string {

test/svg-ssr.html

@@ -268,6 +268,38 @@
     document.getElementById('main').innerHTML = svg;
     console.timeEnd('render');
 
+    // base64
+    console.log('window SSR base64:');
+    console.log(zr.painter.toDataURL(true));
+
+    // worker base64
+    const workerSource = `
+        importScripts('${location.origin}/dist/zrender.js')
+        const zr = zrender.init(null, {
+            renderer: 'svg',
+            ssr: true,
+            width: 1200,
+            height: 1200
+        });
+        const el = new zrender.Circle({
+            x: 50,
+            y: 50,
+            shape: {
+                cx: 0,
+                cy: 0,
+                r: 25
+            },
+            style: {
+                fill: 'red'
+            }
+        });
+        zr.add(el);
+        console.log('worker SSR base64:');
+        console.log(zr.painter.toDataURL(true));
+        zr.dispose();
+    `;
+    new Worker(URL.createObjectURL(new Blob([workerSource], { type: 'application/javascript' })));
+
     // var blob = new Blob([svg], { type: 'image/svg+xml' });
     // var a = document.createElement('a');
     // a.download = 'aaa.svg';