之前寫過一篇有關Canvas圖片處理的文章，主要說的是用HTML5中的Canvas實現類似PS中的濾鏡功能，而今天我們繼續說說這強大的Canvas，看看如何用它來實現PS中的圖片合成功能。

一、使用場景

圖片合成的使用場景是非常廣的，雖說強大的PS能將任意圖片組合在一起，但它也只能實現固定的幾張圖片的合成，而Canvas則能動態地將各種不同的圖片合為一張圖片。

那么，何為動態合成呢？

比如，我們要將用戶的頭像合到另一張圖片上，這時候因為用戶是不確定的，不同用戶的頭像不同，所以我們肯定不能用PS來做這件事，這時候就是Canvas大顯身手的時候了。

二、基本原理

HTML5給我們提供了一個很好的圖像處理神器Canvas，想要合成圖片，我們首先得將圖片按照一定順序、大小和位置一張張繪制到Canvas畫布中去，最后再將整個Canvas導出為圖片。

Canvas圖片合成

三、編碼實踐

1、創建Canvas畫布

let canvas = document.createElement('canvas'),

ctx = canvas.getContext('2d');

canvas.width = 800;

canvas.height = 800;

2、繪制圖片至Canvas

let img1 = new Image(),

img2 = new Image();

img1.src = './images/1.jpg';

img2.src = './images/2.jpg';

// 加載img1

let pm1 = new Promise((res,rej)=>{

img1.onload = ()=>{

res();

}

});

// 加載img2

let pm2 = new Promise((res,rej)=>{

img2.onload = ()=>{

res();

}

});

// 兩張圖片都加載完成后繪制于Canva中

let drawAllImg = Promise.all([pm1, pm2]).then((res)=>{

ctx.drawImage(img2, 0, 0, 400, 533);

ctx.drawImage(img1, 0, 0, 100, 100);

});

這里我分別繪制了1.jpg和2.jpg兩張圖片于Canvas畫布中，由于圖片需要先從本地加載才能進行繪制，所以這里我使用了onload()方法和Promise對象(詳見ES6異步編程之Promise(一)和ES6異步編程之Promise(二)

)，其中Promise對象中的all()方法是為了等兩張圖片全部加載完后在執行后續操作。

由于我們現在創建的Canvas還未添加到DOM中，所以若是想要看現在的Canvas情況得先加上下面這句：

document.body.appendChild(canvas);

當然，實際若是只想要合成圖片的話就沒必要加上這句了，在離屏Canvas(即手動創建的Canvas但并未添加至DOM中)上繪制即可。

3、將Canvas導出為圖片

drawAllImg.then(()=>{

let outputImg = new Image();

outputImg.src = ctx.canvas.toDataURL();

document.body.appendChild(outputImg);

});

4、整合代碼，最終形成可復用的JS插件

// 圖片合成插件

class ImgMerge {

constructor(imgs = [], options){

// 圖片數組默認配置項

let defaultImgsItem = {

url: '',

x: 0,

y: 0

};

// 導出圖片的格式與壓縮程度默認配置項

let defaultOpts = {

type: 'image/jpeg',

compress: 1

};

try {

imgs.forEach((item,i,arr) => {

arr[i] = Object.assign({},defaultImgsItem,item)

});

}catch (e) {

throw '請傳入一個正確的對象數組作為參數';

}

this.imgs = imgs; // 圖片數組配置項

this.opts = Object.assign({},defaultOpts,options); // 其他配置項

this.imgObjs = []; // 圖片對象數組

this.createCanvas(); // 創建畫布

return this.outputImg(); // 導出圖片

}

// 創建畫布

createCanvas(){

let canvas = document.createElement('canvas'),

ctx = canvas.getContext('2d');

let w = this.imgs[0].width, h = this.imgs[0].height;

if(!w){

throw '第一張圖片寬度未設置';

}

if(!h){

throw '第一張圖片高度未設置';

}

canvas.width = w;

canvas.height = h;

this.ctx = ctx;

}

// 繪制圖片

drawImg(i){

let img = new Image();

img.src = this.imgs[i].url;

this.imgObjs.push(img);

return new Promise((resolve)=>{

img.onload = resolve;

});

}

// 導出圖片

outputImg(){

let imgArr = [];

// 將單張圖片的Promise對象存入數組

this.imgs.forEach((item,i) => {

imgArr.push(this.drawImg(i));

});

// 所有圖片加載成功后將圖片繪制于Canvas中，后將Canvas導出為圖片

return Promise.all(imgArr).then(()=>{

this.imgs.forEach((item,i) => {

let drawPara = [this.imgObjs[i], this.imgs[i].x, this.imgs[i].y];

// 此處判斷參數中圖片是否設置了寬高，若寬高均設置，則繪制已設置的寬高，否則按照圖片默認寬高繪制

if(this.imgs[i].width && this.imgs[i].height){

drawPara.push(this.imgs[i].width, this.imgs[i].height);

}

this.ctx.drawImage(...drawPara);

});

// 以base64格式導出圖片

return Promise.resolve(this.ctx.canvas.toDataURL(this.opts.type),this.opts.compress);

});

}

}

window.ImgMerge = ImgMerge; // 可用于全局引用

export default ImgMerge; // 可用于模塊化引用

然后就可以輕松地使用該插件了。

import ImgMerge from './imgMerge.js';

window.onload = function () {

let imgMerge = new ImgMerge([

{

url: require('../images/bg.jpg'),

width: 640,

height: 1169

},

{

url: require('../images/1.jpg'),

width: 200,

height: 200

}

]);

imgMerge.then(img => {

let mergeImg = new Image();

mergeImg.src = img;

mergeImg.onload = () => {

document.body.appendChild(mergeImg);

};

});

};

相關推薦

結束語

本文通過實際案例主要講述了如何通過Canvas將多張圖片合成為單張圖片，同時也展示了由ES6編寫的面向對象的JS插件代碼，大家如果有興趣可嘗試將文字合成功能也添加進去，如果理解了本文方法之后，其實文字合成到圖片上也是非常簡單的，僅僅添加個方法和修改下配置項就可以了。

總結

以上是生活随笔為你收集整理的canva怎么组合_教你使用Canvas合成图片的全部內容，希望文章能夠幫你解決所遇到的問題。

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