Canvas crop picture under vue

Due to time constraints, the code has not been sorted out. If you do n’t understand anything, you can leave a message;

There are comments in the theme of the code.

I also have an article about canvas drawing rectangles in my blog. If you need it, you can take a look;

HTML code:

The canvas in the first row is used for display after cropping; the canvas in the div stores the original size picture

 　　  

　　　　　　<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 intercept picture method

     1 Cutting method pass parameter 

            oMark2 ['canvas1'] = 'canvasImg2' ; // Show result canvas id 
            oMark2 [ 'canvas2'] = 'dymCurrImg2' ; // Original canvas picture canvas id 
            oMark2 [ 'ImgUrl'] = carImgUrl; 
            oMark2 [ 'offsetLeft'] = location [0 ]; 
            oMark2 [ 'offsetTop'] = location [2 ]; 
            oMark2 [ 'offsetWidth'] = location [1] 
            -location [ 0 ]; oMark2 [ 'offsetHeight'] = location [3]-location [2 ];        

2Cropping method (Note: The naming of the canvas1, canvas3 and the two canvas tag IDs in the following method does not correspond, so that everyone can understand me. 

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

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

 

     TailoringImg (oMark) {
         // Set three canvases to be canvas1, canvas2, canvas3 
        //    The role of each canvas canvas1 original picture canvas (hidden in the page); 
        //    Conversion between canvas2 original image and cropping result; 
        //    canvas3 The result after cropping (shown on the page); 
        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 () method returns an environment for drawing on the canvas 
          var img = new Image (); 
          img.crossOrigin = '' ; 
          img.src = res2;
           var canvas2 = document.createElement ("canvas"); // Create virtual canvas environment 
          var cxt2 = canvas2.getContext ("2d" ); 

          img. onload = function() {
             // Calculate image scaling 
            var Rwidth = canvas1.width / img.width;
             var Rheight = canvas1.height / img.height; 

            cxt1.drawImage (img, 0, 0, canvas1.width, canvas1.height); // --The first step-the original image is drawn on the canvas drawImage method to draw an image, canvas or video on the canvas. It is also possible to draw certain parts of the image and / or increase or decrease the size of the image. 
　　　　　　　　// Calculate the scaled size 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 () copy the pixel data of the specified rectangle on the original canvas 

            canvas2.width = sWidth; 
            canvas2.height = sHeight; 
            cxt2 .putImageData (dataImg, 0, 0, 0, 0, canvas2.width, canvas2.height); // --Step     3-Put the original image data into canvas2 canvas by putImageData () 
            var img2 = canvas2. toDataURL ("image / png"); //   --Step 4-toDataURL () save canvas2 canvas as an image 

            var cxt3 = canvas3.getContext ("2d"); // getContext () method returns a The environment for drawing on the canvas 
            var img3 = new Image ();   // Create an image object
            img3.crossOrigin = '';   //   Set the image cross-domain 
            img3.src = img2;         // Set the image address 
            img3.onload = function () {   // The image information can be obtained in onload 
              cxt3.drawImage (img3, 0, 0, canvas3.width, canvas3.height) // --Step   5-Place the image generated by canvas2 canvas on canvas3 canvas 

            }; 
            resolve (); 
          } 
        }) 
      },