修改配置

.gitignore

+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# package-lock.json
+package-lock.json
+
+# editor
+.idea

README.md

@@ -7,4 +7,27 @@ import RuituMagicCanvas from 'ruitu-magic-canvas'
 Vue.use(RuituMagicCanvas)
 
 页面使用
+<CyCanvas ref="canvas" v-model="data" @on-change="onChange"/>
+
+methods
+  setCardData(data, index)
+    设置图层信息
+    data:图层对象数据
+    index:画布索引，如果传空字符串''，则表示新增图层
+
+  deleteCard(index)
+    删除图层
+    index：图层
+
+  getImage()
+    导出图片
+  
+  selectIndex(index)
+    定位到某个图层，定位的图层会显示托转区域
+    index：图层索引
+
+Events
+  on-change
+    说明：图层索引改变，或者图层内容改变的时候会触发
+    回调参数：{ index, data }，index：图层索引，data：对应图层对象
 

package.json

@@ -14,5 +14,8 @@
     "瑞图魔术手画布组件"
   ],
   "author": "毛线",
-  "license": "ISC"
+  "license": "ISC",
+  "dependencies": {
+    "html2canvas": "^1.4.1"
+  }
 }

packages/canvas/src/card.vue

@@ -18,7 +18,7 @@
     />
     <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"/>
+      <div v-if="data.bg" :style="bgStyle" alt="" class="bg"/>
       <div v-if="data.bbg" :style="`background-image:url(${data.bbg})`" alt="" class="bg bbg"/>
       <div v-if="data.tbg" :style="`background-image:url(${data.tbg})`" alt="" class="bg tbg"/>
     </div>
@@ -78,6 +78,19 @@ export default {
       styles.opacity = o
       return styles
     },
+    bgStyle() {
+      const { data } = this
+      const { bbg } = data
+      const styles = {}
+      styles.backgroundImage = `url(${data.bg})`
+      if (bbg) {
+        console.log('bbg', bbg)
+        styles.maskImage = `url('${bbg}')`
+        styles.maskRepeat = `no-repeat`
+        styles.maskSize = `100%`
+      }
+      return styles
+    },
   },
   watch: {
     value(value) {

packages/canvas/src/index.vue

@@ -45,8 +45,10 @@ export default {
     return {
       data: {
         // 画布参数
-        w: 1024, // 单位px
-        h: 1920, // 单位px
+        w: 1024, // 画布大小，宽度，单位px
+        h: 1920, // 画布大小，高度，单位px
+        bc: '', // 画布背景颜色
+        bg: '', // 画布背景图片，如果设置了图片，颜色属性（bc）无效
         // 卡片信息
         child: [],
       },
@@ -62,8 +64,8 @@ export default {
       const { data } = this
       const { bg, w, h, bc, } = data
       const styles = {}
-      // styles.backgroundColor = bc || 'transparent'
-      // bg && (styles.backgroundImage = `url(${bg})`)
+      styles.backgroundColor = bc || 'transparent'
+      bg && (styles.backgroundImage = `url(${bg})`)
       styles.width = `${w}px` || '500px'
       styles.height = `${h}px` || '500px'
       return styles
@@ -153,7 +155,7 @@ export default {
       //   this.downFile(canvas.toDataURL('image/jpeg', 0.8), new Date().getTime())
       //   this.$message.success('图片导出成功')
       // })
-      this.$refs.canvas?.getImage()
+      // this.$refs.canvas?.getImage()
     },
     // 定位到某个图层
     selectIndex(index) {