由于時間關系 代碼沒有做整理大家有什么不懂得可以留言；

代碼的主題思路備注中都有 大家可以看看

我的博客中還有關于canvas繪制矩形的文章有需要的可以看一下；

HTML代碼：

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

<canvas style=' position: absolute; margin: 2px 0 0 0'></canvas><div style=' display:none;'><canvas :src='http://www.lshqa.cn/bcjs/leftImg.carImgUrl' height='1080'></canvas></div>

JS截取圖片方法

1裁剪方法傳參

oMark2[’canvas1’] = ’canvasImg2’; // 展示結果canvas idoMark2[’canvas2’] = ’dymCurrImg2’; //畫布原始圖片canvas idoMark2[’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() 方法返回一個用于在畫布上繪圖的環境 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裁剪圖片內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！