fix(extension): base64导出支持画布局部渲染时导出&修复相对路径图片导出问题&补充文档#2114
fix(extension): base64导出支持画布局部渲染时导出&修复相对路径图片导出问题&补充文档#2114boyongjiong merged 3 commits intomasterfrom
Conversation
|
… 优化snapshot文档和demo
DymoneLewis
changed the title
| y: 100, | ||
| text: '菱形', | ||
| }, | ||
| { |
There was a problem hiding this comment.
新增了一个展示上面所示的项目路径下图片的节点
| } | ||
|
|
||
| export default { | ||
| class TestImageModel extends RectNodeModel { |
| } | ||
| lfRef.current | ||
| .getSnapshotBlob(backgroundColor, fileType) | ||
| .getSnapshotBlob(backgroundColor, fileType, params) |
There was a problem hiding this comment.
导出blob支持传入ToImageOptions
| 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( |
| <> | ||
| <h2>blobData</h2> | ||
| <img key="blob" src={blobData} /> | ||
| <img style={{ width: '100%' }} key="blob" src={blobData} /> |
There was a problem hiding this comment.
之前父元素比较窄，导出图片小的时候图挤成一团，图片大的时候又得左右滚动页面看，交互太难受了所以就调整了一下布局
| /* 获取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后，三个导出方法有一段实现逻辑高度相似，所以就提成了这个通用方法
| --- | ||
|
|
||
| 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.
根据中文直接翻译的，要传递的信息和中文相同，可以直接看中文文档
2 participants
fix #1872