ผ้าใบ HTML5 ดำเนินการเพิ่มลายน้ำแบบเรียงต่อกันให้กับรูปภาพ

เมื่อเร็วๆ นี้ ฉันพบข้อกำหนดในโครงการซึ่งจำเป็นต้องเพิ่มลายน้ำแบบเรียงต่อกันให้กับรูปภาพ

มีผลคล้ายกัน

สิ่งแรกที่นึกถึงคือการใช้ Canvas เพื่อทำให้ฟังก์ชั่นนี้สมบูรณ์ เพราะฉันไม่เคยสัมผัส Canvas มาก่อน ดังนั้นเมื่อฉันใช้งานฟังก์ชั่นนี้ ฉันแค่เรียนรู้ทีละขั้นตอน ต่อไปก็ทำตามฉัน เพื่อใช้ฟังก์ชันนี้ทีละขั้นตอนและค้นพบข้อผิดพลาดบางประการของ Canvas

เนื่องจากฟังก์ชันนี้ต้องใช้ API ที่ใช้ Canvas และไม่เกี่ยวข้องกับปัญหาหลักใดๆ ฉันจะวางโค้ด js ที่นี่โดยตรง

 var img = new Image();// เนื่องจากธุรกิจในโครงการของฉันคือการใส่ลายน้ำให้กับรูปภาพ Taobao ดังนั้นนี่คือรูปภาพหลักของผลิตภัณฑ์ Taobao img.src = 'https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_!!155-0-lubanu.jpg_400x400.jpg';img.onload = () => { // เตรียมสภาพแวดล้อมแคนวาส var canvas = document. getElementById(myCanvas); var ctx = canvas.getContext(2d); // ขั้นแรกให้วาดภาพลงบนผืนผ้าใบ ctx.drawImage(img, 0, 0, 200, 200); // วาดลายน้ำลงบนผืนผ้าใบเพื่อ (ให้ i = 0; i < 20; i++ ) { ctx.rotate((-45 * Math.PI) / 180); // มุมโก่งเริ่มต้นของลายน้ำ ctx.font = 20px microsoft yahei; ctx.fillStyle = rgba(0,0,0,0.5); ctx.fillText(mmmmmmmmmmmmmmmmmm,-300,i * 25); // ใส่ ลายน้ำ ปรับมุมโก่งให้เป็นต้นฉบับ ไม่เช่นนั้นมันจะหมุนต่อไป}

html

 <ความสูงของผ้าใบ=200 id=ความกว้างของผ้าใบ=200>

เบราว์เซอร์ของคุณไม่รองรับลายน้ำ โปรดใช้ Google Chrome เพื่อเปิด</canvas>

ลองตอนนี้และพบว่ามีข้อผิดพลาด

ไม่สามารถดำเนินการ 'toDataURL' บน 'HTMLCanvasElement': ผืนผ้าใบที่เปื้อนอาจไม่ถูกส่งออก

หลังจากค้นหาใน Google ฉันพบว่าสิ่งนี้เกิดจากปัญหารูปภาพข้ามโดเมน แล้วจะแก้ไขได้อย่างไร

เพียงเพิ่มคุณลักษณะให้กับ img ใหม่ของเรา

img.setAttribute(crossorigin, crossorigin);

ดังนั้นโค้ดของ img ใหม่ในส่วน js จึงกลายเป็น

 var img = new Image();// เนื่องจากธุรกิจในโครงการของฉันคือการใส่ลายน้ำให้กับรูปภาพ Taobao ดังนั้นนี่คือรูปภาพหลักของผลิตภัณฑ์ Taobao img.setAttribute(crossorigin, crossorigin);// รหัสนี้ คือการแก้ไข ปัญหาข้ามโดเมน หากรูปภาพของคุณเป็นของคุณเองและไม่มีปัญหาข้ามโดเมน คุณสามารถลบ img.src = ได้ 'https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_!!155-0-lubanu.jpg_400x400.jpg';

ต่อไปเรามาดูผลิตภัณฑ์สำเร็จรูปของเรากัน

ข้างต้นคือการใช้งาน HTML5 Canvas ที่โปรแกรมแก้ไขแนะนำเพื่อเพิ่มลายน้ำแบบเรียงต่อกันให้กับรูปภาพ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วโปรแกรมแก้ไขจะตอบกลับคุณทันเวลา!