J'ai récemment rencontré la fonction de collage de photos lorsque je travaillais sur un projet, je vais donc partager ici ma fonction de collage de toile encapsulée. Le code n'est peut-être pas bien écrit. Si vous avez des questions ou si vous avez une meilleure méthode, vous pouvez discuter avec moi en privé. ou Commentaires signalés, merci à tous
L'idée de mise en œuvre est en fait assez simple. Elle consiste principalement à obtenir le lien de l'image, la largeur de l'image et la hauteur de l'image via le serveur, puis à utiliser une simple récursivité pour l'implémenter (notez que le terminal mobile doit utiliser un ratio de 2). fois, sinon l'image sera floue)
/** * données de dessin sur toile * @param {Object[]} option.photoData * @param {string} option.photoData[].photo - l'adresse du lien de la photo * @param {number} option.photoData[]. width - Largeur de la photo* @param {number} option.photoData[].height - Hauteur de la photo* @param {Object[]} option.wordData * @param {string} option.wordData[].color - Couleur du texte* @param {number} option.wordData[].fontSize - La taille du texte* @param {string} option.wordData[].fontWeight - L'épaisseur du texte* @param {number} option.wordData[].left - Le côté gauche du texte Distance* @param {number} option.wordData[].top - La marge supérieure du texte* @param {string} option.wordData[].word - Le contenu du texte* @param {Objet[]} option.iconData * @param {string} option.iconData[].photo - l'adresse du lien de l'icône * @param {number} option.iconData[].left - la marge gauche de l'icône * @param {number} option .iconData[] .top - la marge supérieure de l'icône * @param {number} option.iconData[].width - la largeur de l'icône * @param {number} option.iconData[].height - la hauteur de l'icône. icône * */fonction canvasDraw(option){ var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), clientWidth = document.documentElement.clientWidth, canvasHeight = 0, distance = 0, photoCount = 0, iconCount = 0; // Le double dessin sur le téléphone portable dans Canvas sera flou, donc le double du dessin est nécessaire, mais pas côté PC. 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) // Dessine le texte de l'image if(option.wordData.length){ option.wordData.forEach(function(item,index) { ctx.fillStyle = item.color; ctx.font = 'normal normal ' + item.fontWeight + ' ' + calculer (item.fontSize) + 'px Microsoft YaHei'; ctx.textAlign = 'left'; ctx.fillText(item.word, calculate(item.left), canvasHeight + calculate(item.top)); //Calculer la fonction d'espacement en pourcentage de différents téléphones mobiles calculer proportionnellement (num) { return Math.floor (clientWidth * num / 750) } drawPhoto ('photo0') function drawPhoto (photoDom) { var photoDom = new Image(); photoDom.setAttribute('crossOrigin', 'Anonyme'); photoDom.src = option.photoData[photoCount].photo; photoDom.onload = function(){ ctx.drawImage(photoDom, 0, option.photoData[ photoCount].distance, clientWidth, option.photoData[photoCount].imgHeight); option.photoData.length) { drawIcon('icon0') function drawIcon(iconDom){ var iconDom = new Image(); iconDom.setAttribute('crossOrigin', 'Anonymous'); .icon; iconDom.onload = function(){ ctx.drawImage(iconDom, calculer(option.iconData[iconCount].left), canvasHeight + calculer(option.iconData[iconCount].top), calculer(option.iconData[iconCount].width), calculer(option.iconData[iconCount].height)) iconCount++; if (iconCount == option.iconData.length) { var imageURL = canvas.toDataURL(image/jpeg) document.getElementsByClassName('shareImg')[0].setAttribute('src', imageURL) //Effacer la référence de fermeture et libérer la mémoire ; drawPhoto = null }else{ drawIcon('icon' + iconCount) } } } } else{ drawPhoto('photo'+ photoCount) } } } }else{ console.log('canvas non pris en charge') } }Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.