改回div渲染

packages/canvas/src/canvas.vue

@@ -99,11 +99,22 @@ export default {
         }
       }
 
+      if (data.bg) {
+        const card = new Card({
+          x: 0,
+          y: 0,
+          width: data.w,
+          height: data.h,
+          bgImg: data.bg,
+        })
+        card.draw(ctx)
+      }
+
       if (child) {
         const drawList = [...child]
         drawList.sort(handle('z'))
         drawList.forEach(item => {
-          const { x, y, w, h, bg, deg } = item
+          const { x, y, w, h, bg, deg, t } = item
           const card = new Card({
             x,
             y,
@@ -111,6 +122,7 @@ export default {
             height: h,
             bgImg: bg,
             deg,
+            type: t,
           })
           card.draw(ctx)
         })
@@ -126,17 +138,34 @@ export default {
       }
       return data
     },
+    // 导出图片
+    getImage() {
+      const canvas = this.$refs.canvas
+      const imageData = canvas.toDataURL('image/png') // 返回base64的URL
+      const elink = document.createElement('a')
+      elink.download = '图片'
+      elink.style.display = 'none'
+      elink.href = imageData
+      document.body.appendChild(elink)
+      elink.click()
+      URL.revokeObjectURL(elink.href) // 释放URL对象
+
+      // this.$Screenshot(document.querySelector('#wrapper')).then(canvas => {
+      //   this.downFile(canvas.toDataURL('image/jpeg', 0.8), new Date().getTime())
+      //   this.$message.success('图片导出成功')
+      // })
+    },
   },
 }
 
 function Card(params) {
-  const { x, y, width, height, bgImg, deg } = params
-  console.log('params', params)
+  const { x, y, width, height, bgImg, deg, type } = params
   this.x = x // x 坐标
   this.y = y // y 坐标
   this.width = width // 宽度
   this.height = height // 高度
   this.bgImg = bgImg // 图片路径
+  this.type = type // 类型，i：图片, p：手机, sp：侧面手机, va：可视区域
 
   // this.draw = function(ctx) {
   //   ctx.fillStyle = 'red'
@@ -152,6 +181,8 @@ function Card(params) {
 
   this.draw = function(ctx) {
     const img = new Image()
+    // img.setAttribute('crossOrigin', 'anonymous') // 设置跨域属性
+    img.crossOrigin = 'anonymous'
     img.src = this.bgImg
 
     img.onload = () => {
@@ -172,11 +203,17 @@ function Card(params) {
       ctx.translate(centerX, centerY)
       ctx.rotate(Math.PI * (deg / 180))
       ctx.translate(-centerX, -centerY)
+      if (this.type === 'va') {
+        // ctx.globalCompositeOperation = 'destination-in'
+      } else {
+        ctx.globalCompositeOperation = 'source-over'
+      }
+
       ctx.drawImage(img, 0, 0, img.width, img.height, x, y, width, height)
       ctx.translate(centerX, centerY)
       ctx.rotate(Math.PI * (-deg / 180))
       ctx.translate(-centerX, -centerY)
-      console.log('渲染图片-')
+      console.log('渲染图片', params)
     }
   }
 }

packages/canvas/src/card-options.vue

@@ -123,8 +123,8 @@ export default {
     move(event) {
       const { data } = this
       const { x, y, } = data
-      const dataX = x
-      const dataY = y
+      const dataX = x * 1
+      const dataY = y * 1
       const odiv = event.target // 获取目标元素
       const diff = -4 // diff是card组件，操作区域距离图层的距离
 

packages/canvas/src/card.vue

@@ -17,8 +17,8 @@
       @test="(point) => $emit('test', point)"
     />
     <div style="width: 100%; height: 100%;">
-      <!-- <span v-if="!data.bg">{{ data.n }}</span>
-      <div v-if="data.bg" :style="`background-image:url(${data.bg})`" alt="" class="bg"/> -->
+      <span v-if="!data.bg">{{ data.n }}</span>
+      <div v-if="data.bg" :style="`background-image:url(${data.bg})`" alt="" class="bg"/>
     </div>
   </div>
 </template>

packages/canvas/src/index.vue

@@ -20,7 +20,7 @@
       <!-- 测试div -->
       <div :style="testStyle" class="testPoint"/>
     </div>
-    <Canvas ref="canvas" :value="data" class="canvas" />
+    <!-- <Canvas ref="canvas" :value="data" class="canvas" /> -->
   </div>
 </template>
 
@@ -139,20 +139,21 @@ export default {
       }
       this.$emit('on-change', { data: this.data, index })
       this.$nextTick(() => {
-        this.$refs.canvas.draw()
+        this.$refs.canvas?.draw()
       })
     },
     deleteCard(index) {
       this.data.child.splice(index, 1)
       this.$emit('on-change', { data: this.data, index: '' })
-      this.$refs.canvas.draw()
+      this.$refs.canvas?.draw()
     },
     // 导出图片
-    exportImg() {
+    getImage() {
       // this.$Screenshot(document.querySelector('#wrapper')).then(canvas => {
-      //   this.downFile(canvas.toDataURL('image/jpeg', 0.8), new Date().getTime());
+      //   this.downFile(canvas.toDataURL('image/jpeg', 0.8), new Date().getTime())
       //   this.$message.success('图片导出成功')
       // })
+      this.$refs.canvas?.getImage()
     },
     // 定位到某个图层
     selectIndex(index) {
@@ -170,7 +171,7 @@ export default {
         onChangeCard: () => {
           const { activeIndex, data } = this
           this.$emit('on-change', { data, index: activeIndex }) // 选中的索引切换的时候，触发回调
-          this.$refs.canvas.draw()
+          this.$refs.canvas?.draw()
         },
         test: (point) => {
           this.testPoint = point