Html2canvas: التصدير باستخدام النشرة

قدم مثالاً عن المشكلة باستخدام http://jsfiddle.net

أضفت jsfiddle. https://jsfiddle.net/japiasente/7ybndo5L/

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

http://jsfiddle.net/djwbra47/

هناك عدة مشاكل:

1. يتم قص العلامة الدائرية إلى ربع دائرة. يبدو أن html2canvas يقوم بقص العناصر قبل تطبيق أي تحويلات. سيتم توسيط العلامة عند 0،0 بدون أي تحويلات ، لذلك يتم قصها إلى ربع دائرة يمكن رؤيتها في هذا الموضع. ثم يحولها html2canvas بعد ذلك إلى الموقع الفعلي. لقد أصلحته عن طريق ضبط الهوامش اليسرى والعلوية على 0 بدلاً من السالب (لذلك ستكون العلامة بأكملها مرئية عند 0،0) ، ثم ضبط التحويلات بنفس المقدار. (ثم ​​قم بتغيير هذه القيم مرة أخرى بعد التقاط اللوحة القماشية ، بالطبع).
2. يظهر الخط في المكان الخطأ. يبدو أن html2canvas يطبق تحويلات على مسارات SVG مرتين. بدون أي إصلاحات ، يظهر الخط بعيدًا جدًا أعلى اليسار. إذا قمت بتغيير تحويله إلى 0 ، فإنه يظهر نفس المسافة بعيدًا جدًا عن أسفل اليمين. اضطررت إلى ضبط التحويل على نصف القيم الأصلية لجعله يعمل.
3. عند تحريك الخريطة ، يتم قص المربعات إلى المدى الأصلي. هذه هي نفس مشكلة الرقم 1: يقوم المنشور بتحويل الخريطة عن طريق تحويل جزء الخريطة ، ويقوم html2canvas بقص المربعات قبل تطبيق هذا التحويل. لإصلاح ذلك ، أضف قيمتي التحويل X و Y إلى القيم اليسرى والعلوية لكل صورة ، ثم اضبط تحويلاتهما على 0.
4. عند تحريك الخريطة ، يرسم html2canvas المربعات أعلى العلامة والخط بحيث لا تكون مرئية بعد ذلك. تم إصلاح هذا عند إجراء التغييرات في الرقم 3 ، لكنني لا أفهم السبب. ربما يتغير ترتيب الرسم عند تحديث خصائص العنصر؟

ها هي النسخة الثابتة:
http://jsfiddle.net/oo2yms1h/

لا تزال هناك مشكلة واحدة لم أقم بحلها بعد: عند تحريك الخريطة بحيث يكون الخط بالقرب من الحافة اليمنى ، لا يظهر على اللوحة. لكنني أعتقد أنها نتيجة أخرى لقص html2canvas قبل التحويل.

ملاحظة أخرى: علامة النشرة الافتراضية هي صورة مستضافة من cdn.leaflet.com والتي تعطي خطأ CORS ، مما يعني أنها لن تظهر على اللوحة القماشية. سيحتاج أي شخص يستخدمه مع html2canvas لاستضافة الرمز بنفسه ، أو التبديل إلى نمط علامة مختلفة.

JAPiasente ، يبدو أنه يمكن تكييف الإصلاح الخاص بي في رقم 3 لحل مشكلات البلاط والتحريك. أيضًا ، علاماتك هي مسارات SVG ويبدو أنها تعاني من نفس مشكلة التحويل المزدوج مثل خطي في الرقم 2 ، فهي تظهر بعيدًا جدًا في الجزء العلوي الأيسر. إليك نسخة بهذه التغييرات:

https://jsfiddle.net/6tn0zy48/

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

لم يكن إصلاح آخر مشكلة متبقية أمرًا صعبًا ، فقد كان الأمر يتعلق فقط بتعيين التحويل إلى 0 واستخدام اليسار والأعلى بدلاً من ذلك.

تم تحديث المثال البسيط الخاص بي:
http://jsfiddle.net/oo2yms1h/1/

وإصلاحي المنقح لخريطتك:
https://jsfiddle.net/6tn0zy48/1/

كنت أعمل في Chrome ، ولاحظت للتو أن الإصلاح الذي أجريته لا يعمل في Firefox و IE. كانوا يقدمون أنماط التحويل كمترجمة بدلاً من translate3d ، وافترضت الكود الخاص بي أنه سيكون دائمًا مترجمًا ثلاثي الأبعاد. وقاموا بوضع البلاط باستخدام الترجمة بدلاً من اليسار والأعلى كما هو الحال في Chrome. تمت مراجعة هذا المثال المحدث لجميع المتصفحات الثلاثة. تعمل رموز المربعات والعلامات في الثلاثة ، لكن ما زلت لا أستطيع إظهار مسارات SVG في Firefox و IE.

http://jsfiddle.net/oo2yms1h/3/

احتاج IE إلى html2canvas.svg قبل أن يعرض الخط ، كما أنه لا يعمل عند تعيين التحويلات أو خصائص اليسار / أعلى على طبقة SVG. هذا المثال يعمل في IE ، ويعمل تقريبًا في Firefox:

http://jsfiddle.net/oo2yms1h/5/

لإظهار الخط في Firefox ، تحتاج أيضًا إلى التبديل إلى ترميز base64 عن طريق إجراء التغيير على html2canvas المذكور في # 648:
https://github.com/niklasvh/html2canvas/pull/648/files

شكرا على كل ما تبذلونه من المساعدة حتى الآن. المشكلة الأخيرة الوحيدة الآن هي إذا كان لدي تراكب svg أعلى منه ، فإن IE لا يلعب بشكل جيد معه. تعمل الخريطة وتراكب svg بشكل جيد في الكروم. أيه أفكار؟

CraigVA أنت مدهش. لقد أمضيت اليومين الماضيين في محاولة إصلاح هذه المشكلة. أتمنى لو كنت قد صادفت jsfiddles الخاصة بك في وقت سابق. شكرا!!!

واجهت مشكلة في استخدام حل CraigVA حيث إذا قمت بتحريك الخريطة على الإطلاق ، فستكون التراكبات بعيدة عن المركز من المربعات.

لمكافحته ، كان كل ما فعلته هو إعادة رسم وظيفة () التي تعين المنظر إلى مكان آخر في المحيط لمدة ثانية ثم تعيد العرض إلى حيث كان. يعمل بشكل جيد.

function redraw() {
    var lat_tmp = map.getCenter().lat;
    var lng_tmp = map.getCenter().lng;
    map.setView([-66.22149259832975, -1.142578125]);
    setTimeout(function () {
        waitForTilesToLoad()
    }, 50000);
    map.setView([lat_tmp, lng_tmp]);
}

في حال واجه أي شخص هذا ولديه نفس المشكلة.

مرحبًا ، شكرًا على هذا الاختراق ، فهو يعمل بشكل جيد باستثناء طبقات المسار و TileLayers الكبيرة.

• إذا كان جزء من طبقة المسار (مضلع / متعدد الخطوط) خارج حدود الخريطة الأصلية ، يتم قصه بواسطة html2canvas عندما أقوم بتحريك الخريطة.
  لقد قمت بتحديث الكود الخاص بك هنا http://jsfiddle.net/c8LL4qfo/ مع خط متعدد أطول. حاول تحريك الخريطة ، سترى أن الخط مقطوع في اللوحة.
  أي أفكار حول كيفية حل هذا الخطأ؟

• النقطة الثانية: إذا كانت tileLayers كبيرة جدًا ، فلا ينتظر html2canvas حتى يتم عرض الخريطة. حتى مع UseCors = صحيح. هل هناك أي طريقة لانتظار تحميل تابللايرز؟ كنت أفكر في استخدام حدث التحميل ، لكن ليس لدي أي فكرة كيف يمكنني ذلك.

شكرا

هل ما زالت هذه مشكلة مع v1.0.0 ؟ إذا كان الأمر كذلك ، هل يمكنك مشاركة مثال على jsfiddle .

لقد قمت بحل هذه المشكلة باستخدام React: تمت إعادة تعيين مكون النشرة بعد تحريك الخريطة ، مع الحفاظ على حالة المركز الأخير ومستوى التكبير / التصغير. لم يعد هناك تعارض مع html2canvas لأن الخريطة المتوفرة هي خريطة جديدة.

حسنًا ، لقد أجريت التحديث في كود jsfiddle هنا: http://jsfiddle.net/2zkLkLxc/
لم يعد هناك المزيد من مشاكل القطع مع V1.0.0 ولكن لدينا مشاكل في الخلف مع اقتصاص الرموز (في أي وقت) وقص المربعات عند تحريك الخريطة.
حاولت إزالة الاختراقات على البلاط ولم يغير أي شيء.

إنه أمر غريب ، لأنني قمت بالتحديث إلى v.1.0.0 في الكود الخاص بي وليس لدي رموز مقتطعة.

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

لدي نفس المشكلة ، لكنني استخدمت Leaflet Map بدلاً من Google Map.
الرمز أدناه

var تحويل = $ (". Leaflet-map-pane"). css ("transform") ؛
إذا (تحويل) {
var c = transform.split ("،")؛
var d = parseFloat (ج [4]) ؛
var h = parseFloat (c [5]) ؛
$ (". Leaflet-map-pane"). css ({
"تحويل": "لا شيء"،
"اليسار": د ،
"أعلى": h
})
}
html2canvas (document.body) .then (function (canvas) {
$ (". Leaflet-map-pane"). css ({
اليسار: 0 ،
أعلى: 0 ،
"تحويل": تحويل
})
} // هنا مستخدم html2canvas 1.0.0-alpha.9

CraigVA شكرا جزيلا!

لدي مشكلة في الوقت الحالي في stackoverflow فيما يتعلق بمشكلة القطع. أنا أستخدم النشرة 1.3.1. إذا كان بإمكان أحدهم أن يقدم لي بعض الإرشادات ، فسيكون ذلك موضع تقدير كبير. القضية هنا.

niklasvh @ القضية ما زالت قائمة: http://jsfiddle.net/x3jzsg9b/4/

القضية لا تزال قائمة: https://jsfiddle.net/x512pgjt/269/

تضمين التغريدة

حاول إزالة المساحة المتروكة من خريطتك. عملت معي.

map.getRenderer (map) .options.padding = 0 ؛

هذا عمل جميل!

html2canvas (document.querySelector ("# mapid")، {
allowTaint: صحيح ،
useCORS: صحيح
}). ثم (قماش => {
document.body.appendChild (قماش)
}) ؛