لقد واجهت مؤخرًا متطلبًا في أحد المشروعات، والذي يتطلب إضافة علامة مائية مبلطة إلى الصورة.
تأثير مماثل
أول ما يتبادر إلى ذهني هو استخدام اللوحة القماشية لإكمال هذه الوظيفة، لأنني لم أتعرض للقماش من قبل، لذا عندما أقوم بهذه الوظيفة، أتعلم خطوة بخطوة، وهذه العملية رائعة جدًا لتنفيذ هذه الوظائف خطوة بخطوة واكتشاف بعض مخاطر القماش.
نظرًا لأن هذه الوظيفة تتطلب بعض واجهات برمجة التطبيقات المستندة إلى لوحة الرسم ولا تتضمن أي مشكلات أساسية، فسوف أقوم بلصق كود 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); العلامة المائية اضبط زاوية الانحراف على الأصل، وإلا فسوف تستمر في الدوران}أتش تي أم أل
<ارتفاع القماش = 200 معرف = عرض قماشي = 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 الذي قدمه المحرر لإضافة علامات مائية متجانبة إلى الصور، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب.