في الوقت الحاضر، هناك العديد من أنشطة تشغيل الحساب العام لـ WeChat، وهناك حاجة إلى إنشاء الصور، بعد إنشاء الصور، يمكن إرسالها إلى الأصدقاء وتعميمها في اللحظات، مما يساعد على ترويج المنتج!
1. يمكنك استخدام Canvas لإنشاء الصور، ولكن نظرًا لوجود مكتبة مفتوحة المصدر بالفعل تسمى html2canvas، لم أكتبها بنفسي لتوفير الوقت.
عنوان جيثب:html2canvas
توقف عن التجول، دعونا ننظر إلى الأمور أولاً! ! !
LiveDemo
/** * احصل على نسبة البكسل بناءً على window.devicePixelRatio*/ function DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { return window.devicePixelRatio; القيمة هي عدد صحيح*/ function parseValue(value) { return parseInt(value, 10 }; رسم قماش */ async function drawCanvas (selector) { // احصل على عقدة DOM التي تريد تحويلها const dom = document.querySelector(selector); const box = window.getComputedStyle(dom); عقدة DOM const width = parseValue(box.width); const height = parseValue(box.height); إنشاء عنصر قماش مخصص var Canvas = document.createElement('canvas'); scaleBy;// اضبط عرض وارتفاع CSS على عرض وارتفاع عقدة DOM Canvas.style.width = `${width}px`; `${height}px`; // احصل على الفرشاة const context = Canvas.getContext('2d'); // تكبير كل محتوى الرسم بنسبة البكسل context.scale(scaleBy,scaleBy); = الارتفاع؛ عودة تنتظر html2canvas(dom, {canvas}).then(function () { converterCanvasToImage(canvas, x,y) }) } /** * تحويل الصورة إلى تنسيق base64*/ function converterCanvasToImage(canvas, x, y) { Let image = new Image(); Let _container = document.getElementsByClassName('container')[0]; ) [0]; image.width = x; image.height = y; Canvas.toDataURL(image/png); _body.removeChild(_container document.body.appendChild(image); drawCanvas('.container')2. نظرًا لأن جميع الهواتف المحمولة اليوم تحتوي على شاشات عالية الدقة، فسوف يظهر التمويه إذا لم تقم بأي معالجة. لماذا يحدث التمويه؟ يتضمن ذلك نسبة بكسلات الجهاز، حيث يوفر جهاز devicesPixelRatio js window.devicePixelRatio للحصول على نسبة بكسلات الجهاز
دالة DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { return window.devicePixelRatio } return 1;وظيفة DPR هذه هي الحصول على نسبة البكسل للجهاز فماذا يجب أن نفعل بعد الحصول على نسبة البكسل؟
var Canvas = document.createElement('canvas'); // اضبط عرض سمة عنصر اللوحة وارتفاعها على عرض وارتفاع عقدة DOM * نسبة البكسل Canvas.width = width *scaleBy; عرض وارتفاع CSS هما عرض وارتفاع عقدة DOM Canvas.style.width = `${width}px`; احصل على الفرشاة const context = Canvas.getContext('2d'); // تكبير كل محتوى الرسم بنسبة البكسل context.scale(scaleBy,scaleBy);3. بعد الحصول على نسبة بكسلات الجهاز، قم بضرب Canvass.width وcanvas.height في نسبة بكسلات الجهاز، وهي ScaleBy؛ في هذا الوقت، قم بتعيين Canvas.style.width وcanvas.style.height على العرض والارتفاع دوم. فكر في الأمر، لماذا تكتب هذا؟ وأخيرًا، عند الرسم، يتم تكبير المحتوى المرسوم بنسبة البكسل
على سبيل المثال، عرض وارتفاع جهاز iPhone 6S هو 375 لذا، إذا قمت برسمها على أساس واحد لواحد، فستكون ضبابية على شاشة عالية الوضوح. ما عليك سوى إلقاء نظرة على الصورة وسرد القصة
6 زائد DPR = 3
4. أخيرًا، اتصل بـ Canvas.toDataURL(image/png); وقم بتعيين القيمة إلى image.src. نظرًا لأنه لا يمكن حفظ الصور في WeChat، يمكنك فقط إنشاء ملفات صور واستدعاء وظيفة الضغط المطول الخاصة بـ WeChat لحفظ الصور في الألبومات. كما هو مبين في الشكل:
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.