fix(extension): base64导出支持画布局部渲染时导出&修复相对路径图片导出问题&补充文档

examples/feature-examples/src/pages/extensions/snapshot/data.ts

@@ -38,6 +38,16 @@ export default {
       y: 100,
       text: '菱形',
     },
+    {
+      id: 'test_image_1',
+      type: 'test-image',
+      x: 300,
+      y: 200,
+      properties: {
+        width: 82,
+        height: 96,
+      },
+    },
   ],
   edges: [
     {

examples/feature-examples/src/pages/extensions/snapshot/imageNode.ts

@@ -28,8 +28,43 @@ class ImageNode extends RectNode {
   }
 }
 
-export default {
+class TestImageModel extends RectNodeModel {
+  initNodeData(data: any) {
+    super.initNodeData(data)
+    this.width = 100
+    this.height = 75
+  }
+}
+
+class TestImageNode extends RectNode {
+  getImageHref() {
+    return '/images/test.jpeg'
+  }
+  getShape() {
+    const { x, y, width, height } = this.props.model
+    const href = this.getImageHref()
+    const attrs = {
+      x: x - (1 / 2) * width,
+      y: y - (1 / 2) * height,
+      width,
+      height,
+      href,
+      preserveAspectRatio: 'none meet',
+    }
+    return h('g', {}, [h('image', { ...attrs })])
+  }
+}
+
+const defaultImageNode = {
   type: 'image',
   view: ImageNode,
   model: ImageModel,
 }
+
+export const testImage = {
+  type: 'test-image',
+  view: TestImageNode,
+  model: TestImageModel,
+}
+
+export default defaultImageNode

examples/feature-examples/src/pages/extensions/snapshot/index.tsx

@@ -15,8 +15,8 @@ import {
   InputNumber,
   Switch,
 } from 'antd'
-import ImageNode from './imageNode'
 import CustomHtml from '@/components/nodes/custom-html/Html'
+import ImageNode, { testImage } from './imageNode'
 import data from './data'
 import { circle as circleSvgUrl, rect as rectSvgUrl } from './svg'
 
@@ -89,6 +89,7 @@ export default function SnapshotExample() {
       })
       lf.register(CustomHtml)
       lf.register(ImageNode)
+      lf.register(testImage)
 
       lf.setPatternItems([
         {
@@ -103,6 +104,12 @@ export default function SnapshotExample() {
           text: 'circle',
           icon: rectSvgUrl,
         },
+        {
+          type: 'test-image',
+          label: 'Test Image',
+          text: 'Test Image',
+          icon: rectSvgUrl,
+        },
       ])
 
       lf.on('custom:button-click', (model: any) => {
@@ -156,9 +163,18 @@ export default function SnapshotExample() {
   // 预览 blob
   const previewBlob = () => {
     if (lfRef.current) {
-      setBase64Data('')
+      setBlobData('')
+      const params: ToImageOptions = {
+        fileType,
+        backgroundColor,
+        partial,
+        width,
+        height,
+        padding,
+        quality,
+      }
       lfRef.current
-        .getSnapshotBlob(backgroundColor, fileType)
+        .getSnapshotBlob(backgroundColor, fileType, params)
         .then(
           ({
             data,
@@ -177,25 +193,25 @@ export default function SnapshotExample() {
   }
 
   // 预览 base64
-  const previewBase64 = () => {
+  const previewBase64 = async () => {
     if (lfRef.current) {
-      setBlobData('')
-      lfRef.current
-        .getSnapshotBase64(backgroundColor)
-        .then(
-          ({
-            data,
-            width,
-            height,
-          }: {
-            data: string
-            width: number
-            height: number
-          }) => {
-            setBase64Data(data)
-            console.log('width, height ', width, height)
-          },
-        )
+      setBase64Data('')
+      const params: ToImageOptions = {
+        fileType,
+        backgroundColor,
+        partial,
+        width,
+        height,
+        padding,
+        quality,
+      }
+      const result = await lfRef.current.getSnapshotBase64(
+        'white',
+        'png',
+        params,
+      )
+      setBase64Data(result.data)
+      console.log('width, height ', result)
     }
   }
 
@@ -303,17 +319,17 @@ export default function SnapshotExample() {
         <div ref={containerRef} className="graph"></div>
       </Flex>
       <Row>
-        <Col span={12}>
+        <Col span={24}>
           {blobData && (
             <>
               <h2>blobData</h2>
-              <img key="blob" src={blobData} />
+              <img style={{ width: '100%' }} key="blob" src={blobData} />
             </>
           )}
           {base64Data && (
             <>
               <h2>base64Data</h2>
-              <img key="base64" src={base64Data} />
+              <img style={{ width: '100%' }} key="base64" src={base64Data} />
             </>
           )}
         </Col>

packages/extension/src/style/raw.ts

@@ -193,6 +193,10 @@ export const content = `@import url('medium-editor/dist/css/medium-editor.min.cs
   background: #eaedf2;
   border: 1px solid #93a3b4;
 }
+.lf-mini-map .lf-graph {
+  width: 100% !important;
+  height: 100% !important;
+}
 .lf-mini-map-graph {
   position: relative;
   overflow: hidden;