สอนวิธีเพิ่มลายน้ำแบบเรียงต่อกันให้กับรูปภาพทีละขั้นตอนโดยใช้ Canvas

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

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

สิ่งแรกที่นึกถึงคือการใช้ 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); ctx.rotate((45 * Math.PI) / 180); ลายน้ำ ปรับมุมโก่งให้เป็นต้นฉบับ ไม่เช่นนั้นมันจะหมุนต่อไป}

html

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

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

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

หลังจากค้นหาใน 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';

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

คุณทำเสร็จแล้ว

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network