ฉันเพิ่งพบฟังก์ชันภาพตัดปะเมื่อทำงานในโครงการ ดังนั้นฉันจะแบ่งปันฟังก์ชันภาพตัดปะแคนวาสของฉันที่นี่ โค้ดอาจเขียนได้ไม่ดีนัก หากคุณมีคำถามใดๆ หรือมีวิธีที่ดีกว่า คุณสามารถแชทกับฉันเป็นการส่วนตัวได้ หรือติชมได้เลยนะครับ ขอบคุณทุกท่านครับ
แนวคิดของการนำไปปฏิบัติจริง ๆ แล้วค่อนข้างง่าย ส่วนใหญ่เกี่ยวข้องกับการรับลิงก์รูปภาพ ความกว้างของรูปภาพ และความสูงของรูปภาพผ่านเซิร์ฟเวอร์ จากนั้นใช้การเรียกซ้ำแบบง่ายเพื่อนำไปใช้ (โปรดทราบว่าเทอร์มินัลมือถือจำเป็นต้องใช้อัตราส่วน 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 - ด้านซ้ายของข้อความ Distance* @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, ระยะทาง = 0, photoCount = 0, iconCount = 0; // การวาดภาพสองครั้งบนโทรศัพท์มือถือบนผืนผ้าใบจะเบลอ ดังนั้นจึงจำเป็นต้องวาดภาพเป็นสองเท่า แต่ไม่ใช่บนฝั่งพีซี clientWidth = clientWidth > 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) ถ้า (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) }) } // คำนวณฟังก์ชันการเว้นวรรคเปอร์เซ็นต์ของโทรศัพท์มือถือต่างๆ คำนวณตามสัดส่วน (ตัวเลข) { return Math.floor (clientWidth * num / 750) } ฟังก์ชั่น DrawPhoto ('photo0') DrawPhoto (photoDom) { var photoDom = ใหม่ รูปภาพ(); 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') ฟังก์ชั่น DrawIcon (iconDom) { var iconDom = รูปภาพใหม่ (); iconDom.setAttribute ('crossOrigin', 'Anonymous'); iconDom.src = option.iconData [iconCount] .icon; iconDom.onload = function(){ ctx.drawImage(iconDom, คำนวณ (option.iconData[iconCount].left), canvasHeight + คำนวณ(option.iconData[iconCount].top), คำนวณ(option.iconData[iconCount].width), คำนวณ(option.iconData[iconCount].height)) iconCount++; if (iconCount == option.iconData.length) { var imageURL = canvas.toDataURL (รูปภาพ/jpeg) document.getElementsByClassName('shareImg')[0].setAttribute('src', imageURL) //ล้างข้อมูลอ้างอิงการปิดและปล่อยหน่วยความจำ; DrawPhoto = null; }else{ DrawIcon('icon' + iconCount) } } } } อื่น ๆ { DrawPhoto ('ภาพถ่าย' + photoCount) } } } } อื่น ๆ { console.log ('ไม่รองรับผ้าใบ') } }ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network