تقدم هذه المقالة مشاركة ملصق WeChat القماشي ومشاركته مع الجميع، والتفاصيل هي كما يلي:
<div class=imgBox v-cloak> <img :src='imgSrc' v-if=imgSrc /></div>
CSS
<style> *{ الهامش:0; } الجسم, html { العرض: 100%; الارتفاع: 100%; عرض: كتلة </style>script
// البنية الرئيسية لـ js new Vue({ el:'imgBox', data:{ urlParam: {},// احصل على كائن القيمة في عنوان url RandomNum: 1,// يتم استخدام الرقم العشوائي لتحديد صفحة النعمة userName: '' ,// اسم المستخدم imgSrc: '',// الصورة النهائية المركبة userImg: '',// الصورة الرمزية للمستخدم userMessage: '',// رسالة المستخدم}، الأساليب: { // مشاركة مع الأصدقاء wxShareFriends: function () {}, // رأس طلب التهيئة wxHttp: function () { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name=csrf-token ]' ).attr('content') } }); // احصل على أرقام عشوائية [1,10] RandomNumbers() { this.randomNum = Math.ceil(Math.random() * 10) }, // احصل على الصورة الرمزية لمستخدم WeChat وعنوانه والكلمات المباركة للمستخدم getUserInfo() { var vm = this $.post('عنوان طلب واجهة برمجة التطبيقات'' , function (data) { if (data.code == 1) { vm.userImg = data.data.headimg; vm.userName = data.data.nickname; (vm.randomNum % 2 == 0) { vm.userMessage= 'عندما نلتقي في عالم البشر، فقد مر الوقت. إن لقاء بعضنا البعض في عالم البشر هو أمر خفي ومقدس.' else { vm.userMessage = 'نلتقي في عالم البشر، نحن كبار السن' } } vm.$nextTick(function () { vm.drawCanvasBgImg(); }) }) }, // احصل على dpr للصفحة وعرضها getWindowInfo() { var windowInfo = {}; windowInfo.dpr = window.devicePixelRatio; width = document.body.clientWidth } return windowInfo }, // ارسم صورة خلفية كبيرة للمشاركة على صفحة النشاط drawCanvasBgImg () {}، // قص دائرة على لوحة صورة الخلفية واملأها بالصورة الرمزية للمستخدم drawCanvasUserImg(canvas, ctx, dpr) {}, // املأ في اسم المستخدم أو رسالة المستخدم CanvasFillText (canvas, ctx, dpr, CircleR) {}, // توليف الصورة المشتركة الأساسية 64 بت converterCanvasToImage (canvas) { this.imgSrc = Canvas.toDataURL(image/jpeg);//png سام ولا يمكن التعرف على رمز الاستجابة السريعة على Android ولا يمكن إعادة توجيهه this.$Spin.hide() } }}); خطوات طريقة الرسم // بعد الحصول على البيانات، ابدأ في رسم صورة الخلفية. الفكرة بسيطة للغاية: ارسم الصورة في اللوحة القماشية، ثم ارسم النص الرمزي على اللوحة القماشية وقم بتحويلها إلى img drawCanvasBgImg () { var vm = this; = document.createElement( Canvas); var ctx = Canvas.getContext(2d); varclientWidth = this.getWindowInfo().width;// احصل على عرض الشاشة لشاشة الهاتف المحمول المتكيفة مع عرض اللوحة القماشية var dpr = this.getWindowInfo().dpr; ctx.globalCompositeOperation = source-atop;//** يبدو الاسم المستعار عديم الفائدة، ولا أعرف إذا تم استخدامه في المكان الخطأ** Canvas.width = dpr * clientWidth; // نظرًا لشاشة الهاتف المحمول، سيتم عرضها عدة مرات عند استخدام شاشة شبكية العين، استخدم dpr لتعيين عرض القماش وارتفاعه ديناميكيًا لتجنب الصور الباهتة. 375;// يجب أن تكون إزالة شريط الحالة في رأس WeChat هي 603. لا أفهم أن 603 لا يزال غير قادر على ملء الشاشة بالصور، لذلك أضفته إلى 609. var img = new Image(); crossOrigin = '';// تتقاطع صورة الحفرة الميتة مع المجال (img.crossOrigin = لا يزال المجهول غير قادر على عرض صور بتنسيق base64) img.src = http://xxx + this.randomNum + .jpg; img.onload = function () { ctx.drawImage(img, 0, 0, Canvas.width, Canvas.height); vm.drawCanvasUserImg(canvas, ctx, dpr }}); الصورة الرمزية للمستخدم drawCanvasUserImg (canvas، ctx، dpr) // قص دائرة على قماش صورة الخلفية واملأها بالصورة الرمزية للمستخدم drawCanvasUserImg: function (canvas, ctx, dpr) { var vm = this; var CircleR = 50 * dpr; width / 2 ;// إحداثي X لمركز الدائرة var CircleY = 50 * dpr;// إحداثي Y لمركز الدائرة var imgX =circleX - CircleR;//إحداثي الصورة X var imgY = CircleY - CircleR;// إحداثيات البداية للصورة Y var imgWidth = 2 * CircleR;// تم تحديد حجم الصورة وفقًا للدائرة var img = new Image(); img.crossOrigin = ''; = this.userImg; img .onload = function () { ctx.save(); Math.PI); // ارسم دائرة ctx.clip(); // قص الدائرة أعلاه ctx.drawImage(img, imgX, imgY, imgWidth, imgWidth); // ارسم على الدائرة التي تم اقتصاصها للتو ctx.restore () // استعادة الحالة vm.canvasFillText(canvas, ctx, dpr, CircleR }}, رسم النص في قماش // املأ اسم المستخدم أو رسالة المستخدم CanvasFillText (canvas, ctx, dpr, CircleR) { var FontSizeThis = dpr * 20 + 'px' + ' Arial' var userNameY = 0; userMessageX = dpr * 40; // إحداثي المحور X لرسالة المستخدم var userMessageY = 0; // إحداثي المحور Y لرسالة المستخدم var lastSubStrIndex = 0;// سلسلة منخفضة var lineWidth = 0;// عرض سطر واحد var allTextWidth = 0;// عرض الأحرف بالكامل ctx.font = FontSizeThis; // اسم المستخدم مطلوب لكتابة اسم المستخدم if (this.userName) { userNameY = CircleR * 2.5; ctx.fillStyle = #0094ff; Canvas.width / 2, userNameY); } if (this.userMessage) { userMessageY = userNameY + dpr * 35; ctx.fillStyle = #000; // احصل على عرض الحرف لـ (var i = 0; i < this.userMessage length; i++) { allTextWidth += ctx.measureText(this.userMessage[i]).width } // إذا كان طول السلسلة أطول من مساحة قماش الرسم، فقم بلف السطر if (allTextWidth > Canvas.width - 2* userMessageX) { for (var i = 0; i < this.userMessage.length; i++) { lineWidth += ctx. MeasureText(this.userMessage[i]).width; ctx.fillText(this.userMessage.substring(lastSubStrIndex, i), userMessageX, userMessageY); userMessageY += dpr * 25;// تعيين ارتفاع الخط lineWidth = 0; lastSubStrIndex = i; الطول - 1) { ctx.fillText(this.userMessage.substring(lastSubStrIndex, i + 1), رسالة المستخدم },ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.