pref(仪表板): 优化截图工具视图导出图片优化

core/frontend/package.json

@@ -47,6 +47,7 @@
     "file-saver": "^2.0.5",
     "fit2cloud-ui": "^1.8.0",
     "flv.js": "^1.6.2",
+    "html-to-image": "^1.11.11",
     "html2canvasde": "^v1.1.4-de",
     "jquery": "^3.1.1",
     "js-base64": "^3.7.2",

core/frontend/src/components/canvas/customComponent/UserViewDialog.vue

@@ -95,7 +95,7 @@ import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
 import html2canvas from 'html2canvasde'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
-import { deepCopy, exportExcelDownload, exportImg, imgUrlTrans } from '@/components/canvas/utils/utils'
+import {deepCopy, exportExcelDownload, exportImg, exportImgNew, imgUrlTrans} from '@/components/canvas/utils/utils'
 import { activeWatermark } from '@/components/canvas/tools/watermark'
 import { proxyUserLoginInfo, userLoginInfo } from '@/api/systemInfo/userLogin'
 
@@ -303,7 +303,7 @@ export default {
         this.resizeChart()
         setTimeout(() => {
           this.initWatermark()
-          exportImg(this.chart.name, (params) => {
+          exportImgNew(this.chart.name, (params) => {
             this.exporting = false
             this.resizeChart()
             setTimeout(() => {

core/frontend/src/components/canvas/utils/utils.js

@@ -14,6 +14,7 @@ import xssCheck from 'xss'
 import Vue from 'vue'
 import { exportDetails, innerExportDetails } from '@/api/panel/panel'
 import { getLinkToken, getToken } from '@/utils/auth'
+import { toPngUrl } from '@/utils/CanvasUtils'
 
 export function deepCopy(target) {
   if (typeof target === 'object' && target !== null) {
@@ -254,6 +255,29 @@ export function exportImg(imgName, callback) {
   })
 }
 
+export function exportImgNew(imgName, callback) {
+  const canvasID = document.getElementById('chartCanvas')
+  // 保存原始的设备像素比值
+  const originalDPR = window.devicePixelRatio
+  // 将设备像素比设置为1
+  window.devicePixelRatio = 1
+  toPngUrl(canvasID, (pngUrl) => {
+    try {
+      const a = document.createElement('a')
+      a.setAttribute('download', imgName + '.png')
+      a.href = pngUrl
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      window.devicePixelRatio = originalDPR
+      callback()
+    } catch (e) {
+      window.devicePixelRatio = originalDPR
+      callback()
+    }
+  })
+}
+
 export function dataURLToBlob(dataurl) { // ie 图片转格式
   const arr = dataurl.split(',')
   const mime = arr[0].match(/:(.*?);/)[1]

core/frontend/src/utils/CanvasUtils.js

@@ -0,0 +1,11 @@
+import { toPng } from 'html-to-image'
+
+export function toPngUrl(refContainer, callBack) {
+  toPng(refContainer)
+    .then(dataUrl => {
+      callBack(dataUrl)
+    })
+    .catch(error => {
+      console.error('oops, toPngUrl went wrong!', error)
+    })
+}