Vueの下のキャンバスクロップ画像

時間の制約により、コードは整理されていません。何もわからない場合は、メッセージを残すことができます。

コードのテーマにコメントがあります。

私のブログには、四角形を描くキャンバスに関する記事もあります。必要に応じて、ぜひご覧ください。

HTMLコード：

最初の行のキャンバスはトリミング後の表示に使用され、divのキャンバスには元のサイズの画像が保存されます

　　　　　　< canvas id = "canvasImg1" style = "position：absolute; margin：2px 0 0 0" > </ canvas > 
          < div id = "dymImgCanv1" style = "display：none;" > 
            < canvas id = "dymCurrImg1" ：src = "leftImg.carImgUrl" width = "1920" height = "1080" > </ canvas > 
          </ div >

JSインターセプト画像方式

1カット方法パスパラメータ

            oMark2 ['canvas1'] = 'canvasImg2' ; //結果のキャンバスIDを表示
            oMark2 [ 'canvas2'] = 'dymCurrImg2' ; //元のキャンバス画像のキャンバスID 
            oMark2 [ 'ImgUrl'] = carImgUrl; 
            oMark2 [ 'offsetLeft'] =場所[0 ]; 
            oMark2 [ 'offsetTop'] =場所[2 ]; 
            oMark2 [ 'offsetWidth'] =場所[1]-場所
            [ 0 ]; oMark2 [ 'offsetHeight'] =場所[3]-場所[2 ];

2Croppingメソッド（注：次のメソッドのcanvas1、canvas3、および2つのcanvasタグIDの名前は対応していないため、誰でも理解できます。

canvas1 = o Mark ['canvas2'] = 'dymCurrImg2'

canvas3 = oMark ['canvas1' ] = 'canvasImg2'

     TailoringImg（oMark）{
         // 3つのキャンバスをcanvas1、canvas2、canvas3に設定
        //    各キャンバスの役割canvas1元の画像キャンバス（ページで非表示）; 
        //    canvas2の元の画像とトリミング結果の間の変換; 
        //    canvas3クロッピング後の結果（ページに表示）; 
        let res2 = oMark ['ImgUrl' ]; 
        let that = this ;
         return  new Promise（function （resolve、reject）{
           // Image cut processing 
         var canvas1 = document.getElementById（ oMark ['canvas2' ]）;
           var canvas3 = document.getElementById（oMark ['canvas1' ]）; 
          canvas1.height = 1080 ; 
          canvas1.width = 1920 ; 

          canvas3.height = 198 ; 
          canvas3.width = 400 ;
           var cxt1 = canvas1.getContext（ "2d"）; // getContext（）メソッドは、キャンバスに描画するための環境を返します
          var img = new Image（）; 
          img.crossOrigin = '' ; 
          img.src = res2;
           var canvas2 = document.createElement（ "canvas"）; // 仮想キャンバス環境を作成する
          var cxt2 = canvas2.getContext（ "2d" ）; 

          img。 onload = 関数（）{
             // 画像のスケーリングを計算する
            var Rwidth = canvas1.width / img.width;
             var Rheight = canvas1.height / img.height; 

            cxt1.drawImage（img、0、0、canvas1.width、canvas1.height）; // -最初のステップ-元の画像がcanvasのdrawImageメソッドに描画され、画像、キャンバス、またはビデオをキャンバスに描画します。画像の特定の部分を描画したり、画像のサイズを拡大または縮小したりすることもできます。
　　　　　　　　//スケーリングされたサイズを計算するvar srcX = oMark.offsetLeft * Rwidth;
             var srcY = oMark.offsetTop * Rheight;
             var sWidth = oMark.offsetWidth * Rwidth;
             var sHeight = oMark.offsetHeight * Rheight;
             var
            dataImg = cxt1.getImageData（srcX、srcY、sWidth、sHeight）; //   -second step-getImageData（）指定された長方形のピクセルデータを元のキャンバスに

            コピーするcanvas2.width = sWidth; 
            canvas2.height = sHeight; 
            cxt2 .putImageData（dataImg、0、0、0、0、 canvas2.width、canvas2.height）;   //   -3番目のステップは、putImageData（）
            var img2 = canvas2 によって元の画像データをcanvas2キャンバスに配置します。 toDataURL（ "image / png"）; //-   ステップ4-toDataURL（）canvas2 canvasを画像として保存

            var cxt3 = canvas3.getContext（ "2d"）; // getContext（）メソッドは、キャンバスに描画するための環境
            var img3 = new Image（）;   // 画像オブジェクトを作成する
            img3.crossOrigin = '';   //   画像のクロスドメインを設定 
            img3.src = img2;         // 画像アドレスを設定 
            img3.onload = function（）{   // 画像情報は、onload 
              cxt3.drawImage（img3、0、0、 canvas3.width、canvas3.height）// --Step   5-canvas2 canvasで生成された画像をcanvas3 canvasに配置します

            }; 
            resolve（）; 
          } 
        }）
      }、

Vueの下のキャンバスクロップ画像

おすすめ