I recently encountered the photo collage function when working on a project, so I will share my encapsulated canvas collage function here. The code may not be well written. If you have any questions or have a better method, you can chat with me privately, or Comments pointed out, thank you all
The idea of implementation is actually quite simple. It mainly involves obtaining the image link, image width, and image height through the server, and then using simple recursion to implement it (note that the mobile terminal needs to use a ratio of 2 times, otherwise the image will be blurry)
/** * canvas drawing data * @param {Object[]} option.photoData * @param {string} option.photoData[].photo - the link address of the photo * @param {number} option.photoData[].width - Width of the photo* @param {number} option.photoData[].height - Height of the photo* @param {Object[]} option.wordData * @param {string} option.wordData[].color - Color of the text* @param {number} option.wordData[].fontSize - The size of the text* @param {string} option.wordData[].fontWeight - The thickness of the text* @param {number} option.wordData[].left - The left side of the text Distance* @param {number} option.wordData[].top - The top margin of the text* @param {string} option.wordData[].word - The content of the text* @param {Object[]} option.iconData * @param {string} option.iconData[].photo - the link address of the icon * @param {number} option.iconData[].left - the left margin of the icon * @param {number} option.iconData[] .top - the top margin of the icon * @param {number} option.iconData[].width - the width of the icon * @param {number} option.iconData[].height - the height of the 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; // Double drawing on the mobile phone in canvas will be blurry, so double the drawing is required, but not on the PC side. 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(clientWidth / 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.height) // Draw picture text 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)); }) } //Calculate the percentage spacing function of different mobile phones proportionally 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, 0, option.photoData[ 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].width), calculate(option.iconData[iconCount].height)) iconCount++; if (iconCount == option.iconData.length) { var imageURL = canvas.toDataURL(image/jpeg) document.getElementsByClassName('shareImg')[0].setAttribute('src', imageURL) //Clear the closure reference and release the memory; drawPhoto = null; }else{ drawIcon('icon' + iconCount) } } } } else{ drawPhoto('photo'+ photoCount) } } } }else{ console.log('canvas not supported') } }The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.