AR嘗試（2）---給當前屏幕截圖

在AR嘗試（1）中實現了以攝像頭爲底，但是採用的方法是通過marginLeft來"裁"去左邊，通過設置html左右不能滑動來"裁"去右邊，但是video的實際寬度還是比window.innerWidth大的。
現在要實現對當前屏幕進行截圖，第一想法就是通過canvas的drawImage方法來對屏幕進行裁剪，但是嘗試了很多次，試過3、5、9個參數的，呈現效果均是讓人匪夷所思。最後在一篇博文中看到，drawImage對於裁剪Image類型和Video類型，參數代表的含義是不一樣的。QwQ
找到了病症之後又開始無盡的試試試…真沒想到這個截圖能卡住我1天半的時間，啊我好菜55555
最後實在受不了了，換了種方法，既然裁剪Video匪夷所思，既然裁剪Image可控。
那。。。
乾脆就直接裁剪image吧。
先用一個canvas來把整個video給截下來，然後用另一個canvas來裁剛剛canvas轉過來的image。
於是就

  initCanvas() {

         // this.canvasElement = document.createElement('canvas');
         this.canvasElement = document.getElementById('canvas');
         this.canvasElement.setAttribute('width', window.innerWidth.toString() + 'px');
         this.canvasElement.setAttribute('height', window.innerHeight.toString() + 'px');
         this.canvasContext = this.canvasElement.getContext('2d');

         this.canvasElement2 = document.getElementById('canvas2');
         this.canvasElement2.setAttribute('width', window.innerWidth + 'px');
         this.canvasElement2.setAttribute('height', window.innerHeight+ 'px');
         this.canvasContext2 = this.canvasElement2.getContext('2d');
         // document.body.appendChild(this.canvasElement);
     }



 /**
      * 截取攝像頭圖片
      * @returns {HTMLImageElement}
      */
     captureVideo() {
         this.canvasContext.drawImage(this.videoElement,0,0,window.innerWidth,window.innerHeight);	//把整個video截下來
         let image_64 =  this.canvasElement.toDataURL('image/jpeg');
         let image = new Image();
         image.src = image_64;	//將canvas轉成image類型
         this.canvasElement.style.display = "none";

         let newImagePromise = this.cutImage(image);
         return newImagePromise;
     }

這裏發現，在cutImage（）函數（下面給出）中因爲圖片加載的速度要慢於代碼執行的速度，所以返回的裁剪完的image均是空的。試了網上常用的onload、設置延遲器的方法，結果均不太好用，因爲我們需要return一張image回來，但是在onload裏面return不是爲該函數的返回，固我在外面套了一層promise，將整個promise返回，來獲取裏面的圖片

cutImage(image){
        let videoOffWidth = this.videoOffWidth;
        let videoOffHeight = this.videoOffHeight;
        let videoWidth = this.videoElement.offsetWidth;
        let videoHeight = this.videoElement.offsetHeight;
        let canvasElement2 = this.canvasElement2;
        let canvasContext2 = this.canvasContext2;

        return new Promise(function(resolve,reject){
            image.onload = function(){
                //this.canvasContext2.drawImage(image,0,0);
                canvasContext2.drawImage(
                    image,
                    videoOffWidth / 2 / videoWidth * window.innerWidth,videoOffHeight / 2 / videoHeight * window.innerWidth,
                    window.innerWidth * window.innerWidth / videoWidth,window.innerHeight *window.innerHeight / videoHeight,
                    0, 0,
                    window.innerWidth,window.innerHeight);
                let image_64_cut =  canvasElement2.toDataURL('image/jpeg', 0.5);
                let image_cut = new Image();
                image_cut.src = image_64_cut;
                resolve(image_cut);
            };
        });
    }