ブラウザウィンドウのスクリーンショット機能の実装

仕事の中で1つの需要に出会う:ページの中で1つのページのフィードバックを提出するボタンを設定して、ユーザーはこのボタンをクリックする時弾き出すdialogの中でフィードバックの内容を記入することができて、記入し終わってクリックして確定して弾窓を閉じる時現在のブラウザのウィンドウの中の内容を捕獲して画像を生成して、ページの中の現在の状態を記録するために、バックグラウンドでは、ユーザーが記入した内容と生成した画像をデータベースに保存して、メンテナンス担当者が表示します.資料を調べて大体の考え方をいくつか分けます.
        1、javaのRobotクラスを使用して、実現過程は以下の通りである.               

    Robot robot = new Robot();  

    robot.delay(10000);  

    Dimension d = new Dimension(Toolkit.getDefaultToolkit().getScreenSize());  

    int width = (int) d.getWidth();  

    int height = (int) d.getHeight();  

    //ブラウザの最大化  

    robot.keyRelease(KeyEvent.VK_F11);  

    robot.delay(2000);  

    Image image = robot.createScreenCapture(new Rectangle(0, 0, width,  

            height));  

    BufferedImage bi = new BufferedImage(width, height,  

            BufferedImage.TYPE_INT_RGB);  

    Graphics g = bi.createGraphics();  

    g.drawImage(image, 0, 0, width, height, null);  

    //画像を保存  

    ImageIO.write(bi, "jpg", new File("google.jpg"));  

                    この方式はテスト後javaプロジェクトで現在のデスクトップのスクリーンショットを実現できることが分かったが、Webプロジェクトでrobot.createScreenCaptureに実行するとエラーが報告され、権限の問題に関連しているようだ.また、この方式でスクリーンショットしたのはサーバ側のデスクトップで、否決された疑いはない.
          2、javaプログラムでスクリプトを呼び出してサードパーティの.exeスクリーンショットツールを実行することによってスクリーンショットを実現する.この実現方式は同時の問題だけでなく、exeファイルがlinuxシステムの下で正常に呼び出されるかどうかは検証されるためpassである.
          3、前の2つの方式はバックグラウンドプログラムから画像を生成する構想に偏っているので、考え方を変えてフロントからjsに頼って画像を生成し、調べた資料の実現方式はdom-to-img、Html 2 Image、html 2 canvasなどを含み、テストを経た前に両者は画像を生成する時にフォーマットが明らかに変化し、明らかに要求を満たすことができないので、第3の方式を採用することを選んだ.html 2 canvasは、dom要素からcanvas要素への変換を実現するフロントエンドプラグインです.公式プロジェクトgithubプロジェクトアドレス:クリックしてリンクを開きます.
                このプラグインの使用方法は簡単で、html 2 canvas.jsファイルを導入すれば使用できます.コアメソッドは以下の通りです.
                html2canvas(domElement, {                                          option1: *,
                                 option2:*,
                                 ......
                                 onrendered: function(canvas){                                         document.body.appendChild(canvas);                                  },
                    });
                                 onrendered: function(canvas){                                         document.body.appendChild(canvas);                                  },
                    });

          vue，   package.json       ，  js      ：
             beta      ，   ，alpha     ，       ;
                       html2canvas,    ，         ：

html2canvas(document.body, {
      // allowTaint: true,
      taintTest: true,
      useCORS: true,
      async: false,
      // proxy: false,
      onrendered: function(canvas) {
            var data = canvas.toDataURL('image/png');
             ...
      }

    注意:

            a、     data base64      ，                 ；
            b、              ，               。     springcloud  ，     @CrossOrign    。
            c、    option    ：

Name
Type
Default
Description
allowTaint
boolean
false
ドメイン間のサポート
background
string
#fff
背景色、既定の透明度
height
number
null
canvas高さ
letterRendering
boolean
false
ワードピッチ
logging
boolean
false
console.log()出力情報
proxy
string
undefined
ドメイン間ピクチャのロード
taintTest
boolean
true
レンダリング前に画像をテストするかどうか
timeout
number
0
ピクチャロード遅延、デフォルト遅延0、ミリ秒単位
width
number
null
canvas幅
useCORS
boolean
false
ドメイン間のサポート
  注意:allowTaintとuseCORSはドメイン間に関連する属性ですが、同時にtrueに設定することはできません.そうしないと、エラーが発生します.
              私は多くの資料を調べて、allowTaintを使ってドメイン間問題を解決していますが、私のプロジェクトではallowTaintを使ってドメイン間要求を禁止する問題を報告します.useCORSを使って解決することができます.具体的には、私も何が原因なのか分かりません.後でゆっくり研究します.