Ich bin kürzlich bei der Arbeit an einem Projekt auf die Fotocollage-Funktion gestoßen, daher werde ich hier meine gekapselte Leinwand-Collage-Funktion teilen. Der Code ist möglicherweise nicht gut geschrieben. Wenn Sie Fragen haben oder eine bessere Methode haben, können Sie privat mit mir chatten. oder Kommentare darauf hingewiesen, vielen Dank an alle
Die Idee der Implementierung ist eigentlich recht einfach. Sie besteht hauptsächlich darin, den Bildlink, die Bildbreite und die Bildhöhe über den Server abzurufen und sie dann mithilfe einer einfachen Rekursion zu implementieren (beachten Sie, dass das mobile Endgerät ein Verhältnis von 2 verwenden muss). mal, sonst wird das Bild unscharf)
/** * Leinwandzeichnungsdaten * @param {Object[]} option.photoData * @param {string} option.photoData[].photo – die Linkadresse des Fotos * @param {Nummer} option.photoData[]. width – Breite des Fotos* @param {number} option.photoData[].height – Höhe des Fotos* @param {Object[]} option.wordData * @param {string} option.wordData[].color – Farbe des Textes* @param {Nummer} option.wordData[].fontSize – Die Größe des Texts* @param {string} option.wordData[].fontWeight – Die Dicke des Texts* @param {Nummer} option.wordData[].left – Die linke Seite des Textes Abstand* @param {Nummer} option.wordData[].top – Der obere Rand des Textes* @param {string} option.wordData[].word – Der Inhalt des Textes* @param {Objekt[]} option.iconData * @param {string} option.iconData[].photo – die Linkadresse des Symbols * @param {Nummer} option.iconData[].left – der linke Rand des Symbols * @param {Nummer} Option .iconData[] .top – der obere Rand des Symbols * @param {number} option.iconData[].width – die Breite des Symbols * @param {number} option.iconData[].height – die Höhe des Symbol * */Funktion canvasDraw(option){ var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), clientWidth = document.documentElement.clientWidth, canvasHeight = 0, distance = 0, photoCount = 0, iconCount = 0; // Die doppelte Zeichnung auf dem Mobiltelefon im Canvas wird unscharf sein, daher ist eine doppelte Zeichnung erforderlich, auf der PC-Seite jedoch nicht. 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); option.photoData) if (ctx) { canvas.width = clientWidth; canvas.height = canvasHeight + clientWidth / 4 * 2 ctx.fillStyle = '#fff' ctx.fillRect(0, 0, canvas.width, canvas.height) // Bildtext zeichnen if(option.wordData.length){ option.wordData.forEach(function(item,index) { ctx.fillStyle = item.color; ctx.font = 'normal normal ' + item.fontWeight + ' ' + berechne(item.fontSize) + 'px Microsoft YaHei'; ctx.textAlign = 'left'; ctx.fillText(item.word, berechne(item.left), canvasHeight + berechne(item.top) }) //Berechnen Sie die prozentuale Abstandsfunktion verschiedener Mobiltelefone proportional berechne(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++; option.photoData.length) { drawIcon('icon0') function drawIcon(iconDom){ var iconDom = new Image(); iconDom.setAttribute('crossOrigin', 'Anonymous'); iconDom.src = option.iconData[iconCount] .icon; iconDom.onload = function(){ ctx.drawImage(iconDom, berechne(option.iconData[iconCount].left), canvasHeight + berechne(option.iconData[iconCount].top), berechne(option.iconData[iconCount].width), berechne(option.iconData[iconCount].height)) iconCount++; if (iconCount == option.iconData.length) { var imageURL = canvas.toDataURL(image/jpeg) document.getElementsByClassName('shareImg')[0].setAttribute('src', imageURL) //Löschen Sie die Abschlussreferenz und geben Sie den Speicher frei drawPhoto = null; }else{ drawIcon('icon' + iconCount) } } } } else{ drawPhoto('photo'+ photoCount) } } } }else{ console.log('canvas nicht unterstützt') } }Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.