保存图片demo

src/views/chartETA/ChartDetail.vue

@@ -20,6 +20,8 @@ const route=useRoute()
 //获取图详情
 let chartInfoData=null
 let chartInfo=ref(null)
+//highchart图表
+let highChart = ref(null)
 let edbList=ref([])//指标数据
 async function getChartDetail(e){
     const params=sameOptionType.includes(Number(route.query.chartType))?{
@@ -48,7 +50,7 @@ async function getChartDetail(e){
     }
 
     nextTick(()=>{
-        chartRender({
+        highChart.value = chartRender({
             data:{
                 ...res.Data,
                 ChartInfo:{
@@ -186,7 +188,7 @@ function handleConfirmLimitChange(){
         }
     }
 
-    chartRender({
+    highChart.value = chartRender({
         data:data,
         renderId:'chart-box',
         lang:'zh',
@@ -334,8 +336,45 @@ function saveOther(ClassifyId){
         isShowSaveOtherDialog.value = false
     })
 }
+let savePicDialogShow = ref(false)
+let savePicSrc = ref('')
 //保存图片
-function saveChartPic(){}
+function saveChartPic(){
+    console.log('chart',highChart.value)
+    const {chartWidth,chartHeight} = highChart.value
+    
+    /* const svgData = highChart.value.getSVG({
+        chart: {
+            width: chartWidth,
+            height: chartHeight,
+        }
+    })
+    let base64Url = 'data:image/svg+xml;charset=utf-8,'+encodeURIComponent(svgData)
+    let link = document.createElement('a')
+    link.href = base64Url
+    link.download = `test.svg`
+    link.click() */
+    //打开保存图片弹窗
+    const svgData = highChart.value.getSVG({
+        chart: {
+            width: chartWidth,
+            height: chartHeight,
+        }
+    })
+    //savePicSrc.value = 'data:image/svg+xml;charset=utf-8,'+encodeURIComponent(svgData)
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d')
+    canvas.width = chartWidth*2
+    canvas.height = chartHeight*2
+    const image = new Image()
+    image.src = 'data:image/svg+xml;charset=utf-8,'+encodeURIComponent(svgData)
+    image.onload = ()=>{
+        ctx.drawImage(image, 0, 0,chartWidth*2,chartHeight*2);
+        savePicSrc.value = canvas.toDataURL('image/png');
+        savePicDialogShow.value = true
+    }
+
+}
 //跳转设置英文页面
 function goSetChartEnName(){}
 
@@ -344,7 +383,6 @@ let isShowAddToMyETADialog = ref(false)
 function openAddToMyETADialog(){
     isShowAddToMyETADialog.value = true
 }
-function addToMyETA(){}
 //删除图表
 function deleteChart(){}
 
@@ -634,10 +672,17 @@ function deleteChart(){}
             :chartInfo="chartInfo"
             @close="isShowAddToMyETADialog=false"
         />
+        <!--保存图片弹窗 -->
+        <van-popup 
+            v-model:show="savePicDialogShow"
+            position="center"
+            round
+            closeable
+            :style="{width:'400px'}"
+        >
+            <img :src="savePicSrc" alt="" :style="{width:'100%'}">
+        </van-popup>
     </div>
-
-
-   
 </template>
 
 <style lang="scss">