Saya baru-baru ini menemukan fungsi kolase foto ketika mengerjakan sebuah proyek, jadi saya akan membagikan fungsi kolase kanvas terenkapsulasi saya di sini. Kode tersebut mungkin tidak ditulis dengan baik. Jika Anda memiliki pertanyaan atau memiliki metode yang lebih baik, Anda dapat mengobrol dengan saya secara pribadi, atau Komentar ditunjukkan, terima kasih semuanya
Ide implementasinya sebenarnya cukup sederhana. Ini terutama melibatkan perolehan tautan gambar, lebar gambar, dan tinggi gambar melalui server, dan kemudian menggunakan rekursi sederhana untuk mengimplementasikannya (perhatikan bahwa terminal seluler perlu menggunakan rasio 2 kali, jika tidak, gambar akan buram)
/** * data gambar kanvas * @param {Object[]} option.photoData * @param {string} option.photoData[].photo - alamat link foto * @param {number} option.photoData[]. lebar - Lebar foto* @param {number} option.photoData[].height - Tinggi foto* @param {Object[]} option.wordData * @param {string} option.wordData[].color - Warna teks* @param {number} option.wordData[].fontSize - Ukuran teks* @param {string} option.wordData[].fontWeight - Ketebalan teks* @param {number} option.wordData[].left - Sisi kiri teks Jarak* @param {number} option.wordData[].top - Margin atas teks* @param {string} option.wordData[].word - Isi teks* @param {Obyek[]} option.iconData * @param {string} option.iconData[].photo - alamat link ikon * @param {number} option.iconData[].left - margin kiri ikon * @param {number} option .iconData[] .top - margin atas ikon * @param {number} option.iconData[].width - lebar ikon * @param {number} option.iconData[].height - tinggi ikon * */fungsi canvasDraw(pilihan){ var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), clientWidth = document.documentElement.clientWidth, canvasHeight = 0, distance = 0, photoCount = 0, iconCount = 0; // Gambar ganda pada ponsel di kanvas akan buram, jadi diperlukan gambar ganda, tetapi tidak pada sisi PC. lebar klien = lebar klien > 480? 480 * 2 : lebar klien * 2; opsi.photoData.forEach(fungsi(item,indeks,picArr){ if (!index) { item.distance = 0; }else if(index){ jarak + = Math.floor(clientWidth / option.photoData[index - 1].width * option.photoData[index - 1].height) item.jarak = jarak; } canvasHeight += Math.floor(clientWidth / item.width * item.height); item.imgHeight = Math.floor(clientWidth / item.width * item.height }) console.log( opsi.photoData) if (ctx) { canvas.width = clientWidth; canvas.height = canvasHeight + clientWidth / 4 * 2 ctx.fillStyle = '#fff' ctx.fillRect(0, 0, canvas.width, canvas.height) // Menggambar teks gambar if(option.wordData.length){ option.wordData.forEach(function(item,index) { ctx.fillStyle = item.color; ctx.font = 'normal normal' + item.fontWeight + ' ' + hitung(item.fontSize) + 'px Microsoft YaHei'; ctx.textAlign = 'left'; ctx.fillText(item.word, kalkulasi(item.kiri), canvasHeight + kalkulasi(item.top) } //Hitung fungsi jarak persentase pada ponsel yang berbeda menghitung secara proporsional(angka){ return Math.floor(clientWidth * num / 750) } drawPhoto('photo0') function drawPhoto(photoDom){ var photoDom = baru Gambar(); photoDom.setAttribute('crossOrigin', 'Anonim'); photoDom.src = opsi.photoData[photoCount].photo; photoDom.onload = function(){ ctx.drawImage(photoDom, 0, opsi.photoData[ photoCount].jarak, lebar klien, opsi.photoData[photoCount].imgHeight); option.photoData.length) { drawIcon('icon0') fungsi drawIcon(iconDom){ var iconDom = Gambar baru(); iconDom.setAttribute('crossOrigin', 'Anonim'); .icon; ikonDom.onload = fungsi(){ ctx.drawImage(iconDom, hitung(option.iconData[iconCount].kiri), canvasHeight + hitung(option.iconData[iconCount].top), hitung(option.iconData[iconCount].width), hitung(option.iconData[iconCount].height)) iconCount++; jika (iconCount == opsi.iconData.length) { var imageURL = canvas.toDataURL(gambar/jpeg) document.getElementsByClassName('shareImg')[0].setAttribute('src', imageURL) //Hapus referensi penutupan dan lepaskan memori; drawPhoto = null;else{ drawIcon('icon' + iconCount) } } } } else{ drawPhoto('photo'+ photoCount) } } } }else{ console.log('kanvas tidak didukung') } }Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.