Recentemente, encontrei a função de colagem de fotos ao trabalhar em um projeto, então compartilharei minha função de colagem de tela encapsulada aqui. O código pode não estar bem escrito. Se você tiver alguma dúvida ou tiver um método melhor, pode conversar comigo em particular. ou comentários apontados, obrigado a todos
A ideia de implementação é bastante simples. Envolve principalmente obter o link da imagem, a largura e a altura da imagem por meio do servidor e, em seguida, usar a recursão simples para implementá-la (observe que o terminal móvel precisa usar uma proporção de 2). vezes, caso contrário a imagem ficará desfocada)
/** * dados de desenho da tela * @param {Object[]} option.photoData * @param {string} option.photoData[].photo - o endereço do link da foto * @param {number} option.photoData[]. width - Largura da foto* @param {number} option.photoData[].height - Altura da foto* @param {Object[]} option.wordData * @param {string} option.wordData[].color - Cor do texto* @param {number} option.wordData[].fontSize - o tamanho do texto* @param {string} option.wordData[].fontWeight - a espessura do texto* @param {number} option.wordData[].left - o lado esquerdo do texto Distância* @param {number} option.wordData[].top - a margem superior do texto* @param {string} option.wordData[].word - o conteúdo do texto* @param {Objeto[]} option.iconData * @param {string} option.iconData[].photo - o endereço do link do ícone * @param {number} option.iconData[].left - a margem esquerda do ícone * @param {number} option .iconData[] .top - a margem superior do ícone * @param {number} option.iconData[].width - a largura do ícone * @param {number} option.iconData[].height - a altura do ícone * */função canvasDraw(option){ var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), clientWidth = document.documentElement.clientWidth, canvasHeight = 0, distância = 0, photoCount = 0, iconCount = 0; // O desenho duplo no celular na tela ficará borrado, então o desenho duplo é necessário, mas não no PC. clientWidth = clientWidth > 480? 480 * 2: clientWidth * 2; option.photoData.forEach(function(item,index,picArr){ if (!index) { item.distance = 0; }else if(index){ distância + = Math.floor(clientWidth / opção.photoData[index - 1].width * option.photoData[index - 1].height) item.distance = distância } canvasHeight += Math.floor(clientWidth / item.width * item.height = 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) // Desenha o texto da imagem 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, calcula(item.left), canvasHeight + calcula(item.top)); // Calcula a função de espaçamento percentual de diferentes telefones celulares calcular proporcionalmente (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; photoCount].distance, clientWidth, option.photoData[photoCount].imgHeight); option.photoData.length) { drawIcon('icon0') function drawIcon(iconDom){ var iconDom = new Image(); .icon;iconDom.onload = function(){ ctx.drawImage(iconDom, calcular(option.iconData[iconCount].esquerda), canvasHeight + calcular(option.iconData[iconCount].top), calcular(option.iconData[iconCount].width), calcular(option.iconData[iconCount].height)) iconCount++; if (iconCount == option.iconData.length) { var imageURL = canvas.toDataURL(image/jpeg) document.getElementsByClassName('shareImg')[0].setAttribute('src', imageURL) //Limpa a referência de fechamento e libera a memória; drawPhoto = }else{ drawIcon('icon' + iconCount) } } } } else{ drawPhoto('foto'+ photoCount) } } } }else{ console.log('canvas não suportado') } }O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.