최근 프로젝트를 진행하면서 사진 콜라주 기능을 접하게 되었는데, 여기에 캡슐화된 캔버스 콜라주 기능을 공유하겠습니다. 궁금한 점이 있거나 더 나은 방법이 있으면 저에게 개인적으로 채팅을 하셔도 됩니다. 혹은 지적해주신 댓글들 모두 감사드립니다
구현 아이디어는 실제로 매우 간단합니다. 주로 서버를 통해 이미지 링크, 이미지 너비 및 이미지 높이를 얻은 다음 간단한 재귀를 사용하여 이를 구현합니다(모바일 단말기는 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 {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 {물체[]} option.iconData * @param {string} option.iconData[].photo - 아이콘의 링크 주소 * @param {number} option.iconData[].left - 아이콘의 왼쪽 여백 * @param {number} 옵션 .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, distance = 0, photoCount = 0, iconCount = 0; // 캔버스에서 휴대폰으로 두 번 그리면 흐려지기 때문에 두 번 그려야 하지만 PC에서는 그렇지 않습니다. clientWidth = clientWidth > 480? 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) }) 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 = '일반 일반' + item.fontWeight + ' ' + 계산(item.fontSize) + 'px Microsoft YaHei'; ctx.textAlign = 'left'; ctx.fillText(item.word, 계산(item.left), canvasHeight + 계산(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) if (photoCount == option.photoData.length) { drawIcon('icon0') function drawIcon(iconDom){ var iconDom = new Image(); iconDom.setAttribute('crossOrigin', 'Anonymous'); .icon; iconDom.onload = function(){ ctx.drawImage(iconDom, 계산(option.iconData[iconCount].left), 캔버스 높이 + 계산(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 Network를 지지해 주시길 바랍니다.