最近做專案的時候遇到照片拼圖的功能，便在這裡分享自己的封裝的canvas拼圖功能，可能代碼寫的不好，如果有疑問或者是有更好的方法的，可以私聊我，或者是評論指出，感謝各位
實現的思路其實挺簡單的，主要是透過服務端獲取圖片鏈接，圖片寬度，圖片高度，然後利用簡單的遞歸實現就行了（注意移動端需要採用2倍數的比例，否則會出現圖片模糊的問題）
/** * canvas繪圖資料* @param {Object[]} option.photoData * @param {string} option.photoData[].photo - 照片的連結位址* @param {number} option.photoData[].width -照片的寬度* @param {number} option.photoData[].height - 照片的高度* @param {Object[]} option.wordData * @param {string} option.wordData[].color - 文字的顏色* @param {number} option.wordData[].fontSize - 文字的大小* @param {string} option.wordData[].fontWeight - 文字的粗細* @ param {number} option.wordData[].left - 文字的左邊距* @param {number} option.wordData[].top -文字的上邊距* @param {string} option.wordData[].word - 文字的內容* @param {Object[]} option.iconData * @param {string} option.iconData[].photo - icon的連結位址* @param {number} option.iconData[].left - icon的左邊距* @param {number} option.iconData[].top - icon的上邊距* @param {number} option.iconData[].width - icon的寬度* @param {number} option.iconData[].height - icon的高度* */function canvasDraw(option){ var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), clientWidth = document.documentElement.clientWidth, canvasHeight = 0, distance = 0, photoCount = 0, iconCount = 0; // canvas中手機上一倍繪圖會模糊，需採用兩倍，pc端不會。 clientWidth = clientWidth > 480? 480 * 2 : clientWidth * 2; option.photoData.forEach(function(item,index,picArr){ if (!index) { item.distance = 0; }else if(index){ distance = Math.floor(clientWidth / option.photoData[index - 1].width * option.photoData[index - 1].height) item.distance = distance; } canvasHeight += Math.floor(clientWidth / item.width * item.height); item.imgHeight = Math.floor(clientWidthth item.imgHeight = Math.floor(clientWidthth / item.width * item.height); }) console.log(option.photoData) if (ctx) { canvas.width = clientWidth; canvas.height = canvasHeight + clientWidth / 4 * 2 ctx.fillStyle = '#fff' ctx.fillRect(0, 0, canvas.width, canvas.w. canvas.height) //繪製圖片文字if(option.wordData.length){ option.wordData.forEach(function(item,index){ ctx.fillStyle = item.color; ctx.font = 'normal normal ' + item.fontWeight + ' ' + calculate (item.fontSize) + 'px Microsoft YaHei'; ctx.textAlign = 'left'; ctx.fillText(item.word, calculate(item.left), canvasHeight + calculate(item.top)); }) } //按比例計算不同手機的百分比間距function calculate(num){ return Math.floor(clientWidth * num / 750) } drawPhoto('photo0') function drawPhoto(photoDom){ var photoDom = new Image(); photoDom.setAttribute('crossOrigin', 'Anonymous'); photoDom.src = option.photoData[photoCount].photo; photoDom.onload = function(){ ctx.drawImage(photoDom, photoDom.onload = function(){ ctx.drawImage(photoDom, 00, option.Data [photoCount].distance, clientWidth, option.photoData[photoCount].imgHeight); photoCount++; if (photoCount == option.photoData.length) { drawIcon('icon0') function drawIcon(iconDom){ var iconDom = new Image(); iconDom.setAttribute(]crossOrigin ', 'Anonymous'); iconDom.src = option.iconData[iconCount].icon; iconDom.onload = function(){ ctx.drawImage(iconDom, calculate(option.iconData[iconCount].left), canvasHeight + calculate(option.iconData[iconCount].top), calculate(option.iconData[iconCount].top), calculate(option.iconData[iconCount].top), calculate (option.iconData[iconCount].width), calculate(option.iconData[iconCount].height)) iconCount++; if (iconCount == option.iconData.length) { var imageURL = canvas.toDataURL(image/jpeg) document.getElementsByClassName('shareImg'AttriutereImg'Attribute。 ('src', imageURL) //將閉包引用清除，釋放記憶體; drawPhoto = null; }else{ drawIcon('icon' + iconCount) } } } }else{ drawPhoto('photo'+ photoCount) } } } }else{ console.log('不支援canvas') } }以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。