宜通过修改需要缩放的元素字体大小和行间距等实现 DataviewJS 原文缩略图

每日闲聊
1

起因是我想将 DataviewJS 汇总的原文缩至 50% 大小，形成类似缩略图的效果，少占一些高度。

尝试了 transform: scale(0.5);、height: 50%;、top: 0;、.getBoundingClientRect() 等 CSS 和 JS 方式，元素在单元格的位置始终有问题。

托人询问 CS 专业学生，得 transform-origin: top; 补充，又自行配合 overflow: visible;，勉强实现横版，然切换到 Minimal 伪卡片视图（竖版）仍有位置问题。

数十分钟前忽然想到只需将需要缩放的元素字体大小和行间距调整到 50% 即可，顺利实现。

image

大致如下，仅供参考：

// mRender.js
const id = 'raw', divId = '#'+id
module.exports = (dv, ob, scale = 0.5)=> {
  const SF = (el, cssProps)=> cssProps.map(str=> {
    const ori = window.getComputedStyle(el).getPropertyValue(str)
    const unit = ori.match(/[a-z]+/), value = ori.replace(unit, '')
    return `${str}:${value*scale}${unit}`
  }).join(';')
  const ober = new MutationObserver((muts, ober)=> {
    if (!dv.container.querySelector(divId)) return
    dv.container.querySelectorAll(divId).forEach(el=> {
      el.style.cssText = SF(el, ['font-size', '--p-spacing'])
      el.querySelectorAll('img').forEach(
        img=> img.style.cssText = SF(img, ['width'])
      )
    })
    ober.disconnect()
  })
  ober.observe(dv.container, { childList: !0, subtree: !0 })

  return async (str, dFile)=> {
    const el = Object.assign(createDiv(), {id})
    await ob.MarkdownRenderer.render(app, str, el, dFile.file.path)
    return el
  }
}

从开始至完成写作已近 16 h，分享经验，警钟长鸣。

也许会有更合理的方式实现吗？

我知道 html2canvas 库可以将 div 转换为 svg，但应该是需要下载，
不能通过 const { API } = await import('url') 的方式在线导入。

遍历节点通过 canvas 像素绘制遇到 <img> 的话似乎处理也比较复杂。