vue 아래 canvas 재단 그림 인 스 턴 스 설명

시간 관계 로 코드 가 정리 되 지 않 았 기 때문에 여러분 이 모 르 는 것 이 있 으 면 메 시 지 를 남 겨 도 됩 니 다.
코드 의 주제 사고방식 비고 에 여러분 이 보 실 수 있 습 니 다.
제 블 로그 에는 canvas 가 사각형 을 그 리 는 글 도 있 습 니 다.필요 한 것 은 보 셔 도 됩 니 다.
HTML 코드:
첫 번 째 줄 의 canvas 는 재단 후 전시 용 입 니 다.div 의 canvas 는 원래 크기 의 그림 을 저장 합 니 다.

<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'; //     canvas id
oMark2['canvas2'] = 'dymCurrImg2'; //      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];

2.재단 방법(주의:아래 방법 에서 구축 한 캔버스 1,canvas 3 와 두 개의 canvas 태그 ID 의 이름 은 대응 하지 않 습 니 다.제 가 관 계 를 정리 하 는 것 을 이해 하 실 수 있 습 니 다.
canvas1 = oMark['canvas2'] = 'dymCurrImg2'
canvas3 = oMark['canvas1'] = 'canvasImg2'

TailoringImg(oMark) {
    //     canvas     canvas1 ，canvas2，canvas3
    //    canvas    canvas1      （     ）；
    //  canvas2           ；
    //  canvas3         （     ）；
    let res2 = oMark['ImgUrl'];
    let that = this;
    return new Promise(function (resolve, reject) {
     //      
     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 = function () {
      //         
      var Rwidth = canvas1.width / img.width;
      var Rheight = canvas1.height / img.height;

      cxt1.drawImage(img, 0, 0, canvas1.width, canvas1.height); // --   --          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); // --   -- getImageData()                 

      canvas2.width = sWidth;
      canvas2.height = sHeight;
      cxt2.putImageData(dataImg, 0, 0, 0, 0, canvas2.width, canvas2.height); // --   --    putImageData()          canvas2   
      var img2 = canvas2.toDataURL("image/png"); // --   -- toDataURL() canvas2       

      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) // --   --  canvas2         canvas3   

      };
      resolve();
     }
    })
   },

vue 아래 canvas 재단 이미지 인 스 턴 스 설명 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.vue 아래 canvas 재단 이미지 내용 에 대해 서 는 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!