htmltoimage تحميل - htmltoimage تحميل كود المصدر

htmltoimage

شفرة المصدر الأخرى

rc-0.1

تنزيل

أتش تي أم أل إلى الصورة

يُنشئ صورة من عقدة DOM باستخدام لوحة HTML5 وSVG.
شوكة من dom-to-image مع تعليمات برمجية أكثر قابلية للصيانة وبعض الميزات الجديدة.

ثَبَّتَ

 تثبيت npm - حفظ html إلى الصورة

الاستخدام

 /* ES6 */import * as htmlToImage from 'html-to-image';import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';/* ES5 */var htmlToImage = require(' html-to-image');

تقبل جميع وظائف المستوى الأعلى عقدة DOM وخيارات العرض، وترجع وعدًا تم الوفاء به مع dataURL المقابل:

toSvg
إلىPng
toJpeg
toBlob
toPixelData

اذهب مع الأمثلة التالية.

احصل على عنوان URL لبيانات بتشفير base64 لصورة PNG واعرضه على الفور:

 عقدة فار = document.getElementById('my-node');htmlToImage.toPng(node)
  .then(function (dataUrl) {var img = new Image();img.src = dataUrl;document.body.appendChild(img);
  })
  .catch(function (error) {console.error('عفوًا، حدث خطأ ما!', خطأ);
  });

احصل على عنوان URL للبيانات المشفرة بصيغة PNG base64 وقم بتنزيله (باستخدام التنزيل):

 htmlToImage.toPng(document.getElementById('my-node'))
  .then(function (dataUrl) {download(dataUrl, 'my-node.png');
  });

احصل على صورة PNG blob وقم بتنزيلها (باستخدام FileSaver):

 htmlToImage.toBlob(document.getElementById('my-node'))
  .then(function (blob) {window.saveAs(blob, 'my-node.png');
  });

حفظ وتنزيل صورة JPEG مضغوطة:

 htmlToImage.toJpeg(document.getElementById('my-node'), { الجودة: 0.95 })
  .then(function (dataUrl) {var link = document.createElement('a');link.download = 'my-image-name.jpeg';link.href = dataUrl;link.click();
  });

احصل على عنوان URL لبيانات SVG، ولكن قم بتصفية جميع عناصر <i> :

 مرشح الوظيفة (العقدة) {
  return (node.tagName !== 'i');}htmlToImage.toSvg(document.getElementById('my-node'), { filter: filter })
  .then(function (dataUrl) {/* افعل شيئًا */
  });

احصل على بيانات البكسل الأولية كـ Uint8Array مع كل 4 عناصر صفيف تمثل بيانات RGBA للبكسل:

 عقدة فار = document.getElementById('my-node');htmlToImage.toPixelData(node)
  .then(وظيفة (بكسل) {for (var y = 0; y <node.scrollHeight; ++y) { for (var x = 0; x <node.scrollWidth; ++x) {pixelAtXYOffset = (4 * y) *node.scrollHeight) + (4 * x)؛/* PixelAtXY هو Uint8Array[4] يحتوي على قيم RGBA للبكسل عند (x، y) في النطاق 0..255 */pixelAtXY = Pixels.slice(pixelAtXYOffset, PixelAtXYOffset + 4 }});
  });

احصل على HTMLCanvasElement واعرضه على الفور:

 htmlToImage.toCanvas(document.getElementById('my-node'))
  .then(function (canvas) {document.body.appendChild(canvas);
  });

خيارات

فلتر

دالة تأخذ عقدة DOM كوسيطة. يجب أن يعود صحيحًا إذا تم تضمين العقدة التي تم تمريرها في الإخراج. استبعاد العقدة يعني استبعاد أطفالها أيضًا.

لم يتم استدعاؤها على العقدة الجذرية.

لون الخلفية

قيمة سلسلة للون الخلفية، أي قيمة لون CSS صالحة.

العرض والارتفاع

العرض والارتفاع بالبكسل الذي سيتم تطبيقه على العقدة قبل العرض.

أسلوب

كائن سيتم نسخ خصائصه إلى نمط العقدة قبل العرض. قد ترغب في التحقق من هذا المرجع لأسماء JavaScript لخصائص CSS.

جودة

رقم بين 0 و 1 يشير إلى جودة الصورة (على سبيل المثال 0.92 => 92% ) لصورة JPEG.

الإعدادات الافتراضية هي 1.0 ( 100% )

com.cacheBust

اضبط على "صحيح" لإلحاق الوقت الحالي كسلسلة استعلام لطلبات URL لتمكين خرق ذاكرة التخزين المؤقت.

الافتراضيات false

imagePlaceholder

عنوان URL للبيانات لصورة العنصر النائب التي سيتم استخدامها عند فشل جلب الصورة.

يتم تعيينه افتراضيًا على سلسلة فارغة وسيعرض مناطق فارغة للصور الفاشلة.

المتصفحات

لقد تم اختباره على أحدث إصدار من Chrome وFirefox (49 و45 على التوالي في وقت كتابة هذا التقرير)، وكان أداء Chrome أفضل بكثير على أشجار DOM الكبيرة، ربما بسبب دعم SVG الأكثر أداءً، وحقيقة أنه يدعم خاصية CSSStyleDeclaration.cssText .

Internet Explorer غير مدعوم (ولن يكون كذلك)، لأنه لا يدعم علامة SVG <foreignObject> .

Safari غير مدعوم، لأنه يستخدم نموذج أمان أكثر صرامة على علامة <foreignObject> . الحل البديل المقترح هو استخدام toSvg وعرضه على الخادم.

التبعيات

مصدر

يتم استخدام lib القياسي فقط حاليًا، ولكن تأكد من أن متصفحك يدعم:

يعد
علامة SVG <foreignObject>

كيف يعمل

قد تكون هناك يومًا ما (أو ربما تكون موجودة بالفعل؟) طريقة بسيطة ومعيارية لتصدير أجزاء من HTML إلى صورة (وبعد ذلك يمكن أن يكون هذا البرنامج النصي بمثابة دليل على كل العقبات التي كان علي القفز خلالها للحصول على مثل هذه شيء واضح تم القيام به) لكنني لم أجد واحدة حتى الآن.

تستخدم هذه المكتبة ميزة SVG التي تسمح بوجود محتوى HTML عشوائي داخل علامة <foreignObject> . لذلك، من أجل تقديم عقدة DOM لك، يتم اتخاذ الخطوات التالية:

استنساخ عقدة DOM الأصلية بشكل متكرر
احسب نمط العقدة وكل عقدة فرعية وانسخه إلى النسخة المقابلة

ولا تنس إعادة إنشاء العناصر الزائفة، فهي غير مستنسخة بأي شكل من الأشكال بالطبع

تضمين خطوط الويب

ابحث عن جميع إعلانات @font-face التي قد تمثل خطوط الويب
تحليل عناوين URL للملفات، وتنزيل الملفات المقابلة
ترميز base64 والمحتوى المضمّن كعناوين URL للبيانات
قم بتسلسل جميع قواعد CSS التي تمت معالجتها ووضعها في عنصر <style> واحد، ثم قم بإرفاقه بالنسخة

تضمين الصور

تضمين عناوين URL للصور في عناصر <img>
الصور المضمنة المستخدمة في خاصية CSS background ، بطريقة مشابهة للخطوط

إجراء تسلسل للعقدة المستنسخة إلى XML
قم بلف XML في علامة <foreignObject> ، ثم في SVG، ثم اجعله عنوان URL للبيانات
بشكل اختياري، للحصول على محتوى PNG أو بيانات البكسل الأولية في صورة Uint8Array، قم بإنشاء عنصر صورة باستخدام SVG كمصدر، وعرضه على لوحة قماشية خارج الشاشة، والتي قمت بإنشائها أيضًا، ثم اقرأ المحتوى من لوحة الرسم
منتهي!

أشياء يجب الحذر منها

إذا كانت عقدة DOM التي تريد عرضها تحتوي على عنصر <canvas> مع شيء مرسوم عليه، فيجب التعامل معها بشكل جيد، ما لم تكن اللوحة القماشية ملوثة - في هذه الحالة لن ينجح العرض.
سوف يفشل العرض على DOM الضخم نظرًا لاختلاف حد dataURI.