导出图片

README.md

@@ -9,6 +9,34 @@ Vue.use(RuituMagicCanvas)
 页面使用
 <CyCanvas ref="canvas" v-model="data" @on-change="onChange"/>
 
+props:
+  show: 是否显示组件, true|false
+  data: 数据对象，
+    {
+      // 画布参数
+      w: 1024, // 画布大小，宽度，单位px
+      h: 1920, // 画布大小，高度，单位px
+      bc: '', // 画布背景颜色
+      bg: '', // 画布背景图片，如果设置了图片，颜色属性（bc）无效
+
+      // 图层信息
+      child: [
+        { // 图层对象参数
+          t: '', // type，(i：图片, p：手机, sp：侧面手机, va：可视区域)
+          w: 100, // 单位px
+          h: 100, // 单位px
+          x: 0, // 坐标
+          y: 0, // 坐标
+          z: 1, // 层级
+          o: 1, // 透明度
+          bg: '', // 背景图
+          deg: 0, // 旋转角度
+          mbg: '', // 遮罩图片
+          bbg: '', // 顶部图片
+        }
+      ],
+    }
+
 methods
   setCardData(data, index)
     设置图层信息

packages/canvas/src/index.vue

 <template>
   <div class="layout">
     <div
+      ref="main"
       :style="styles"
       class="div-content"
       @click="handler().clickCanvas()">
@@ -27,6 +28,7 @@
 <script>
 import Canvas from './canvas'
 import Card from './card'
+import html2canvas from 'html2canvas'
 export default {
   name: 'CyCanvas',
   components: {
@@ -39,7 +41,12 @@ export default {
       default: () => {
         return {}
       },
-    }
+    },
+    // 是否显示组件
+    show: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -156,6 +163,22 @@ export default {
       //   this.$message.success('图片导出成功')
       // })
       // this.$refs.canvas?.getImage()
+
+      // #capture 就是我们要获取截图对应的 DOM 元素选择器
+      html2canvas(this.$refs.main, {
+        useCORS: true, // 【重要】开启跨域配置
+        scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,
+        allowTaint: true, // 允许跨域图片
+      }).then((canvas) => {
+        const imgData = canvas.toDataURL('image/jpeg', 1.0)
+        const elink = document.createElement('a')
+        elink.download = '图片'
+        elink.style.display = 'none'
+        elink.href = imgData
+        document.body.appendChild(elink)
+        elink.click()
+        URL.revokeObjectURL(elink.href) // 释放URL对象
+      })
     },
     // 定位到某个图层
     selectIndex(index) {