سأعلمك يدًا بيد كيفية رسم ملصق بسيط باستخدام القماش.

حسنًا، دعنا نتحدث عن المتطلبات أولاً. يريد المنتج من المستخدمين مشاركة صورة على WeChat وQQ والأنظمة الأساسية الأخرى داخل تطبيقنا. تحتوي الصورة على اسم المستخدم والصورة الرمزية ورمز الاستجابة السريعة مع المعلومات الخاصة به. ثم، كيفية إنشاء هذا الملصق ~~~

بادئ ذي بدء، أخبرني رئيسنا أن هناك مكونًا إضافيًا يسمى html2canvas وتتمثل مهمته في تحويل عقد DOM إلى صور، وهو أمر جيد. لقد اختبرته، وهو يعمل بالفعل، ولكن ~ هذا المكون الإضافي كبير بعض الشيء، يبدو الأمر وكأنه خسارة في تقديم مثل هذا الشيء الكبير لتلبية احتياجات الملصقات! ! ! لذا، من الأفضل أن أرسم واحدة بنفسي~

أولا، الاداءات

Dangdangdangdang~~~ يتضمن الملصق النهائي الذي تم إنشاؤه صورة رمزية واسمًا ورمز الاستجابة السريعة بالطبع، رمز الاستجابة السريعة الموجود في الصورة هو رمز الاستجابة السريعة الخاص بـ Baidu~ وأخيرًا، تم إنشاء base64 للمشاركة على المنصات الرئيسية.

بدون مزيد من اللغط، إليك الكود (لم أقم بتجميع هذا الكود لأنني كسول...)

 <canvas id=myCanvas width=750 height=1200 style=border:1px Solid #d3d3d3;background:#ffffff;></canvas>

عقدة DOM بسيطة جدًا، ما عليك سوى إنشاء علامة قماش وكتابة بعض السمات كما تريد~

 var Canvas = document.getElementById(myCanvas); // احصل على وظيفة عقدة اللوحة القماشية imageToCanvas(canvas,url1,url2,code) { // تمرير صورة خلفية عقدة اللوحة القماشية url1 الصورة الرمزية url2 رمز الاستجابة السريعة var ctx = Canvas.getContext(2d ) ; var img1 = new Image(); img1.src = url1; // لن أشرح الصورة السابقة، قم بإنشاء صورة img1.onload = function(){ ctx.drawImage(img1,0,0); // عند تحميل الصورة، يتم تعيينها إلى اللوحة القماشية بدءًا من 0 0. var img2 = new Image(); img2.src = url2; img2.onload = function(){ ctx.save(); PI); // تقوم عملية القطع بتقطيع الصورة الرمزية المربعة إلى دائرة // قطع الدائرة من اللوحة القماشية ctx.clip(); // اقتصاص ctx.drawImage(img2, 330, 90, 88, 88); // ضع img2 عند إحداثيات 330 90 بالحجم 88 ctx.restore(); // حرر حالة اللوحة القماشية ctx.font=28px ctx . textAlign=center ctx.fillStyle ='#FFFFFF'; // الخطوة السابقة هي تعيين سمة النص في المركز ctx.fillText(اسمك Shenma, 375,220); // النص هنا مشفر بشكل ثابت، ومن الناحية العملية، لا بأس من تمرير المزيد من المعلمات var img3 = new Image(). ; img3.src = code; img3.onload = function() { ctx.drawImage(img3,136,554,478,478); // أضف صورة بالمثل var imgCode = ConvertCanvasToImage(canvas); // تحويل الصورة إلى base64 console.log(imgCode.getAttribute('src')) } } }}imageToCanvas(canvas,1.png,'3.jpeg','code.png') // وظيفة التهيئة converterCanvasToImage(canvas) { var image = new Image(); // تحويل اللوحة القماشية إلى صورة الإرجاع img؛}

بهذه الطريقة، يمكنك الحصول على base64 ومن ثم استخدامه.

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.