Merge pull request #14002 from apache/fix-export-dpr

fix(toolbox): use current device pixel ratio by default for exporting crisp and clear images.

src/component/toolbox/feature/SaveAsImage.ts

@@ -44,7 +44,6 @@ export interface ToolboxSaveAsImageFeatureOption extends ToolboxFeatureOption {
 class SaveAsImage extends ToolboxFeature<ToolboxSaveAsImageFeatureOption> {
 
     onclick(ecModel: GlobalModel, api: ExtensionAPI) {
-
         const model = this.model;
         const title = model.get('name') || ecModel.get('title.0.text') || 'echarts';
         const isSvg = api.getZr().painter.getType() === 'svg';
@@ -133,7 +132,8 @@ class SaveAsImage extends ToolboxFeature<ToolboxSaveAsImageFeatureOption> {
             connectedBackgroundColor: '#fff',
             name: '',
             excludeComponents: ['toolbox'],
-            pixelRatio: 1,
+            // use current pixel ratio of device by default
+            // pixelRatio: 1,
             lang: ecModel.getLocale(['toolbox', 'saveAsImage', 'lang'])
         };
 

src/core/echarts.ts

@@ -653,7 +653,7 @@ class ECharts extends Eventful {
             return;
         }
         opts = zrUtil.extend({}, opts || {});
-        opts.pixelRatio = opts.pixelRatio || 1;
+        opts.pixelRatio = opts.pixelRatio || this.getDevicePixelRatio();
         opts.backgroundColor = opts.backgroundColor
             || this._model.get('backgroundColor');
         const zr = this._zr;
@@ -755,7 +755,7 @@ class ECharts extends Eventful {
             let right = -MAX_NUMBER;
             let bottom = -MAX_NUMBER;
             const canvasList: {dom: HTMLCanvasElement | string, left: number, top: number}[] = [];
-            const dpr = (opts && opts.pixelRatio) || 1;
+            const dpr = (opts && opts.pixelRatio) || this.getDevicePixelRatio();
 
             zrUtil.each(instances, function (chart, id) {
                 if (chart.group === groupId) {