يعلمك خطوة بخطوة كيفية إضافة علامات مائية مبلطة إلى الصور باستخدام القماش

لقد واجهت مؤخرًا متطلبًا في أحد المشروعات، والذي يتطلب إضافة علامة مائية مبلطة إلى الصورة.

تأثير مماثل

أول ما يتبادر إلى ذهني هو استخدام اللوحة القماشية لإكمال هذه الوظيفة، لأنني لم أتعرض للقماش من قبل، لذلك عندما أقوم بهذه الوظيفة، أتعلم خطوة بخطوة، وهذه العملية رائعة جدًا لتنفيذ هذه الوظيفة خطوة بخطوة واكتشاف بعض مخاطر القماش.

نظرًا لأن هذه الوظيفة تتطلب بعض واجهات برمجة التطبيقات المستندة إلى لوحة الرسم ولا تتضمن أي مشكلات أساسية، فسوف أقوم بلصق كود 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("); getElementById(myCanvas); var ctx = Canvas.getContext(2d); // ارسم الصورة أولاً على اللوحة القماشية ctx.drawImage(img, 0, 0, 200, 200); // ارسم العلامة المائية على اللوحة القماشية for (let 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); العلامة المائية اضبط زاوية الانحراف على الأصل، وإلا فسوف تستمر في الدوران}

أتش تي أم أل

 <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.