leafer-ui clip 导出和阴影的问题

leafer版本：1.7 浏览器：Chrome 137.0.7151.104

问题： 1、存在 shadow 时，clip裁剪不正确，裁剪导出的照片也没阴影 2、当执行到 flowBox1.add(img) 这行代码后，box1 中的图片阴影消失 3、注释 flowBox1.add(img) ，fÏlowBox2.add(img) 这两行代码后， box1 阴影才显示正常，但只要移动一下画布，阴影即刻消失 4、注释所有 export 阴影才显示正常

代码： ` import { Box, App, version, Platform, Image, ImageEvent, Rect, Text, } from 'leafer-ui'

import '@leafer-in/editor' import '@leafer-in/viewport' import '@leafer-in/flow' import '@leafer-in/export' import '@leafer-in/resize' import '@leafer-in/state' import '@leafer-in/text-editor' import { Flow } from '@leafer-in/flow'

console.log(version) window.onload = () => { const leafer = new App({ view: window, usePartRender: true, pointer: { preventDefault: false, preventDefaultMenu: true, }, fill: 'gray', touch: { preventDefault: true, },

tree: { type: 'design' },

})

const image1 = new Image({ width: 886, height: 590.5,

url: 'https://images.unsplash.com/photo-1748367959778-12d026a20a99?q=80&w=1771&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
shadow: {
  // 删除阴影， clip 效果正常
  x: 10,
  y: 10,
  //spread:30,
  blur: 100,
  color: '#000',
},

})

const box1 = new Box({ flow: true, padding: 200, fill: 'white', children: [image1], })

const image2 = new Image({ width: 886, height: 590.5,

url: 'https://images.unsplash.com/photo-1748367959778-12d026a20a99?q=80&w=1771&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
// shadow: { // 删除阴影， clip 效果正常
// x: 10,
// y: 10,
// //spread:30,
// blur: 100,
// color: '#000',
// },

})

const box2 = new Box({ flow: true, padding: 200, fill: 'white',

children: [image2],

})

const flowBox1 = new Flow({ flowWrap: true, gap: 100 }) const flowBox2 = new Flow({ flowWrap: true, gap: 100 }) const flowContainer = new Flow({ gap: 100, padding: 100, overflow: 'show' }) const text = new Text({ text: '右边没有阴影，裁剪正常，\n但将导出的照片\n重新new 一个 image 放到画布中\n 左边的image阴影会消失，', fontSize: 500, }) flowContainer.addMany(box1, flowBox1, text, box2, flowBox2) leafer.tree.addMany(flowContainer)

image1.on(ImageEvent.LOADED, () => { const scale = 4096 / 886 image1.scale = scale leafer.tree.scale = 0.1

const bounds = box1.getBounds('content', 'local')

flowBox1.width = bounds.width + 100 * 2
flowBox1.height = bounds.height + 100 * 2

const w = bounds.width / 3
const h = bounds.height / 3
const chunks = Array.from({ length: 9 }, (_, i) => ({
  x: (i % 3) * w,
  y: Math.floor(i / 3) * h,
}))

console.log('bounds', bounds, 'chunks', chunks)

setTimeout(() => {
  for (const chunk of chunks) {
    box1
      .export('jpg', {
        blob: true,
        clip: {
          x: chunk.x,
          y: chunk.y,
          width: w,
          height: h,
        },

        relative: 'local',
      })
      .then((ret) => {
        if (ret.data) {
          fetch(URL.createObjectURL(ret.data))

          //注释下面代码块（image2 LOADED事件中添加的 image 代码也要同时注释）， 原阴影才显示正常， 但只要移动一下画布，阴影即刻消失
          const img = new Image({
            url: URL.createObjectURL(ret.data),
            width: w,
            height: h,
          })
          flowBox1.add(img)
        }
      })
  }
}, 1000)

})

image2.on(ImageEvent.LOADED, () => { const scale = 4096 / 886 image2.scale = scale leafer.tree.scale = 0.1

const bounds = box2.getBounds('stroke', 'local')

flowBox2.width = bounds.width + 100 * 2
flowBox2.height = bounds.height + 100 * 2

const w = bounds.width / 3
const h = bounds.height / 3
const chunks = Array.from({ length: 9 }, (_, i) => ({
  x: (i % 3) * w,
  y: Math.floor(i / 3) * h,
}))

console.log('bounds', bounds, 'chunks', chunks)

setTimeout(() => {
  for (const chunk of chunks) {
    box2
      .export('jpg', {
        blob: true,
        clip: {
          x: chunk.x,
          y: chunk.y,
          width: w,
          height: h,
        },

        relative: 'local',
      })
      .then((ret) => {
        if (ret.data) {
          // fetch(URL.createObjectURL(ret.data))
          //注释下面代码块（image1 LOADED事件中添加的 image 代码也要同时注释）， 原阴影才显示正常，但只要移动一下画布，阴影即刻消失
          const img = new Image({
            url: URL.createObjectURL(ret.data),
            width: w,
            height: h,
          })
          flowBox2.add(img)
        }
      })
  }
}, 1000)

}) }

`

Jun 27 '25 09:06 mozbia

收到，谢谢反馈～

Jun 28 '25 00:06 leaferjs

问题已修复，等待新版本发布～

Jun 29 '25 11:06 leaferjs

好的好的幸苦大佬

Jun 29 '25 12:06 mozbia

大佬，阴影有了，但是裁剪位置不正确哦，如上图（请忽略图中文字）。 leafer 版本 1.8.

`import { Box, App, version, Platform, Image, ImageEvent, Rect, Text, } from 'leafer-ui'

import '@leafer-in/editor' import '@leafer-in/viewport' import '@leafer-in/flow' import '@leafer-in/export' import '@leafer-in/resize' import '@leafer-in/state' import '@leafer-in/text-editor' import { Flow } from '@leafer-in/flow'

console.log(version) window.onload = () => { const leafer = new App({ view: window, usePartRender: true, pointer: { preventDefault: false, preventDefaultMenu: true, }, fill: 'gray', touch: { preventDefault: true, },

tree: { type: 'design' },

})

const image1 = new Image({ width: 886, height: 590.5,

url: 'https://images.unsplash.com/photo-1748367959778-12d026a20a99?q=80&w=1771&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
shadow: {
  // 删除阴影， clip 效果正常
  x: 10,
  y: 10,
  //spread:30,
  blur: 100,
  color: '#000',
},

})

const box1 = new Box({ flow: true, padding: 200, fill: 'white', children: [image1], })

const image2 = new Image({ width: 886, height: 590.5,

url: 'https://images.unsplash.com/photo-1748367959778-12d026a20a99?q=80&w=1771&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
// shadow: { // 删除阴影， clip 效果正常
// x: 10,
// y: 10,
// //spread:30,
// blur: 100,
// color: '#000',
// },

})

const box2 = new Box({ flow: true, padding: 200, fill: 'white',

children: [image2],

})

const flowBox1 = new Flow({ flowWrap: true, gap: 100 }) const flowBox2 = new Flow({ flowWrap: true, gap: 100 }) const flowContainer = new Flow({ gap: 100, padding: 100, overflow: 'show' }) const text = new Text({ text: '右边没有阴影，裁剪正常，\n但将导出的照片\n重新new 一个 image 放到画布中\n 左边的image阴影会消失，', fontSize: 500, }) flowContainer.addMany(box1, flowBox1, text, box2, flowBox2) leafer.tree.addMany(flowContainer)

image1.on(ImageEvent.LOADED, () => { const scale = 4096 / 886 image1.scale = scale leafer.tree.scale = 0.1

const bounds = box1.getBounds('content', 'local')

flowBox1.width = bounds.width + 100 * 2
flowBox1.height = bounds.height + 100 * 2

const w = bounds.width / 3
const h = bounds.height / 3
const chunks = Array.from({ length: 9 }, (_, i) => ({
  x: (i % 3) * w,
  y: Math.floor(i / 3) * h,
}))

console.log('bounds', bounds, 'chunks', chunks)

setTimeout(() => {
  for (const chunk of chunks) {
    box1
      .export('jpg', {
        blob: true,
        clip: {
          x: chunk.x,
          y: chunk.y,
          width: w,
          height: h,
        },

        relative: 'local',
      })
      .then((ret) => {
        if (ret.data) {
          fetch(URL.createObjectURL(ret.data))

          //注释下面代码块（image2 LOADED事件中添加的 image 代码也要同时注释）， 原阴影才显示正常， 但只要移动一下画布，阴影即刻消失
          const img = new Image({
            url: URL.createObjectURL(ret.data),
            width: w,
            height: h,
          })
          flowBox1.add(img)
        }
      })
  }
}, 1000)

})

image2.on(ImageEvent.LOADED, () => { const scale = 4096 / 886 image2.scale = scale leafer.tree.scale = 0.1

const bounds = box2.getBounds('stroke', 'local')

flowBox2.width = bounds.width + 100 * 2
flowBox2.height = bounds.height + 100 * 2

const w = bounds.width / 3
const h = bounds.height / 3
const chunks = Array.from({ length: 9 }, (_, i) => ({
  x: (i % 3) * w,
  y: Math.floor(i / 3) * h,
}))

console.log('bounds', bounds, 'chunks', chunks)

setTimeout(() => {
  for (const chunk of chunks) {
    box2
      .export('jpg', {
        blob: true,
        clip: {
          x: chunk.x,
          y: chunk.y,
          width: w,
          height: h,
        },

        relative: 'local',
      })
      .then((ret) => {
        if (ret.data) {
          // fetch(URL.createObjectURL(ret.data))
          //注释下面代码块（image1 LOADED事件中添加的 image 代码也要同时注释）， 原阴影才显示正常，但只要移动一下画布，阴影即刻消失
          const img = new Image({
            url: URL.createObjectURL(ret.data),
            width: w,
            height: h,
          })
          flowBox2.add(img)
        }
      })
  }
}, 1000)

}) } `

Jul 02 '25 09:07 mozbia

使用收缩阴影时，clip 导出的图片也有问题，不同平台效果表现不一样。leafer版本1.8 电脑的 Chrome 版本137.0.7151.104 ，效果下图：

手机的 Chrome 版本 132.0.6834.80, 效果如下图：

代码： ` import { Box, App, version, Platform, Image, ImageEvent, Rect, Text, } from 'leafer-ui'

import '@leafer-in/editor' import '@leafer-in/viewport' import '@leafer-in/flow' import '@leafer-in/export' import '@leafer-in/resize' import '@leafer-in/state' import '@leafer-in/text-editor' import { Flow } from '@leafer-in/flow'

console.log(version) window.onload = () => { const leafer = new App({ view: window, usePartRender: true, pointer: { preventDefault: false, preventDefaultMenu: true, }, fill: 'gray', touch: { preventDefault: true, },

tree: { type: 'design' },

})

const image1 = new Image({ width: 886, height: 590.5,

url: 'https://images.unsplash.com/photo-1748367959778-12d026a20a99?q=80&w=1771&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',

})

const spreadShadowBox = new Box({ flow: true, padding: 200, fill: 'white', children: [image1], shadow: { // 删除阴影， clip 效果正常 x: 10, y: 150, spread: -150, blur: 100, color: '#000', }, })

const box1 = new Box({ flow: true, padding: 200, fill: 'white', children: [spreadShadowBox], })

const flowBox1 = new Flow({ flowWrap: true, gap: 100 }) const flowContainer = new Flow({ gap: 100, padding: 100, overflow: 'show' })

flowContainer.addMany(box1, flowBox1) leafer.tree.addMany(flowContainer)

image1.on(ImageEvent.LOADED, () => { const scale = 4096 / 886 image1.scale = scale leafer.tree.scale = 0.1

const bounds = box1.getBounds('content', 'local')

flowBox1.width = bounds.width + 100 * 2
flowBox1.height = bounds.height + 100 * 2

const w = bounds.width / 3
const h = bounds.height / 3
const chunks = Array.from({ length: 9 }, (_, i) => ({
  x: (i % 3) * w,
  y: Math.floor(i / 3) * h,
}))

console.log('bounds', bounds, 'chunks', chunks)

setTimeout(() => {
  for (const chunk of chunks) {
    box1
      .export('jpg', {
        blob: true,
        clip: {
          x: chunk.x,
          y: chunk.y,
          width: w,
          height: h,
        },

        relative: 'local',
      })
      .then((ret) => {
        if (ret.data) {
          const img = new Image({
            url: URL.createObjectURL(ret.data),
            width: w,
            height: h,
          })
          flowBox1.add(img)
        }
      })
  }
}, 1000)

}) }

`

Jul 02 '25 09:07 mozbia

裁剪位置不正确哦，如上

将Box的overflow 设置为 'hide' 即可，阴影把Box的渲染范围撑大了导致的。

Jul 02 '25 11:07 leaferjs

收缩阴影的问题，我到时看看原因

Jul 02 '25 11:07 leaferjs

好的。幸苦大佬

Jul 02 '25 12:07 mozbia

经过测试，发现是导出的过程中缩放视图会导致这个问题，如果导出过程中不缩放视图是可以的，可以先暂时在导出过程中禁用缩放视图，我后面看看怎么修复一下。

Jul 07 '25 00:07 leaferjs

大佬再反馈一下，不知道导出的过程中缩放视图是指哪些操作？我将代码中的所有 scale 设置都注释了，甚至配置： leafer.config.zoom ={ disabled:true }

使用 clip 导出时，只要元素有阴影, 导出都有问题，修改阴影的 x 、 y、 spread 的数值，导出的阴影表现不同

Jul 23 '25 03:07 mozbia

大佬再反馈一下，不知道导出的过程中缩放视图是指哪些操作？我将代码中的所有 scale 设置都注释了，甚至配置： leafer.config.zoom ={ disabled:true }

使用 clip 导出时，只要元素有阴影, 导出都有问题，修改阴影的 x 、 y、 spread 的数值，导出的阴影表现不同

抱歉抱歉，大佬可以忽略这个回复，上面提到过：将Box的overflow 设置为 'hide' 即可，阴影把Box的渲染范围撑大了导致的。这个确实可以正常显示位置。有点久了，回头看这个问题，都忘记了 😂，目前主要是clip 导出收缩阴影不显示的问题

Jul 24 '25 01:07 mozbia

clip 导出收缩阴影不显示的问题已修复（隐藏的比较深的一个bug, 感谢反馈），新版本已发布～

Jul 28 '25 08:07 leaferjs

哥，还有问题哦，刚测试了一遍，safari 上面 clip 收缩阴影不显示依旧存在，chrome 可以了

Jul 29 '25 13:07 mozbia

啊。。我记得手机的safari上面测试了，我再看看，你导出的时候用pixelRatio代替scale试试。

Jul 29 '25 14:07 leaferjs

哈哈，safari 有点奇葩。 ios 16 上没问题，18.5 有问题； macOS Sequoia 上测试有问题。我有空再试试pixelRatio

Jul 29 '25 15:07 mozbia

你直接设置 Platform.fullImageShadow = true 试试，可能是有部分新的safari没检测到，我估计是这个原因。

其他浏览器设置这个之后，性能会差挺多。

if (/iPhone|iPad|iPod/.test(navigator.userAgent) || (/Macintosh/.test(navigator.userAgent) && /Version/[\d.]+.*Safari/.test(navigator.userAgent))) { Platform.fullImageShadow = true // 苹果内核渲染阴影 }

Jul 30 '25 09:07 leaferjs

使用pixelRatio 直接不显示阴影了。

另外 Platform.fullImageShadow = true 不行哦，我项目苹果上面都是直接 Platform.fullImageShadow = true 。

昨天我回了 ”阴影依然不显“，可能是缓存，今天我又测试了，😂可以显示，确定版本是 1.9.0，只是苹果浏览器上出现阴影偏移问题。

今天调试了半天终于找到导致 bug 的属性了，

strokeAlign 设置为 outside 或 center ，或设置了shadow.spread 使用 clip 导出均有阴影偏移问题。

chrome 已经可以了，没有发现问题的。

最小代码： //-------------------------------- import { Box, App, version, Image, ImageEvent, Platform, } from 'leafer-ui'

import '@leafer-in/editor' import '@leafer-in/viewport' import '@leafer-in/flow' import '@leafer-in/export' import '@leafer-in/resize' import '@leafer-in/state' import '@leafer-in/text-editor' import { Flow } from '@leafer-in/flow'

Platform.fullImageShadow = true console.log(version) window.onload = () => { const leafer = new App({ view: window, usePartRender: true, pointer: { preventDefault: false, preventDefaultMenu: true, }, fill: 'gray', touch: { preventDefault: true, },

tree: { type: 'design' },

}) const url = 'https://images.unsplash.com/photo-1748367959778-12d026a20a99?q=80&w=1771&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'

const image1 = new Image({ width: 886, height: 590.5, url: url, })

const spreadShadowBox = new Box({ flow: true, padding: 500, fill: 'yellow', children: [image1], overflow: 'hide', stroke: 'red', strokeAlign: 'inside', // 'outside' 'center' 两个值在 safari 上使用 clip 导出都有阴影偏移问题 strokeWidth: 20, shadow: { x: 0, y: 100, box: false, spread: -50, blur: 50, color: '#000000', }, })

const box1 = new Box({ flow: true, padding: 200, fill: 'white', overflow: 'hide', children: [spreadShadowBox], })

const flowBox1 = new Flow({ flowWrap: true, gap: 0 }) const flowContainer = new Flow({ gap: 100, padding: 100, overflow: 'show' }) leafer.tree.scale = 0.1

flowContainer.addMany(box1, flowBox1) leafer.tree.addMany(flowContainer)

image1.on(ImageEvent.LOADED, () => { const scale = 2000 / 886

const bounds = box1.getBounds('stroke', 'local')

flowBox1.width = bounds.width + 100 * 2
flowBox1.height = bounds.height + 100 * 2

const w = bounds.width / 3
const h = bounds.height / 3
const chunks = Array.from({ length: 9 }, (_, i) => ({
  x: (i % 3) * w,
  y: Math.floor(i / 3) * h,
}))

console.log('bounds', bounds, 'chunks', chunks)

setTimeout(() => {
  for (const chunk of chunks) {
    box1
      .export('jpg', {
        blob: true,
        clip: {
          x: chunk.x,
          y: chunk.y,
          width: w,
          height: h,
        },

        relative: 'local',
        // pixelRatio: scale,
      })
      .then((ret) => {
        if (ret.data) {
          fetch(URL.createObjectURL(ret.data))

          const img = new Image({
            url: URL.createObjectURL(ret.data),
            width: w,
            height: h,
          })
          flowBox1.add(img)
        }
      })
  }
}, 1000)

}) }

//--------------------------------

以上代码设置了 spread ，效果如下：

//-------------------------------- 修改上面基础代码的 spreadShadowBox 变量，改为： const spreadShadowBox = new Box({ flow: true, padding: 500, fill: 'yellow', children: [image1], overflow: 'hide', stroke: 'red', strokeAlign: 'outside', // 'outside' 'center' 两个值在 safari 上使用 clip 导出都有阴影偏移问题 strokeWidth: 20, shadow: { x: 0, y: 100, box: false, // spread: -50, blur: 50, color: '#000000', }, })

出现的 bug 现象如图：

Jul 30 '25 12:07 mozbia

收到，我修复一下

奇怪，有的safari上是好的

Jul 30 '25 23:07 leaferjs

是的旧版的好像没问题，比如 iOS 16.6 上面的 Safari 是没问题的

Jul 31 '25 01:07 mozbia

补充一下： const spreadShadowBox = new Box({ flow: true, padding: 500, fill: 'yellow', children: [image1], overflow: 'hide', stroke: 'red', strokeAlign: 'outside', // 'outside' 'center' 两个值在 safari 上使用 clip 导出都有阴影偏移问题 strokeWidth: 20, shadow: { x: 0, y: 0, box: false, // spread: -50, blur: 50, color: '#000000', }, })

shadow x y = 0的现象：

Jul 31 '25 13:07 mozbia

太难了，这个bug总算修复了，1.9.1新版本已发布～

Aug 01 '25 08:08 leaferjs

哈哈，厉害，幸苦大佬了。马上更新试试

Aug 01 '25 13:08 mozbia

完美 iOS 16 到 18.5 都测试了，没问题，太赞了，感动🥹

Aug 01 '25 14:08 mozbia

大佬，clip 收缩阴影又有问题了，这次出现在 chrome 上面。设置Platform.fullImageShadow = false 可以解决。

1.9.7是没问题的， 1.9.8 1.9.9 有问题。

现象：

代码(和之前的一样)： ` import { Box, App, version, Image, ImageEvent, Platform, } from 'leafer-ui'

import '@leafer-in/editor' import '@leafer-in/viewport' import '@leafer-in/flow' import '@leafer-in/export' import '@leafer-in/resize' import '@leafer-in/state' import '@leafer-in/text-editor' import { Flow } from '@leafer-in/flow'

Platform.fullImageShadow = false console.log(version) window.onload = () => { const leafer = new App({ view: window, usePartRender: true, pointer: { preventDefault: false, preventDefaultMenu: true, }, fill: 'gray', touch: { preventDefault: true, },

tree: { type: 'design' }, }) const url = 'https://images.unsplash.com/photo-1748367959778-12d026a20a99?q=80&w=1771&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'

const image1 = new Image({ width: 886, height: 590.5, url: url, })

const spreadShadowBox = new Box({ flow: true, padding: 500, fill: 'yellow', children: [image1], overflow: 'hide', stroke: 'red', strokeAlign: 'inside', // 'outside' 'center' 两个值在 safari 上使用 clip 导出都有阴影偏移问题 strokeWidth: 20, shadow: { x: 0, y: 100, box: false, spread: -50, blur: 50, color: '#000000', }, })

const box1 = new Box({ flow: true, padding: 200, fill: 'white', overflow: 'hide', children: [spreadShadowBox], })

const flowBox1 = new Flow({ flowWrap: true, gap: 0 }) const flowContainer = new Flow({ gap: 100, padding: 100, overflow: 'show' }) leafer.tree.scale = 0.1

flowContainer.addMany(box1, flowBox1) leafer.tree.addMany(flowContainer)

image1.on(ImageEvent.LOADED, () => { const scale = 2000 / 886

const bounds = box1.getBounds('stroke', 'local')

flowBox1.width = bounds.width + 100 * 2 flowBox1.height = bounds.height + 100 * 2

const w = bounds.width / 3 const h = bounds.height / 3 const chunks = Array.from({ length: 9 }, (_, i) => ({ x: (i % 3) * w, y: Math.floor(i / 3) * h, }))

console.log('bounds', bounds, 'chunks', chunks)

setTimeout(() => { for (const chunk of chunks) { box1 .export('jpg', { blob: true, clip: { x: chunk.x, y: chunk.y, width: w, height: h, },

    relative: 'local',
    // pixelRatio: scale,
  })
  .then((ret) => {
    if (ret.data) {
      fetch(URL.createObjectURL(ret.data))

      const img = new Image({
        url: URL.createObjectURL(ret.data),
        width: w,
        height: h,
      })
      flowBox1.add(img)
    }
  })

} }, 1000) }) } `

Sep 27 '25 09:09 mozbia

谢谢反馈，v1.9.8重构了阴影😂，下个版本我修复一下～

Sep 27 '25 10:09 leaferjs