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

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

前回試した時は「既に描画に使われているキャンバスのサイズを後から変更」した

• そして謎の描画ズレなどが起きた
• そうではなく新しいキャンバスを作ってそこに描画して破棄すれば良い
• そのためには描画対象のキャンバスを変える機能が欲しい

• 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'に入れて保留
    - ？？
        - ![image](https://gyazo.com/1d55791f71522408e58acf9f44281efd/thumb/1000)
    - [html - Canvas width and height in HTML5 - Stack Overflow](https://stackoverflow.com/questions/4938346/canvas-width-and-height-in-html5/43364730)
    - なるほど、[canvasエレメントはwidthとstyle.widthを別個に持つ](/ja/canvas%E3%82%A8%E3%83%AC%E3%83%A1%E3%83%B3%E3%83%88%E3%81%AFwidth%E3%81%A8style.width%E3%82%92%E5%88%A5%E5%80%8B%E3%81%AB%E6%8C%81%E3%81%A4)のか
    - 縦横比がおかしくなる問題は直った
    - オフセットがおかしい
        - これはまあわかる
    - 付箋のテキストの位置とレクトの位置がズレる
        - これはなぜなのか不可解

- 実装したらURLでビューポートの指定がされてない時の処理にも使える
- [編集者のロード時は全体が見えるズーム](/ja/%E7%B7%A8%E9%9B%86%E8%80%85%E3%81%AE%E3%83%AD%E3%83%BC%E3%83%89%E6%99%82%E3%81%AF%E5%85%A8%E4%BD%93%E3%81%8C%E8%A6%8B%E3%81%88%E3%82%8B%E3%82%BA%E3%83%BC%E3%83%A0)
- [URLでビューポート指定](/ja/URL%E3%81%A7%E3%83%93%E3%83%A5%E3%83%BC%E3%83%9D%E3%83%BC%E3%83%88%E6%8C%87%E5%AE%9A)
- [座標が指定されていないならまず全体表示](/ja/%E5%BA%A7%E6%A8%99%E3%81%8C%E6%8C%87%E5%AE%9A%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84%E3%81%AA%E3%82%89%E3%81%BE%E3%81%9A%E5%85%A8%E4%BD%93%E8%A1%A8%E7%A4%BA)
    - 遅延させる必要がある

• 自動ダウンロードもできそう js

link.href = canvas.toDataURL()
link.download = 'filename.png'
link.click()

• IEとEdgeで動かない説があるが、まあいいや

pRegroup