Recientemente encontré la función de collage de fotos mientras trabajaba en un proyecto, por lo que compartiré mi función de collage de lienzo encapsulado aquí. Es posible que el código no esté bien escrito. Si tiene alguna pregunta o tiene un método mejor, puede chatear conmigo en privado. o Comentarios señalados, gracias a todos.
La idea de implementación es en realidad bastante simple. Implica principalmente obtener el enlace de la imagen, el ancho y la altura de la imagen a través del servidor, y luego usar una recursividad simple para implementarlo (tenga en cuenta que el terminal móvil debe usar una proporción de 2). veces, de lo contrario la imagen aparecerá borrosa)
/** * datos de dibujo del lienzo * @param {Object[]} option.photoData * @param {string} option.photoData[].photo - la dirección del enlace de la foto * @param {number} option.photoData[]. width - Ancho de la foto* @param {number} option.photoData[].height - Alto de la foto* @param {Object[]} option.wordData * @param {string} option.wordData[].color - Color del texto* @param {número} opción.wordData[].fontSize - El tamaño del texto* @param {cadena} opción.wordData[].fontWeight - El grosor del texto* @param {número} opción.wordData[].left - El lado izquierdo del texto Distancia* @param {número} opción.wordData[].top - El margen superior del texto* @param {cadena} opción.wordData[].word - El contenido del texto* @param {Objeto[]} option.iconData * @param {string} option.iconData[].photo - la dirección del enlace del icono * @param {number} option.iconData[].left - el margen izquierdo del icono * @param {number} opción .iconData[] .top - el margen superior del icono * @param {number} option.iconData[].width - el ancho del icono * @param {number} option.iconData[].height - la altura del icono * */función canvasDraw(opción){ var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), clientWidth = document.documentElement.clientWidth, canvasHeight = 0, distancia = 0, photoCount = 0, iconCount = 0; // El dibujo doble en el teléfono móvil en el lienzo aparecerá borroso, por lo que se requiere el dibujo doble, pero no en el lado de la PC. clientWidth = clientWidth > 480? 480 * 2: clientWidth * 2; option.photoData.forEach(function(item,index,picArr){ if (!index) { item.distance = 0; }else if(index){ distancia + = Math.floor(anchocliente / opción.photoData[índice - 1].ancho * opción.photoData[índice - 1].alto) item.distance = distancia } canvasHeight += Math.floor(clientWidth / item.width * item.height); item.imgHeight = Math.floor(clientWidth / item.width * item.height }) console.log( opción.photoData) if (ctx) { canvas.width = clientWidth; canvas.height = canvasHeight + clientWidth / 4 * 2 ctx.fillStyle = '#fff' ctx.fillRect(0, 0, canvas.width, canvas.height) // Dibuja el texto de la imagen if(option.wordData.length){ option.wordData.forEach(function(item,index) { ctx.fillStyle = item.color; ctx.font = 'normal normal ' + item.fontWeight + ' ' + calcular(item.fontSize) + 'px Microsoft YaHei'; ctx.textAlign = 'left'; ctx.fillText(item.word, calcular(item.left), canvasHeight + calcular(item.top)); Calcular la función de espaciado porcentual de diferentes teléfonos móviles calcular proporcionalmente(num){ return Math.floor(clientWidth * num / 750) } drawPhoto('photo0') función drawPhoto(photoDom){ var photoDom = new Imagen(); photoDom.setAttribute('crossOrigin', 'Anónimo'); photoDom.src = opción.photoData[photoCount].photo; photoDom.onload = function(){ ctx.drawImage(photoDom, 0, opción.photoData[ photoCount].distancia, clientWidth, opción.photoData[photoCount].imgHeight photoCount++ si (photoCount ==); option.photoData.length) { drawIcon('icon0') function drawIcon(iconDom){ var iconDom = new Image(); iconDom.setAttribute('crossOrigin', 'Anonymous'); .icono; iconDom.onload = función(){ ctx.drawImage(iconDom, calcular(opción.iconData[iconCount].left), canvasHeight + calcular(option.iconData[iconCount].top), calcular(option.iconData[iconCount].width), calcular(option.iconData[iconCount].height)) iconCount++; if (iconCount == opción.iconData.length) { var imageURL = canvas.toDataURL(image/jpeg) document.getElementsByClassName('shareImg')[0].setAttribute('src', imageURL) // Borra la referencia de cierre y libera la memoria; drawPhoto = }else{ drawIcon('icon' + iconCount) } } } } else{ drawPhoto('foto'+ photoCount) } } } }else{ console.log('lienzo no compatible') } }Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.