Недавно я столкнулся с функцией фотоколлажа во время работы над проектом, поэтому поделюсь здесь своей инкапсулированной функцией коллажа на холсте. Код может быть написан не очень хорошо. Если у вас есть какие-либо вопросы или у вас есть лучший метод, вы можете поговорить со мной лично. или Комментарии отмечены, всем спасибо
Идея реализации на самом деле довольно проста. В основном она включает в себя получение ссылки на изображение, ширины и высоты изображения через сервер, а затем использование простой рекурсии для ее реализации (обратите внимание, что мобильный терминал должен использовать соотношение 2). раз, иначе изображение будет размытым)
/** * данные рисунка холста * @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 {номер} option.wordData[].fontSize - Размер текста* @param {строка} option.wordData[].fontWeight - Толщина текста* @param {номер} option.wordData[].left - Левая часть текста Расстояние* @param {номер} option.wordData[].top - Верхнее поле текста* @param {строка} option.wordData[].word - Содержимое текста* @param {Объект[]} option.iconData * @param {string} option.iconData[].photo — адрес ссылки на иконку * @param {number} option.iconData[].left — левое поле иконки * @param {number} option .iconData[].top — верхнее поле значка * @param {number} option.iconData[].width — ширина значка * @param {number} option.iconData[].height — высота значка значок * */функция CanvasDraw (опция) { var Canvas = document.createElement('canvas'), ctx = Canvas.getContext('2d'), clientWidth = document.documentElement.clientWidth, CanvasHeight = 0, расстояние = 0, photoCount = 0, iconCount = 0; // Двойной рисунок на холсте мобильного телефона будет размытым, поэтому требуется двойной рисунок, но не на стороне ПК. clientWidth = clientWidth > 480 * 2 : clientWidth * 2; option.photoData.forEach(function(item,index,picArr){ if (!index) { item.distance = 0; }else if(index){ расстояние + = Math.floor(clientWidth / option.photoData[index - 1].width * option.photoData[index - 1].height) item.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) // Рисуем текст изображения 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, Calcult(item.left), CanvasHeight + Calcult(item.top) }) } //Вычисляем функцию процентного интервала для разных мобильных телефонов. пропорционально рассчитать(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 = функция () { ctx.drawImage(iconDom, вычислить(option.iconData[iconCount].left), CanvasHeight + вычислить(option.iconData[iconCount].top), рассчитать(option.iconData[iconCount].width), рассчитать(option.iconData[iconCount].height)) iconCount++; if (iconCount == option.iconData.length) { var imageURL = Canvas.toDataURL(image/jpeg) document.getElementsByClassName('shareImg')[0].setAttribute('src', imageURL) //Очищаем ссылку закрытия и освобождаем память; drawPhoto = null; }else{ drawIcon('icon' + iconCount) } } } } else{ drawPhoto('photo'+ photoCount) } } } }else{ console.log('холст не поддерживается') } }Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.