使用canvas將多張圖片截取拼接成一張圖片

業務場景

• 最近在做一個截取視頻圖片并拼接的小工具,其中就有個功能需要將多張圖片截取拼接成一張圖片的需求

• 上面就是將幾張圖片截取拼接成一張圖片的效果圖

實現思路

• 使用canvas提供的 drawImage api實現
• api里面的參數比較復雜,在此不贅述,可以參考這篇文章 canvas的drawImage方法參數詳解
• 生成一個canvas畫布,然后利用 drawImage 方法循環截取,獲得我們需要的圖片元素
• 將獲得的圖片元素放在canvas對應的位置
• 循環完畢后將canvas繪制的內容生成圖片進行保存即可

部分源碼

mergeImgs(list, cwith = this.videoWidth, cheight = this.heigth) {return new Promise((resolve, reject) => {// 創建 canvas 節點并初始化const canvas = document.createElement('canvas'); canvas.width = cwith; //設置 canvas 的寬度canvas.height = !this.special ? this.videoHeight + cheight * (list.length - 1) : cheight * list.length; // 設置canvans 的高度const context = canvas.getContext('2d');list.map((item, index) => { // 循環每張圖片資源const img = new Image();img.src = item;// 跨域img.crossOrigin = 'Anonymous';img.onload = () => {if (!this.special && index == 0) {// 截取整張圖片context.drawImage(img, 0, 0, cwith, this.videoHeight);} else {// 截取圖片對應位置的畫面context.drawImage(img,0, // 開始剪切圖片的 x 坐標位置this.videoHeight - cheight, // 開始剪切圖片的 y 坐標位置cwith, // 被剪切圖像的寬度cheight, // 被剪切圖像的高度0, // 在畫布上放置圖像的 x 坐標位置!this.special ? this.videoHeight + cheight * (index - 1) : cheight * index, // 在畫布上放置圖像的 y 坐標位置cwith, // 被剪裁圖像的寬度cheight // 被剪裁圖像的高度);}if (index === list.length - 1) {resolve(canvas.toDataURL('image/png')); // canvas上所有圖片繪制完成后返回生成的圖片}};});});},// 調用this.mergeImgs(this.imageList).then((res) => {this.stitchImg = res;});

體驗地址

視頻截圖拼接小工具

總結

以上是生活随笔為你收集整理的使用canvas将多张图片截取拼接成一张图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。