Html2canvas: خذ لقطة شاشة لخريطة جوجل باستخدام جافا سكريبت

تم إنشاؤها على ١٣ ديسمبر ٢٠١٤ · 7تعليقات · مصدر: niklasvh/html2canvas

مرحبا

جربت الكود التالي: محتويات خريطة google هذه div "# map-canvas".
$ ('# map-canvas'). html2canvas ({
onrendered: الوظيفة (قماش) {
var img = canvas.toDataURL ("صورة / png") ؛
window.open (img) ؛
}
}) ؛
}

باستخدام هذا الرمز ، أحصل على خريطة فارغة.
يرجى العثور على إخراج خريطة جوجل.

اسمحوا لي أن أعرف كيفية التغلب على هذه المشكلة.

googlemapimageusinghtml2canvas

Question

مصدر

hardikshah157

👍2

التعليق الأكثر فائدة

أدى تمرير useCORS: true في الخيارات إلى إصلاح المشكلة بالنسبة لي. أيضًا ، allowTaint: false . سيساعدك إذا قمت بتنفيذ الوظيفة بعد ظهور كل المربعات ، يمكنك الاستماع إلى tilesloaded وتنفيذ html2canvas بعد حدوث ذلك.

orloxx في ٢ مارس ٢٠١٧

❤2 🎉2 👍1

ال 7 كومينتر

لا يمكنك عرض الصور (مربعات خرائط Google في هذه الحالة) التي توجد تحت أصل مختلف ما لم يتم تقديمها مع رؤوس cors . إحدى الطرق التي يمكنك من خلالها التغلب على ذلك هي استخدام وكيل للصور.

niklasvh في ١٣ ديسمبر ٢٠١٤

لقد حاولت مع خادم وكيل php لكنني واجهت خطأ: "Uncaught
SecurityError: فشل تنفيذ 'toDataURL' على 'HTMLCanvasElement':
لا يجوز تصدير اللوحات القماشية الملوثة ".

لقد جربت هذا الخادم الوكيل:
https://github.com/brcontainer/html2canvas-php-proxy ،
باستخدام الخادم الوكيل أعلاه ، استخدمت اتجاه خرائط Google:
https://developers.google.com/maps/documentation/javascript/examples/directions-simple

يوم السبت ، 13 ديسمبر 2014 الساعة 11:11 مساءً ، Niklas von Hertzen <
[email protected]> كتب:

لا يمكنك عرض الصور (مربعات خرائط Google في هذه الحالة) الموجودة أسفل
أصل مختلف ما لم يتم تقديمها مع رؤوس cors
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS.
إحدى الطرق التي يمكنك من خلالها التغلب على ذلك هي استخدام وكيل للصور.
-
قم بالرد على هذا البريد الإلكتروني مباشرةً أو قم بعرضه على GitHub
https://github.com/niklasvh/html2canvas/issues/485#issuecomment -66884354
.

_HARDIK SHAH_

hardikshah157 في ١٤ ديسمبر ٢٠١٤

أواجه نفس المشكلة. لم تجد حلا لهذا؟ أريد الحصول على لقطة شاشة لخرائط Google باستخدام html2canvas. نقدر ردك.

tarekahf في ٢٥ نوفمبر ٢٠١٦

👍1

صدم. أي تحديثات؟

smittysmee في ٢٨ فبراير ٢٠١٧

orloxx في ٢ مارس ٢٠١٧

❤2 🎉2 👍1

أواجه نفس المشكلة. حاولت استخدام useCORS: true and allowTaint: false في خيارات الخريطة ولكن ذلك لم يساعد. أحاول الحصول على لقطة الشاشة فقط بعد تحميل الصفحة. هل فاتني شيء؟

NikhilDole في ٣٠ يوليو ٢٠١٩

أواجه مشكلة أيضًا عند التقاط لقطات شاشة لخرائط Google ، أتلقى هذا الخطأ:
ERROR Error: Uncaught (in promise): InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0. Error: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0. at CanvasRenderer.<anonymous> (html2canvas.js:6289) at step (html2canvas.js:83) at Object.next (html2canvas.js:64) at fulfilled (html2canvas.js:54) at ZoneDelegate.invoke (zone-evergreen.js:365) at Object.onInvoke (core.js:39698) at ZoneDelegate.invoke (zone-evergreen.js:364) at Zone.run (zone-evergreen.js:124) at zone-evergreen.js:851 at ZoneDelegate.invokeTask (zone-evergreen.js:400) at resolvePromise (zone-evergreen.js:793) at resolvePromise (zone-evergreen.js:752) at zone-evergreen.js:854 at ZoneDelegate.invokeTask (zone-evergreen.js:400) at Object.onInvokeTask (core.js:39679) at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Zone.runTask (zone-evergreen.js:168) at drainMicroTaskQueue (zone-evergreen.js:570) at invokeTask (zone-evergreen.js:485) at ZoneTask.invoke (zone-evergreen.js:470)

من فضلك ، هذا مهم جدا.