溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue下canvas裁剪圖片的方法

發(fā)布時間：2020-08-03 11:47:44 來源：億速云 閱讀：380 作者：小豬 欄目：web開發(fā)

這篇文章主要講解了vue下canvas裁剪圖片的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

HTML代碼：

第一行的canvas為裁剪后展示用；div中的canvas存放原有尺寸的圖片

<canvas id="canvasImg1" ></canvas>
<div id="dymImgCanv1" >
<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裁剪方法 （注意：下邊方法中關于構建的畫布 canvas1，canvas3與兩個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() 方法返回一個用于在畫布上繪圖的環(huán)境
     var img = new Image();
     img.crossOrigin = '';
     img.src = res2;
     var canvas2 = document.createElement("canvas"); // 創(chuàng)建虛擬畫布環(huán)境
     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() 復制原圖畫布上指定矩形的像素數(shù)據(jù)

      canvas2.width = sWidth;
      canvas2.height = sHeight;
      cxt2.putImageData(dataImg, 0, 0, 0, 0, canvas2.width, canvas2.height); // --第三步-- 通過 putImageData() 將原圖圖像數(shù)據(jù)放到canvas2畫布中
      var img2 = canvas2.toDataURL("image/png"); // --第四步-- toDataURL()將canvas2畫布保存為圖像

      var cxt3 = canvas3.getContext("2d"); // getContext() 方法返回一個用于在畫布上繪圖的環(huán)境
      var img3 = new Image(); // 創(chuàng)建圖像對象
      img3.crossOrigin = ''; // 圖像跨域設置
      img3.src = img2;    // 設置圖像地址
      img3.onload = function () { // onload內可以獲取圖像信息
       cxt3.drawImage(img3, 0, 0, canvas3.width, canvas3.height) // --第五步-- 將canvas2畫布生成的圖像放在canvas3畫布中

      };
      resolve();
     }
    })
   },

看完上述內容，是不是對vue下canvas裁剪圖片的方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。

AI
助
手