TiddlyWiki 截图插件: 使用 HTML2Canvas 捕获单个 Tiddler 内容

const Widget = require('$:/core/modules/widgets/widget.js').widget;
const html2canvas = require('$:/plugins/FSpark/TiddlerScreenshot/html2canvas.min.js');

class TScreenshotWidget extends Widget {
  refresh(changedTiddlers) {
    return false;
  }

  render(parent, _nextSibling) {
    this.parentDomNode = parent;
    this.execute();
    this.renderChildren(parent, _nextSibling);
  }

  invokeAction(triggeringWidget, event) {
    let tiddlerFrame = triggeringWidget.domNode.closest('[role='article']').not('.kk-utility-details');
    if (tiddlerFrame) {
      html2canvas(tiddlerFrame).then((canvas) => {
        canvas.toBlob((blob) => {
          var url = URL.createObjectURL(blob);
          var a = document.createElement('a');
          a.href = url;
          a.download = `${this.getVariable('currentTiddler')}-${new Date().getTime()}.png`;
          a.click();
          window.URL.revokeObjectURL(url);
        });
      });
    }
  }
}

exports.tiddlerscreenshot = TScreenshotWidget;

本 TiddlyWiki 插件使用 HTML2Canvas 库，为用户提供了一个便捷的方式来截图单个 Tiddler 内容并将其保存为 PNG 图片。

该插件定义了一个名为 TScreenshotWidget 的自定义小部件。小部件的 invokeAction 方法负责捕获用户点击事件，并使用 html2canvas 库将当前 Tiddler 内容转换为图片。

该代码使用 closest() 方法选择当前 Tiddler 元素，并使用 .not() 方法排除 kk-utility-details 类别的元素。

随后，该代码将 Tiddler 内容的图片转换为 Blob 对象，并生成一个可下载的链接。用户点击链接后，图片将被下载到本地。

该插件可以轻松集成到 TiddlyWiki 网站中，为用户提供更加便捷的操作体验。