🤔原寸でスクリーンショットを作る

NISHIO Hirokazu [Translate]

🤔原寸でスクリーンショットを作る
全体が見えるようにズームアウトしてスクリーンショットを撮ると小さい文字が見えない、拡大すると一画面に収まらない→ならば原寸でマップ全体のスクリーンショットを撮れる機能があれば良い

前回試した時は「既に描画に使われているキャンバスのサイズを後から変更」した
そして謎の描画ズレなどが起きた
そうではなく新しいキャンバスを作ってそこに描画して破棄すれば良い
そのためには描画対象のキャンバスを変える機能が欲しい

---
canvasを画像にするところは既にやってる
 image.src = canvas.toDataURL(); 
スケールを1にして、コンテンツの範囲に合わせてcanvasを大きくしてからやれば良い
コンテンツの範囲の計算は未実装
 paper.project.activeLayer.getBounds() でいい？
キャンバスのサイズを変更して、再描画をし、それが完了するまで待ってから画像にする必要がある
http://localhost:3000/#/key=n8ma4V1BtQyc8Bc6JDKD
キャンバスサイズの変更、期待したように動かない
縦に伸びたり、付箋と文字の位置がズレる不可解な壊れ方
ts  test: () => {
    // @ts-ignore
    const b: paper.Bound = app.paper.project.activeLayer.getBounds();
    console.log(b, b.width, b.height);

    const canvas = document.getElementById("myCanvas") as HTMLCanvasElement;
    canvas.width = b.width;
    canvas.height = b.height;
    updatePaperZoomCenter(b.center, 1);
  },
'feature/fullscreenshot'に入れて保留
？？
html - Canvas width and height in HTML5 - Stack Overflow
なるほど、canvasエレメントはwidthとstyle.widthを別個に持つのか
縦横比がおかしくなる問題は直った
オフセットがおかしい
これはまあわかる
付箋のテキストの位置とレクトの位置がズレる
これはなぜなのか不可解

実装したらURLでビューポートの指定がされてない時の処理にも使える
編集者のロード時は全体が見えるズーム
URLでビューポート指定
座標が指定されていないならまず全体表示
遅延させる必要がある
自動ダウンロードもできそう
jslink.href = canvas.toDataURL()
link.download = 'filename.png'
link.click()
IEとEdgeで動かない説があるが、まあいいや

pRegroup

"Engineer's way of creating knowledge" the English version of my book is now available on [Engineer's way of creating knowledge]

(C)NISHIO Hirokazu / Converted from [Scrapbox] at 11/23/2025, 4:41:36 PM[Edit]

Related Pages