fix(extension): base64导出支持画布局部渲染时导出&修复相对路径图片导出问题&补充文档 #2114
Conversation
|
… 优化snapshot文档和demo
DymoneLewis
changed the title
| @@ -38,6 +38,16 @@ export default { | |||
| y: 100, | |||
| text: '菱形', | |||
| }, | |||
| { | |||
There was a problem hiding this comment.
新增了一个展示上面所示的项目路径下图片的节点
| @@ -28,8 +28,43 @@ class ImageNode extends RectNode { | |||
| } | |||
| } | |||
|
|
|||
| export default { | |||
| class TestImageModel extends RectNodeModel { | |||
| lfRef.current | ||
| .getSnapshotBlob(backgroundColor, fileType) | ||
| .getSnapshotBlob(backgroundColor, fileType, params) |
There was a problem hiding this comment.
导出blob支持传入ToImageOptions
| @@ -156,9 +163,18 @@ export default function SnapshotExample() { | |||
| // 预览 blob | |||
| const previewBlob = () => { | |||
| if (lfRef.current) { | |||
| setBase64Data('') | |||
| setBlobData('') | |||
There was a problem hiding this comment.
这里setBase64改成setBlob主要是觉得base64的图片和blob的图片展示并不互斥，所以这里改成了setBlobData，在赋值前重置一下
There was a problem hiding this comment.
🤔这么一看感觉好像能删了，毕竟下面会直接赋值
| padding, | ||
| quality, | ||
| } | ||
| const result = await lfRef.current.getSnapshotBase64( |
| {blobData && ( | ||
| <> | ||
| <h2>blobData</h2> | ||
| <img key="blob" src={blobData} /> | ||
| <img style={{ width: '100%' }} key="blob" src={blobData} /> |
There was a problem hiding this comment.
之前父元素比较窄，导出图片小的时候图挤成一团，图片大的时候又得左右滚动页面看，交互太难受了所以就调整了一下布局
| @@ -70,14 +70,18 @@ export class Snapshot { | |||
| ) => await this.getSnapshot(fileName, toImageOptions) | |||
|
|
|||
| /* 获取Blob对象 */ | |||
| lf.getSnapshotBlob = async (backgroundColor?: string, fileType?: string) => | |||
| await this.getSnapshotBlob(backgroundColor, fileType) | |||
| lf.getSnapshotBlob = async ( | |||
There was a problem hiding this comment.
这个文件里都是CR重头戏
| // 计算实际宽高，考虑缩放因素 | ||
| // 在宽画布情况下，getBoundingClientRect可能无法获取到所有元素的边界 | ||
| // 因此我们添加一个安全系数来确保能够容纳所有元素 | ||
| const safetyFactor = 1.1 // 安全系数，增加20%的空间 |
There was a problem hiding this comment.
导出宽宽的图时，会出现最左边元素的边框被从中竖向截断的问题，所以这里加了这个安全系数，用于下面计算导出画布的宽高（一开始是1.2，看起来太大了，所以改成了1.1
| this.removeRotateControl(element.firstChild!) | ||
| }) | ||
| } | ||
| private async withExportPreparation<T>( |
There was a problem hiding this comment.
在snapshotBase64和snapshotBlob支持toImageOptions后，三个导出方法有一段实现逻辑高度相似，所以就提成了这个通用方法
| @@ -9,151 +9,243 @@ toc: content | |||
| tag: Optimization | |||
| --- | |||
|
|
|||
| We often need to export the canvas content as an image. We provide an independent plug-in package `Snapshot` to use this function. | |||
| We often need to export the canvas content as an image. LogicFlow provides an independent plug-in package `Snapshot` to support exporting the canvas as an image. | |||
There was a problem hiding this comment.
根据中文直接翻译的，要传递的信息和中文相同，可以直接看中文文档
fix #1872